Install shadcncraft Agent Skills

Agent Skills are discovered from your agent tool's project-level skills directory: .claude/skills/, .cursor/skills/, .codex/skills/, or the tool-agnostic .agents/skills/. You can install them per project or globally for every project.

These skills do their real work in a coding agent with access to your local project (Claude Code, Cursor, or Codex), because they install registry blocks via the shadcn CLI and read and write your project's files. The Claude desktop app can run skills too, but in a sandbox without your repo (see Claude desktop app below).

Per project (recommended)

Run from your project's root. Install everything, or pick the skills you need:

# everything
npx @shadcncraft/skills add all
 
# or a subset (short or full names both work)
npx @shadcncraft/skills add generate-code import-variables

By default this copies the skills into the agent tools it auto-detects in the project (.claude, .cursor, .codex, or .agents), falling back to .claude/skills/ if none are present. See what is available with:


$ pnpm dlx @shadcncraft/skills list

Choosing which tools

Override auto-detection when you need to:

# specific tools
npx @shadcncraft/skills add all --tool claude,cursor,codex
# every known tool
npx @shadcncraft/skills add all --all-tools
# an exact folder (any tool)
npx @shadcncraft/skills add generate-code --dir .windsurf/skills

Globally (every project)

To make the skills available in every project on your machine, install them into your home skills directory:

cp -R path/to/@shadcncraft-skills/* ~/.claude/skills/

Anything in ~/.claude/skills/ loads in every Claude Code session, regardless of which project you open.

Manual install

Each skill is just a folder (SKILL.md + references/). If you prefer not to use the CLI, download the skill and unzip it into your tool's skills directory (e.g. .claude/skills/):

.claude/
└── skills/
    ├── shadcncraft-generate-code/
    │   ├── SKILL.md
    │   └── references/
    ├── shadcncraft-import-variables/
    └── ...

After installing

Restart your agent or open a new chat window so it picks up the skills. To confirm a skill is available, ask something that should trigger it (for example, "sync my Figma variables into globals.css"). The agent will announce Launching skill: ... when it activates.

Cursor and Codex

The skills are tool-agnostic. The installer auto-detects .cursor and .codex and copies into their skills/ folders (or pass --tool cursor,codex explicitly). Use them exactly as in Claude Code, by describing the task in natural language.

Claude desktop app

You can upload the skills to the Claude desktop app, but with an important limitation: the desktop app runs skills in a sandbox that does not have access to your local project or terminal. So it can read and discuss the skills, but it cannot install registry blocks into your codebase or edit your files. For real work, use Claude Code, Cursor, or Codex above.

To upload anyway:

Open Settings → Capabilities and turn on code execution and file creation (skills need these).
Go to Customize → Skills in the sidebar, click +, then Create skill, and upload the skill's .skill file (a ZIP). Claude reads the SKILL.md and shows a summary.
Toggle the skill on. It is then active across chat, projects, and Cowork.

Notes: available on Pro, Max, Team, and Enterprise plans with code execution enabled; uploaded skills are per-user (not centrally managed); there is a limit of 20 uploaded skills.

License key

Installing Pro blocks (used by Generate code) requires a Pro + React license key. Set it in your environment before running an install the agent suggests:

export SHADCNCRAFT_LICENSE_KEY=your-key

The skills remind you of this whenever they recommend installing a Pro item. Free-tier blocks install without a key, and Import variables needs no key at all.

Updating

Re-run the install command to pull the latest version of a skill. Your project is not modified: only the installed skill folders (in each tool's skills/ directory) are replaced.