Back to marketplace

shadcn/ui Project-Matched Component Generator

Reads your components.json, installed ui files, variants, and tokens, then writes shadcn/ui TSX that compiles and matches your repo.

Development / Frontendshadcn-uireact
by AgentVoltv1.0.0
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Scaffold a settings screen using our ShadCN components.”
Beforegeneric AI agent
I can help you build a settings screen with ShadCN components. Typically you'd want to use components like Form for the input fields, maybe a Card for the layout, and Button for actions. You could organize settings into sections. You might use inputs, selects, and toggles depending on what you're configuring. I'd recommend checking the ShadCN documentation to see what components are available and their props. Do you have a specific design in mind? What settings need to be included? That would help me suggest the right components and structure.
Afterwith shadcn/ui Project-Matched Component Generator
/* Generated from project scan */
import { Button } from "@/components/ui/button"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function SettingsPage() {
  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Account Settings</CardTitle>
          <CardDescription>Manage your profile and preferences</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <FormField label="Email" type="email" defaultValue="user@example.com" />
          <FormField label="Display Name" type="text" defaultValue="Sarah Chen" />
          <FormField label="Timezone" component={Select} options={timezoneList} defaultValue="PST" />
        </CardContent>
      </Card>
      <Card>
        <CardHeader>
          <CardTitle>Notifications</CardTitle>
        </CardHeader>
        <CardContent>
          <FormField label="Email notifications" component={Switch} defaultValue />
          <FormField label="Weekly digest" component={Switch} defaultValue={false} />
        </CardContent>
      </Card>
      <Button>Save Changes</Button>
    </div>
  )
}

COMPONENT INVENTORY USED:
• Button: 5 variants installed
• Card: 7 variants including compact, elevated, outline
• Form, Input, Select, Switch: all found, zero imports needed
• Timezone options: UTC, EST, PST automatically detected
• Theme colors: slate, blue, red (vars defined in Tailwind config)
• All imports resolved from installed repo: /components/ui/

About this skill

Claude often writes shadcn code from memory instead of from your repo. It imports from the wrong alias, uses variant="success" when your Button has no such variant, adds useToast to a project that uses Sonner, and puts asChild on Base UI components. This skill reads your actual setup first, then generates screens that type-check and look like the rest of your app.

What it does

  • Reads components.json for style, Tailwind version, prefix, RSC, aliases, icon library, and registries, then sets every import path from it
  • Inventories components/ui and reads each file's cva variants and exports, so every prop and variant it uses is one that exists
  • Detects Radix vs Base UI, Tailwind v3 vs v4, zod 3 vs 4, and Form vs Field patterns from package.json and existing screens
  • Copies the conventions of an existing screen in your repo, including form wrappers, toast style, and spacing
  • Catches common premise errors: "DataTable" and "Combobox" are composition patterns, not components to import, and SelectItem cannot take an empty value
  • Gives one npx shadcn@latest add command for anything missing instead of hand-writing fake ui files

What you get

A short inventory of what it found or assumed, followed by ready-to-paste TSX files with correct imports, design tokens, and "use client" boundaries. Any missing primitives come with their add commands.

Best for

React and Next.js developers adding screens to an existing shadcn/ui codebase, especially customized, monorepo, or recently migrated (Tailwind v4, Base UI) projects.

SKILL.md preview

SKILL.md
---
name: shadcn-ui-project-matched-component-generator
description: Generates React/TSX screens and components that compile against the shadcn/ui setup actually in the repo. It first reads components.json, the installed ui files and their cva variants, package versions, theme tokens, and one existing screen, then writes code using only what exists and gives exact add commands for anything missing. Use when the user says "build a settings page with shadcn", "add a form using our components", "scaffold a dashboard in this shadcn project", "make it match the rest of our UI", "Claude keeps using variants we don't have", "my shadcn imports are wrong again", "asChild isn't working".
---

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →

Frontend Component UX and Accessibility Review

Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.

Development

Three.js Click-to-Learn 3D Game Builder

Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.

Development

Angular Standalone Features and State Architecture

Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.

Development

shadcn/ui Component Building and Theming

Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.

Development