shadcn-ui

--- name: Shadcn UI & Blocks description: This skill should be used when the user asks to "build a frontend", "create a landing page", "add shadcn components", "install shadcn blocks", "set up shadcn", "add a hero section", "add pricing section", "build a UI with Tailwind", "use shadcnblocks", "add UI blocks", "add a contact form", "build a dashboard", "create an ecommerce page", "add a navbar", "add a footer", or is building any frontend that could leverage shadcn/ui components and Tailwind CSS. It provides knowledge of 1,338 premium blocks and 1,189 free components from ShadcnBlocks, enabling intelligent selection and installation of the right UI elements for any frontend task. --- # Shadcn UI & ShadcnBlocks Integration This skill enables building polished frontends using [shadcn/ui](https://ui.shadcn.com/) components and premium [ShadcnBlocks](https://shadcnblocks.com/) templates. Its primary capability is **intelligently recommending the best block or component** for any UI need — not just the right category, but the right *variant* within that category — then handling setup and installation. ## When to Use Activate this skill when: - Creating a new frontend, landing page, marketing site, or app UI - The project uses or should use React/Next.js with Tailwind CSS - Pre-built UI sections (hero, pricing, features, testimonials, etc.) would accelerate development - The user needs a specific UI element (form, chart, dialog, navigation, etc.) - The user mentions shadcn, shadcn/ui, shadcnblocks, or Tailwind-based UI components ## Blocks vs Components | | Blocks | Components | |---|--------|------------| | **What** | Full page sections | Reusable UI elements | | **Size** | Hero, pricing, footer, etc. | Buttons, inputs, dialogs, etc. | | **Count** | 1,338 across 71 categories | 1,189 across 60+ groups | | **Access** | Premium (API key required) | Free | | **Install** | `@shadcnblocks/` | `@shadcnblocks/-