Skill pack · Free
Performance rules, App Router conventions, accessible UI and a test loop for React work.
Who it’s for: Frontend developers building React or Next.js apps with an AI coding agent.
This pack covers the full loop of shipping a React feature with an agent: writing components that follow current React and Next.js guidance, keeping the interface accessible, and proving it works in a real browser before calling it done.
Install the whole set, or pick the pieces your project is missing. Each skill links to its own repository and license.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Use when building Next.js 14+ applications with App Router, server components, or server actions. Invoke to configure route handlers, implement middleware, set up API routes, add streaming SSR, write generateMetadata for SEO, scaffold loading.tsx/error.tsx boundaries, or deploy to Vercel. Triggers on: Next.js, Next.js 14, App Router, RSC, use server, Server Components, Server Actions, React Server Components, generateMetadata, loading.tsx, Next.js deployment, Vercel, Next.js performance.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.
Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance, or verify visual output with real runtime data. Requires the chrome-devtools MCP server to be configured.
Drives development with tests using the red-green-refactor loop. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.
Run these commands in your agent. Plugin marketplace commands work in Claude Code; the git clone commands copy a skill into Claude Code’s personal skills folder — adjust the path for other agents.
git clone https://github.com/CherryHQ/cherry-studio ~/.claude/skills/vercel-react-best-practices
/plugin marketplace add Jeffallan/claude-skills
git clone https://github.com/ThinkInAIXYZ/deepchat ~/.claude/skills/frontend-design
/plugin marketplace add alirezarezvani/claude-skills
/plugin marketplace add addyosmani/agent-skillsReview each skill’s source before installing. Every skill links to its repository above.
Custom skills
We can tailor these skills to your conventions and tools, or build the missing piece of your workflow as a new skill.