Category: Development

React Composition Patterns

Vercel's React design skill for taming boolean-prop sprawl with compound components, context, and explicit variants.

Works with

Rules across component architecture, state, implementation patterns, and React 19 APIs
10+ named patterns including compound components, context providers, and lifted state
React 19 guidance: drop forwardRef, use use() instead of useContext()

Use it when components bloat with option props, or when building a reusable component library.

Run the command below in your terminal. Pick the agents you use (Claude Code, Codex, Cursor, Gemini CLI, Copilot, and more) and it installs into the right folder.

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns

To install manually, download the vercel-composition-patterns skill folder from the GitHub repository and copy it into your agent's skills folder, such as ~/.claude/skills/ or .cursor/skills/.
Ask your agent for a related task and the skill is used automatically.

Development
Karpathy Coding Guidelines
Reduces common LLM coding mistakes Andrej Karpathy pointed out by enforcing explicit assumptions, simplicity, and surgical changes.
Development
Security Audit (Cloudflare)
Cloudflare's skill for finding vulnerabilities that cross real trust boundaries, with evidence, safe repro, priority, and minimal fixes.
Development
API and Interface Design
From Addy Osmani of Google Chrome: design stable APIs and module boundaries that are hard to misuse.
Development
Browser Testing with DevTools
Gives agents eyes into a real browser via Chrome DevTools MCP to inspect the DOM, console, network, and performance.