Curated skills index

Agent Skills

02 — skills

Know-how your agent loads on its own when a task calls for it: React performance rules, interface guidelines, test-first loops, debugging discipline. A short list picked for frontend work, each installed with one npx skills add command.

  • 12 skills
  • one-line install
  • works with 60+ agents
  1. 01

    Pick your agent

    The install for bar adds the right -a flag to every command.

  2. 02

    Run one command

    npx skills add puts the skill where your agent looks for it.

  3. 03

    Just work

    No slash needed. The agent loads the skill when a task calls for it.

12 skills

vercel-labs/agent-browsertesting

agent-browser

Fast browser automation CLI for agents — navigate, click, fill, and inspect pages through accessibility snapshots to test what you built.

source
ikhattab/agent-pr-reviewcode review

agent-pr-review

Review agent-generated pull requests — priority triage, 5 red flags (CI gaming, code reuse blindness, hallucinated correctness, agentic ghosting, untrusted input), and security checks.

source
vercel-labs/skillsskill discovery

find-skills

Let the agent find and install skills for you — searches the skills.sh ecosystem by task and favors well-installed, reputable sources.

source
anthropics/skillsdesign & ui

frontend-design

Anthropic's guide to distinctive, production-grade interfaces — deliberate typography, color, layout, and motion instead of generic AI aesthetics.

source
ikhattab/graphql-securitysecurity

graphql-security

Secure GraphQL client code — typed variables over string interpolation, plus auth, input validation, and hardening.

source
ikhattab/l10n-skilli18n

localization

CLDR-based formatting for currency, dates, numbers, units, and addresses across 20+ locales.

source
shadcn-ui/uireact

shadcn

The official shadcn/ui skill — reads your project's shadcn config and installed components, then adds and composes components the right way.

source
obra/superpowersdebugging

systematic-debugging

Root cause before fixes — a four-phase debugging method that blocks symptom patching and rethinks the design after three failed fixes.

source
mattpocock/skillstesting

tdd

Matt Pocock's test-driven development loop — vertical red-green slices and behavior-focused tests that survive refactors.

source
vercel-labs/agent-skillsreact

vercel-composition-patterns

React composition patterns that stop boolean-prop sprawl — compound components, lifted state, explicit variants, and React 19 APIs.

source
vercel-labs/agent-skillsreact

vercel-react-best-practices

Vercel's React and Next.js performance rules — 70 of them, ranked by impact, from request waterfalls and bundle size to re-renders.

source
vercel-labs/agent-skillsdesign & ui

web-design-guidelines

Audit UI code against Vercel's Web Interface Guidelines — design, accessibility, and UX rules, reported as file:line findings.

source

Skills in a world of slash commands

Skills are instruction sets the agent loads on its own when a task calls for them. Slash commands run only when you type them. Use a skill for background know-how. Use a command when you want control.

01

One command to install

installs to Cursor, Claude Code, Codex, and 60+ more agents via the skills.sh ecosystem.

02

Curated, not crowded

Picked from official sources like Vercel, Anthropic, and shadcn, plus well-tested community skills. Each card links to the source, so you can read it before you install it.

03

Procedural knowledge

Skills teach agents specialized work: React patterns, UI design, testing, debugging, code review, security, and localization. The model loads one when it decides the skill applies.

Questions, answered

What is an agent skill?

A folder with a SKILL.md file and sometimes scripts or reference docs. The agent reads each skill's name and description up front, then loads the full instructions only when a task matches. You never type a command for it.

What does npx skills add do?

It downloads the skill from its repository and copies it into the folder your agent reads skills from. --skill picks one skill from a repo that has several, -a picks the agent (the install for bar adds it for you), and -g installs it for your user instead of the current project.

How do I list, update, or remove skills?

npx skills list shows what's installed, npx skills update pulls the latest versions, and npx skills remove <name> uninstalls one. Add -g to work with user-level skills.

Are skills safe to install?

A skill is instructions, and sometimes scripts, that run with your agent's permissions. Read the source before installing: every card here links to it. Watch for skills that run shell commands to gather context, and keep your agent's command approvals turned on.

Should I use a skill or a slash command?

Use a skill when you want the agent to apply knowledge automatically, every time it is relevant. Use a slash command when you want to decide exactly when a workflow runs. Many pair well, like the systematic-debugging skill with the /debug command.

Suggest a skill.

Know a skill frontend developers should see? Send it over on X. Bonus points for a link to the source and a note on when it helped.

Copied to clipboard!