shadcn
Installation
SKILL.md
shadcn/ui Development
This skill provides guidance for building interfaces with shadcn/ui, focusing on always using the latest version and modern patterns.
Philosophy: Copy and own your components. Use the
new-yorkstyle. Leverage Radix UI primitives for accessibility.
Quick Reference
| Feature | Modern Approach | Legacy (Avoid) |
|---|---|---|
| Style | new-york |
default (deprecated) |
| Toast | sonner |
toast component |
| Animation | CSS/tw-animate-css | tailwindcss-animate |
| forwardRef | Direct ref prop (React 19) |
forwardRef wrapper |
Installation
Initialize in Next.js
Related skills
More from velcrafting/codex-skills
prediction-arbitrage-scout
Scout price discrepancies between Polymarket and Kalshi for discovery and comparison. Read-only; no execution.
50supabase-expert
>-
10tailwindcss
This skill should be used when the user asks to "style with Tailwind", "add CSS", "configure theme", "use @theme", "add custom colors", "implement dark mode", "use container queries", "add responsive design", "use OKLCH colors", or discusses styling, theming, or visual design. Always use the latest Tailwind CSS version and modern patterns.
9stripe
>-
6