---
name: frontend-shadcn-builder
description: "Generate shadcn/ui screens from plain English with tokens, dark mode, and accessibility baked in. Takes a screen description, picks primitives, composes them into a page, and emits a typed Next.js route."
license: MIT
---

# 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

```bash
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:

```bash
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.