Agent skills
Frontend and design agent skills
Frontend & design
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 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