Agent skills
Frontend and design Claude skills and agent skills
What frontend and design skills do
Rules and recipes for UI work: React and framework best practices, design systems, Figma to code. A skill is a folder with a SKILL.md: the agent reads its one-line description up front and loads the instructions only when a task matches, so a frontend and design skill costs almost nothing until you need it. The 15 here come from Anthropic, shadcn, Vercel, Cloudflare, Figma, Svelte, Resend.
- Frontend Design · Anthropic
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one.
- Web Artifacts Builder · Anthropic
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui).
- shadcn/ui · shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces.
All frontend & design skills
15 of 15 skills
- Frontend DesignOfficial · Anthropic
Steers UI work toward deliberate visual direction and typography instead of generic template looks.
★ 184k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add anthropics/skills --skill frontend-design - Web Artifacts BuilderOfficial · Anthropic
Builds multi-component HTML artifacts with React, Tailwind and shadcn/ui, bundled into one file.
★ 184k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add anthropics/skills --skill web-artifacts-builder - shadcn/uiOfficial · shadcn
Adds, searches, styles and debugs shadcn/ui components with project-aware docs.
★ 126k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add shadcn-ui/ui --skill shadcn - React Composition PatternsOfficial · Vercel
Refactors prop-heavy React components into compound components and other reusable patterns.
★ 33k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns - React Best PracticesOfficial · Vercel
Vercel's performance rules for React and Next.js code: rendering, data fetching, bundle size.
★ 33k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices - React View TransitionsOfficial · Vercel
Adds page and element animations using React's View Transition API and CSS pseudo-elements.
★ 33k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions - Web Design GuidelinesOfficial · Vercel
Audits UI code against a checklist of interface, accessibility and UX guidelines.
★ 33k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add vercel-labs/agent-skills --skill web-design-guidelines - Web Performance AuditOfficial · Cloudflare
Diagnoses slow pages and improves Core Web Vitals and Lighthouse performance scores.
★ 3.2k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add cloudflare/skills --skill web-perf - Figma Code ConnectOfficial · Figma
Creates Code Connect files that map Figma components to their real code snippets.
★ 2.1k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add figma/mcp-server-guide --skill figma-code-connect - Figma Design to CodeOfficial · Figma
Turns a Figma frame into code using the Figma MCP server's design context.
★ 2.1k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add figma/mcp-server-guide --skill figma-design-to-code - Figma Generate DesignOfficial · Figma
Recreates an app page or layout from code as a design inside Figma.
★ 2.1k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add figma/mcp-server-guide --skill figma-generate-design - Figma UseOfficial · Figma
Required primer for the Figma MCP write tool so edits to Figma files work reliably.
★ 2.1k (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add figma/mcp-server-guide --skill figma-use - Svelte Code WriterOfficial · Svelte
CLI tools for looking up Svelte 5 docs and analyzing components while writing Svelte code.
★ 334 (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add sveltejs/ai-tools --skill svelte-code-writer - Svelte Best PracticesOfficial · Svelte
Guidance for modern Svelte code: reactivity, events, styling and library integration.
★ 334 (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add sveltejs/ai-tools --skill svelte-core-bestpractices - React EmailOfficial · Resend
Builds HTML email templates from React components and renders them for sending.
★ 205 (repo)
Install (any agent)Claude Code, Codex, Copilot, Cursor, Gemini CLI steps →npx skills add resend/resend-skills --skill react-email
FAQ
What are frontend and design agent skills?+
Rules and recipes for UI work: React and framework best practices, design systems, Figma to code. Each is a SKILL.md folder that Claude Code, Codex, Cursor, Copilot and other agents load when a task matches its description. This page lists 15, from Anthropic, shadcn, Vercel, Cloudflare, Figma, Svelte, Resend.
What are the best frontend and design agent skills?+
Start with the ones from the publisher of the tool you use: Frontend Design (Anthropic), Web Artifacts Builder (Anthropic), shadcn/ui (shadcn), React Composition Patterns (Vercel), React Best Practices (Vercel), React View Transitions (Vercel).
How do I install a frontend and design skill?+
Run npx skills add owner/repo --skill name and pick your agent, or copy the skill folder into ~/.claude/skills (Claude Code), .agents/skills (Codex) or .github/skills (Copilot). Each skill page has the exact command for Frontend Design and the rest.
More skills: Documents · Testing & QA · Backend & databases · Cloud & DevOps · Security & auth · AI & ML · Workflow & planning · Writing & notes · Media · Data & analytics · Mobile · Payments · Integrations · MCP servers