Install design skills in Claude Code, Cursor & Codex
A staqd skill is one markdown file. Here is how to get it into each tool, what it does once it's there, and every CLI command.
Quick start
Every design skill installs with one command. It writes a SKILL.md into your project that your AI tool reads as design guidance:
$ npx staqd add bentoThe CLI is the fastest path, but it isn't required. Every free skill page has Copy and Download buttons for the full SKILL.md, so you can place the file yourself. Where it should live depends on your tool — the per-tool guides below cover Claude Code, Cursor, and Codex.
Claude Code: install a skill
Staqd skills use the same SKILL.md format as Claude Code skills, so Claude Code treats them like any other agent skill. Run the install command from your project root:
$ npx staqd add bentoClaude Code discovers project skills at .claude/skills/<name>/SKILL.md, so that's where the file should live — if you grabbed the file with the Copy or Download button instead of the CLI, create that folder and save it there (for example .claude/skills/bento/SKILL.md). Skills you want available in every project can go in ~/.claude/skills/ instead.
Once the file is in place, Claude Code reads the skill's name and description and applies it when it matches the work — or you can invoke it directly: “build the dashboard using the bento skill.” No restart needed; skills are read from disk each session.
Cursor: use a skill as project rules
Cursor rules live in the .cursor/rules directory of your project. A skill file is plain markdown, so it drops straight in: copy the skill body into a rule file such as .cursor/rules/bento.mdc, then set how it applies — “Always” if the whole app should follow the style, or scoped to your UI folders if only part of it should.
If you'd rather not commit a rule, keep the SKILL.md anywhere in the repo and @-mention the file in chat when you want that style applied. Rules are the better default: they ride along with every prompt, so generated screens stay consistent without you re-attaching anything.
Codex: point AGENTS.md at a skill
Codex custom instructions live in AGENTS.md — a markdown file at the root of your repo that Codex reads before it works. To hand Codex a staqd skill, install the skill into your project, then reference it from AGENTS.md: “Follow the design system in .claude/skills/bento/SKILL.md for all UI work.”
If you prefer a single file, paste the skill body directly into AGENTS.md. The AGENTS.md convention is honored by a growing set of coding agents beyond Codex, so this setup travels with your repo.
How skills work
A design skill is an opinionated design-system spec — color tokens, typography, spacing, component patterns, motion, and accessibility rules. Installed into your AI tool, it makes every generated screen consistent and on-brand instead of generic. Every staqd skill is original work, installable into Claude Code, Cursor, and Codex.
The base file for free skills is fully open — copy it, download it, or install via CLI. Pro skills and Pro prompts unlock the rest of the library.
Using a solution
An AI solution ships as template code plus a curated setup prompt. After purchase, you download the bundle from your dashboard, drop it into a folder, and paste the setup prompt into your AI tool — it wires the solution to your services and gets you running.
CLI reference
$ npx staqd add <slug>Install a design skill into the current project$ npx staqd listList available skills$ npx staqd loginAuthenticate to unlock Pro skillsFAQ
Are staqd skills the same as Claude skills?
Same format, narrower focus. A staqd skill is a SKILL.md file — the format Claude Code uses for agent skills — so Claude Code picks one up like any other skill. The difference is what's inside: staqd skills are design-system specs rather than general task skills, and because they're plain markdown they also work in Cursor, Codex, or any tool that reads project context.
Skills vs Claude Code plugins — what's the difference?
Claude Code plugins are bundles: one installable package can carry slash commands, agents, hooks, MCP servers, and skills. A staqd skill is a single focused SKILL.md. Use it on its own, or fold it into a plugin you maintain if you distribute a setup to a team.
Can I use a free skill as a template for my own design system?
Yes. Free skills are fully open — copy or download the SKILL.md and edit it. The structure doubles as a Claude Code template for a house design system: keep the sections, swap in your own tokens and type stack, and your agent follows your brand instead of ours.
Do I need the CLI?
No. Every free skill page has Copy and Download buttons for the full skill file — the CLI is just the fastest way to get it into the right place. Pro skills require signing in either way.