---

name: shadcn-project-aware-generator description: Read your ShadCN setup and generate components that use current names, patterns, and your installed variants. Use when working on shadcn project-aware generator.

ShadCN Project-Aware Generator

Instead of Claude guessing at ShadCN component APIs from stale training data, this skill inspects the project, sees what components are installed, and generates matching JSX/TSX with correct imports and composition patterns. Use whenever you scaffold a new screen against an existing ShadCN codebase.

What you get

• Project scan
• Components inventory
• Correct-first-time TSX
• Theme-aware Tailwind classes
• Import statements
• Variant usage matrix

Customize your output

• Component library override: shadcn, radix, headlessui, custom
• Project scope: whole repo, this dir, one file
• Strict-only-shadcn: yes, no
• Framework: Next.js, Astro, Remix, Vite
• Add missing components: yes, ask, no
• Storybook stub: yes, no

Example output

'A settings screen scaffolded with correct Form, DropdownMenu, and DataTable imports and zero debug loops.'

Best for

React and Next.js devs building on ShadCN.

---

Note: Recommend telling Claude to only use this skill for a project to avoid cross-skill styling drift. High confidence.

Source: Griffin Wooldridge · https://www.youtube.com/watch?v=iZl5vH81jZM Category: Design · Priority: P4