frontend-design
Gives Claude a design brief for interfaces: deliberate type, color, layout and motion instead of defaults.
Anthropic · Apache-2.0 · Design
/plugin install frontend-design@claude-plugins-officialSkills for coding work in Claude Code: planning, UI design, testing, review and building on the Claude API. Each card has the install command; the guide below covers where Claude Code looks for skills and what they cost.
Gives Claude a design brief for interfaces: deliberate type, color, layout and motion instead of defaults.
Anthropic · Apache-2.0 · Design
/plugin install frontend-design@claude-plugins-officialInterviews you, drafts a SKILL.md, runs test prompts and tunes the description of your own skill.
Anthropic · Apache-2.0 · Productivity
/plugin install skill-creator@claude-plugins-officialGuides Claude through planning, coding, testing and evaluating an MCP server for any API.
Anthropic · Apache-2.0 · Coding
/plugin install example-skills@anthropic-agent-skillsDrives a local web app in headless Chromium with Playwright to click through, screenshot and read logs.
Anthropic · Apache-2.0 · Testing
/plugin install example-skills@anthropic-agent-skillsBuilds multi-component React and shadcn/ui apps and bundles them into a single shareable HTML file.
Anthropic · Apache-2.0 · Coding
/plugin install example-skills@anthropic-agent-skillsGives Claude current Claude API and SDK docs in eight languages and migrates code to newer models.
Anthropic · Apache-2.0 · Coding
Reviews your diff, branch or pull request for correctness bugs in the background, and can fix or post findings.
Anthropic · Coding
Makes a coding agent brainstorm, plan, write tests first and review its work before calling it done.
obra · MIT · Coding
/plugin install superpowers@claude-plugins-officialQuestions you in rounds about a loose idea until every decision in the plan is made.
mattpocock · MIT · Productivity
claude plugins install mattpocock-skillsMakes the agent reach for the smallest fix that works, from «skip it» to the standard library, before new code.
DietrichGebert · MIT · Coding
/plugin install ponytail@ponytailPicks a style, palette, font pair and page pattern for your product type, then checks the UI before handoff.
nextlevelbuilder · MIT · Design
/plugin install ui-ux-pro-max@ui-ux-pro-max-skillMakes a coding agent reply in short, plain sentences while keeping code, paths and numbers exact.
JuliusBrussee · Apache-2.0 · Coding
npx skills add JuliusBrussee/caveman -g25 engineering skills behind nine commands, from /spec and /plan to /review and /ship.
addyosmani · MIT · Coding
/plugin install agent-skills@addy-agent-skillsRecords each session, compresses it into searchable observations and loads the relevant ones next time.
thedotmack · Apache-2.0 · Productivity
npx claude-mem installSteers landing pages and redesigns away from templated looks with a brief read and three design dials.
Leonxlnx · MIT · Design
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontendMaps a codebase into a searchable graph with a dashboard, guided tours, diff impact and onboarding notes.
Egonex-AI · MIT · Coding
/plugin install understand-anything24 design commands (audit, polish, critique and more) plus automated checks for generic AI-made UI.
pbakaus · Apache-2.0 · Design
npx impeccable installKeeps the agent's plan, findings and progress in three files on disk and re-injects the plan every turn.
OthmanAdi · MIT · Productivity
/plugin install planning-with-files@planning-with-filesNo skill matches these filters.
Stars are GitHub stars on the date shown. «Official» means published by Anthropic; community skills are third-party code, so read a skill's files before you install it.
A Claude Code skill is a folder with a SKILL.md file: a name, a description of when to use it, and instructions Claude follows, with optional scripts and reference files beside it. You run one by typing / and its name, or Claude picks it up when your request matches the description. The skills above are the ones we would install for coding work. For skills that run in the Claude.ai app or through the API, see the full Claude Skills catalog. New to Claude Code itself? Start with how to use Claude Code.
| You want to | Install |
|---|---|
| Ship a feature without the agent drifting | grill-me to settle the plan, planning-with-files to keep it across sessions, the bundled /code-review before you merge. Or one process pack that covers all of it: Superpowers or Addy Osmani's agent skills. |
| Stop the agent over-building | Ponytail, which checks for the smallest fix first, and /ponytail-review on a branch before merging. |
| Keep context between sessions | Claude-Mem for automatic memory of past work, or planning-with-files for one long task. |
| Learn an unfamiliar codebase | Understand Anything, which maps it into a graph you can search and ask about. |
| Get UI that doesn't look generic | UI UX Pro Max or frontend-design for the first pass, Impeccable or Taste to audit it, webapp-testing to click through it in a browser. |
| Build on Claude itself | The bundled /claude-api for current SDK docs, mcp-builder for an MCP server, web-artifacts-builder for a one-file React app. |
| Spend fewer tokens | Caveman for shorter replies, Ponytail for less code. Then check what your installed skills cost, below. |
| Turn your own routine into a skill | skill-creator, which drafts the SKILL.md and tests it. |
Claude Code reads skills from several places. When two skills share a name, the one higher in this table wins:
| Location | Path | Loads |
|---|---|---|
| Enterprise | .claude/skills/ in the managed settings folder | For everyone in the organization |
| Personal | ~/.claude/skills/<name>/SKILL.md | In every project on your machine |
| Project | .claude/skills/<name>/SKILL.md in the repository | For anyone working in the repo |
| Nested | <subfolder>/.claude/skills/ | When Claude works on files in that subfolder |
| Plugin | <plugin>/skills/<name>/SKILL.md | Where the plugin is enabled, as /plugin-name:skill-name |
| Your claude.ai account | ~/.claude/skills/synced/ | In terminal sessions signed in with claude.ai, version 2.1.273 or later |
Claude Code watches these folders. An edit to a SKILL.md applies in the running session; a new top-level skill folder needs /reload-skills. Skills synced from claude.ai are checked for changes about every 10 minutes.
Type / and the skill's name, with arguments if it takes them, for example /fix-issue 123. Claude can also run a skill on its own when your request matches the description. Two fields in a skill's front matter change that:
disable-model-invocation: true: only you can run it. Use this for anything with side effects, like a deploy.user-invocable: false: only Claude can run it, and it is hidden from the / menu.Older custom commands in .claude/commands/deploy.md still work and become /deploy the same way. Anthropic recommends skills for new work, because a skill folder can carry scripts and reference files and gives you control over who runs it.
Claude Code comes with bundled skills, among them /code-review, /debug, /batch, /loop, /doctor and /claude-api. They are prompt-based: each one hands Claude a detailed set of instructions, and Claude does the work with its usual tools. Claude runs some of them by itself when they fit. Longer checks such as /verify run only when you call them. The disableBundledSkills setting turns them all off.
A plugin is a package that can hold several skills plus subagents, hooks and MCP servers, installed and updated as one unit. A skill doesn't need a plugin: a folder in ~/.claude/skills/ works on its own. Plugins are how most community skill sets are shipped, because one command installs everything and the marketplace handles updates.
Claude Code adds Anthropic's official marketplace, claude-plugins-official, the first time you start an interactive session. Run /plugin and open the Discover tab to browse it. A third-party marketplace takes one extra step:
/plugin marketplace add OthmanAdi/planning-with-files
/plugin install planning-with-files@planning-with-files
Many skills on GitHub also install with the cross-agent installer, which puts them in place for Claude Code, Codex and other agents at once:
npx skills add JuliusBrussee/caveman -g
Every skill Claude may run on its own keeps its name and description in context on every turn, whether or not it's used. Claude Code caps that text at 1,536 characters per skill, and loads the full instructions only when the skill runs. A plugin with ten skills adds ten descriptions. To see the bill:
/skills lists every available skill. Press t to sort by token count, and Space to hide a skill from Claude or the / menu./skill-doctor (version 2.1.252 or later) shows what each skill costs in context and how often it is used, so you can turn off the ones you never call./doctor also flags skills, MCP servers and plugins you don't use against their context cost./plugin, plugins from Anthropic's official marketplace show a context cost estimate before you install them.The /skills toggle saves to skillOverrides in .claude/settings.local.json, where "off" hides a skill everywhere and "name-only" keeps only its name in context.
Claude decides from the description alone, so a vague description means a skill that rarely runs. The author of planning-with-files measured unprompted use at 60 to 67% of the time. Two fixes:
CLAUDE.md, such as "When a task needs 3+ steps, invoke the planning-with-files skill first."Our manual covers writing your own skill step by step.
A skill or plugin runs with your permissions. Hooks run shell commands on their own, and a skill's scripts can read your files. Anthropic advises reading every bundled file of a skill you didn't write, and checking for network calls and steps that don't match what the skill says it does. Stars on GitHub measure popularity; nobody has reviewed the code for you.
One email a week: the best new prompts and one short guide. Unsubscribe any time. Privacy policy