Frontend Design Pro

Frontend Design Pro turns Claude into a senior product designer who also ships the code. It produces React, Vue, or Svelte interfaces with a coherent type scale, a real color system, deliberate spacing, and the motion and micro-interaction details that distinguish a shipped product from a scaffolded template. It is for engineers who can build but want design-director-level judgment baked into the output.

When to use it

• You have working logic but the UI looks like default Tailwind or shadcn with nothing customized.
• You need a landing page, dashboard, pricing table, or onboarding flow that feels intentional, not generic.
• A component "works" but feels flat — no hover states, no focus rings, abrupt transitions, weak hierarchy.
• You want a design system seeded: tokens, a type ramp, semantic color roles, and elevation/shadow scales.

What it does

The skill reasons about design before writing markup: it picks a type scale (often a modular ratio like 1.2–1.333), defines color as semantic tokens rather than raw hex, and sets a spacing rhythm. On the code side it works with what your project already uses — Tailwind utility classes and @theme/CSS custom properties, CSS Modules, or styled approaches. For motion it reaches for Framer Motion (motion.div, AnimatePresence, variants, layoutId for shared-element transitions) in React, Vue's <Transition>/<TransitionGroup>, or Svelte's built-in transition:/animate:flip. It respects prefers-reduced-motion, uses spring/ease curves intentionally, and keeps animations on transform/opacity for compositor performance.

Usage example

curl -fsSL --create-dirs -o ~/.claude/skills/frontend-design-pro/SKILL.md https://claudeskil.com/skills/frontend-design-pro/SKILL.md

Then prompt it directly:

Redesign components/PricingTable.tsx. Three tiers, "Pro" highlighted.
Use Framer Motion for the hover lift and a tasteful entrance stagger.
Match our existing Tailwind theme tokens in app/globals.css.

It will return the component plus any token additions, e.g.:

@theme {
  --color-accent: oklch(0.62 0.19 264);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

Tips & gotchas

• Point it at an existing component or your token file first — it adapts to your stack instead of importing a new styling library unprompted.
• Ask for OKLCH color if you care about perceptually even palettes and accessible contrast; it will generate ramps that stay legible across shades.
• Shared-element transitions need a stable layoutId across both states; if elements unmount, wrap them in AnimatePresence or the animation silently no-ops.
• It defaults to subtle motion. If you want bold, say so — otherwise expect 150–300ms transitions, not flashy ones.

FAQ

Does it pull in heavy animation dependencies? Only if motion is requested and your framework benefits. Svelte and Vue use built-in transitions with zero extra deps; React designs use Framer Motion when shared layout or orchestration is involved.

Will it overwrite my design system? No. Given existing tokens it extends them and reuses your scale rather than introducing a parallel one.

Can it work from a screenshot or Figma reference? Yes — describe or paste the reference and it will match the hierarchy, spacing, and type treatment in code.