Frontend shadcn Builder

Frontend shadcn Builder turns a plain-English screen description into a working, typed Next.js route built from shadcn/ui primitives. It picks the right components, composes them into a coherent layout, and wires up theming tokens, dark mode, and accessible markup so the output is production-shaped rather than a throwaway sketch. It's aimed at React developers already on (or moving to) the shadcn + Tailwind + Next.js App Router stack who want to skip the boilerplate of assembling forms, dashboards, and settings pages by hand.

When to use it

• You need a settings page, dashboard, auth flow, or data table scaffolded fast and want it to match your existing components/ui setup.
• You're prototyping several screen variants and don't want to hand-wire Card, Dialog, Form, and Table each time.
• You want a starting route that already respects your globals.css design tokens and next-themes dark mode instead of retrofitting them later.

How it works

Given a description, the skill maps intent to shadcn primitives (Button, Input, Card, Form + react-hook-form with a zod resolver, Table, Dialog, Tabs, Sheet, etc.), composes them into a page, and emits a route. Concretely it:

• Generates a route under the App Router (app/<segment>/page.tsx) as a typed React component, splitting "use client" boundaries where interactivity requires them.
• Uses your existing CSS variable tokens (--background, --foreground, --primary, --radius) and cn() from lib/utils rather than inventing inline colors.
• Keeps dark mode token-driven so it follows ThemeProvider / next-themes automatically.
• Bakes in accessibility: label/htmlFor pairing, aria-* on interactive controls, visible focus rings, and Radix-backed keyboard semantics from the underlying primitives.

It assumes shadcn/ui is already initialized; missing primitives are flagged so you can add them.

Usage

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

# then, in your shadcn + Next.js project:
> Build a billing settings screen: plan card, usage table,
  and a "Cancel subscription" confirmation dialog.

If a primitive isn't installed yet:

npx shadcn@latest add card table dialog

Tips & gotchas

• Run npx shadcn@latest init first. The skill composes from your local components/ui; it won't reinstall the registry for you.
• It writes App Router routes (app/). If you're on the legacy pages/ directory, you'll need to adapt the export.
• Forms default to react-hook-form + zod. If those aren't dependencies, install them or ask for an uncontrolled variant.
• Describe data shape explicitly ("columns: name, email, status") so the generated Table and types are accurate.

FAQ

Does it overwrite my theme? No. It reads the CSS variables already in globals.css and references them; it doesn't redefine your palette.

Can it target a specific component library version? It uses whatever shadcn primitives exist in your repo, so it tracks your installed versions rather than pinning its own.

Is the output typed? Yes — components, props, and form schemas are emitted as TypeScript, including inferred types from your zod schemas.