shadcn-solid-components Skills

Agent Skills for the shadcn-solid-components library, following the Agent Skills open standard.

These skills enable AI coding assistants (Claude Code, Windsurf, Cursor, etc.) to automatically discover, correctly use, and properly review components from the shadcn-solid-components library.

Skills

shadcn-solid-discovery

Discover and use shadcn-solid-components when building SolidJS UIs. Use PROACTIVELY when about to build any UI component.

• Component discovery via ssc list and direct _metadata.json reading from node_modules
• Installation with ssc add
• Import paths, variant/size APIs
• Theming with ConfigProvider
• i18n locale support

shadcn-solid-composition

Build composite UIs and full pages with shadcn-solid-components. Use when building dashboards, admin panels, data tables, command palettes, settings pages, or multi-step wizards.

• 6-step composition workflow (Understand → Gather Context → Declare Design System → v0 Draft → Full Build → Verification)
• HOC composition patterns with dependency trees
• Layout recipes and variant exploration
• Pre-delivery checklist

shadcn-solid-review

Review custom components and layouts against shadcn-solid-components design patterns. Use when planning, reviewing, or auditing components.

• Structure review (data-slot, composition patterns)
• Spacing audit (gap vs margin, theme-specific density)
• Design token check (semantic tokens only)
• CVA & cx() patterns
• ConfigProvider theming
• Composability and responsive verification

Installation

For AI Coding Assistants

Copy the skills/ directory into your project's .agents/skills/ or .windsurf/skills/ directory:

# For Claude Code / generic Agent Skills support
cp -r skills/ /your-project/.agents/skills/

# For Windsurf
cp -r skills/ /your-project/.windsurf/skills/

Accessing Component Metadata

Since shadcn-solid-components ships with full source code in the npm package, all _metadata.json files are directly accessible:

# List all component metadata
ls node_modules/shadcn-solid-components/src/components/*/_metadata.json

# List all HOC metadata
ls node_modules/shadcn-solid-components/src/hoc/*/_metadata.json

# Read a specific component's metadata
cat node_modules/shadcn-solid-components/src/components/dialog/_metadata.json

No separate catalog generation is needed — the AI reads metadata directly from the installed package.

Directory Structure

skills/
  shadcn-solid-discovery/
    SKILL.md                              # Discovery skill instructions
  shadcn-solid-composition/
    SKILL.md                              # Composition skill instructions
    references/
      composition-patterns.md             # HOC dependency trees and patterns
  shadcn-solid-review/
    SKILL.md                              # Review skill instructions
    references/
      review-checklist.md                 # Comprehensive review checklist
      theme-styles.md                      # Theme style reference (Vega/Nova/Mala/Lyra/Mira)

Note: The discovery skill reads _metadata.json directly from node_modules/shadcn-solid-components/src/ — no separate catalog files are needed since the npm package includes full source code.

License

MIT