agentskills.codes
SH

shadcn-components

by qaml-aiSource

Build UI using shadcn/ui components. Use when creating pages, forms, modals, navigation, sidebars, or any frontend UI. Provides component selection, composition patterns, and installation commands. Always activate before writing custom UI code.

Install

mkdir -p .claude/skills/shadcn-components && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/14467" && unzip -o skill.zip -d .claude/skills/shadcn-components && rm skill.zip

Installs to .claude/skills/shadcn-components

Activation

This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.

Build UI using shadcn/ui components. Use when creating pages, forms, modals, navigation, sidebars, or any frontend UI. Provides component selection, composition patterns, and installation commands. Always activate before writing custom UI code.
244 chars✓ has a “when” trigger

About this skill

shadcn UI Components

Required Workflow

Before writing ANY UI code:

  1. Check docs/shadcn-components.md for relevant primitives
  2. Use MCP mcp__shadcn__search_items_in_registries to find blocks matching your need
  3. Install blocks with npx shadcn@latest add <block> before customizing
  4. Only build custom components when no shadcn primitive or block exists

Composition Philosophy

shadcn components are primitives meant to be stacked, not standalone solutions.

Mental model: Decompose UI into shadcn primitives first:

  • Login page = Card + Form + Field + Input + Button
  • Settings page = Tabs + Card + Form + Switch + Select
  • Dashboard = Sidebar + Card + Table + Chart + Badge
  • Modal form = Dialog + Form + Field + Input + Button

Pattern: Container → Layout → Interactive → Feedback

  • Containers: Card, Dialog, Sheet, Sidebar
  • Layout: Tabs, Accordion, Separator, ScrollArea
  • Interactive: Button, Input, Select, Switch, Checkbox
  • Feedback: Alert, Toast, Badge, Skeleton

DO NOT Build Custom Implementations Of:

Buttons, inputs, dialogs, dropdowns, cards, forms, navigation, tables, tooltips, popovers, or any component that exists in shadcn. Use the primitives.

MCP Tools Available

  • mcp__shadcn__search_items_in_registries - Search for components/blocks by keyword
  • mcp__shadcn__view_items_in_registries - View component details and files
  • mcp__shadcn__get_item_examples_from_registries - Get usage examples
  • mcp__shadcn__get_add_command_for_items - Get install command

Project Configuration

  • Style: radix-mira (compact/dense interface)
  • Base color: mist
  • Theme: mist
  • Chart Color: mist
  • Heading: Source Serif 4
  • Font: Figtree
  • Radius: Large (0.875rem)
  • Icons: Lucide
  • Components location: src/components/ui/
  • Preset code: --preset b4cwnZvlhI

Styling

  • Use cn() utility from @/lib/utils for conditional classes
  • Theme colors use CSS variables in globals.css
  • Components support light/dark mode via .dark class on root

Search skills

Search the agent skills registry