sindre-ai

add-shadcn-component

Properly adds a shadcn/ui component to the project via the official CLI

sindre-ai 7 1 Updated 6mo ago
GitHub

Install

npx skillscat add sindre-ai/maskin/claude-skills-add-shadcn-component

Install via the SkillsCat registry.

SKILL.md

Add shadcn/ui Component

Use this skill to add a new shadcn/ui component to the project. Never hand-write UI primitives — always use the CLI.

Usage

The user will specify which component to add (e.g., "add the accordion component").

Steps

  1. Check if it already exists: Look in apps/web/src/components/ui/ for the component
  2. Install via CLI:
    cd apps/web && npx shadcn@latest add <component> --yes
  3. Verify: Check that the file was created in apps/web/src/components/ui/
  4. Report: Tell the user what was added and the import path (@/components/ui/<component>)

Notes

  • The --yes flag accepts all defaults (no interactive prompts)
  • The CLI reads apps/web/components.json for configuration (aliases, paths, style)
  • If the component has dependencies (e.g., Dialog depends on Portal), the CLI installs them automatically
  • Do NOT modify the generated component file — use it as-is

Categories