Best Claude skills for frontend development
Frontend skills encode the details that separate a demo from a product: accessible markup, responsive layout, motion that respects reduced-motion settings, and framework best practices for React, Next.js, Vue or Svelte. Official skills from Vercel and Anthropic sit next to community favourites here.
117 frontend skills · ranked live · November 2026
The top 10. Ranked by the Alyn Score.
- 1#1
Leonxlnx
Design Taste Frontend
tasteskill 2.5.1, the anti-slop frontend skill. Builds professional company websites at the level of figma.com and x.ai: plain copy in a voice of its own, one system, one section per…
113k5.6MScore 92 - 2#2
affaan-m
Angular Developer
Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource)…
301k1.7MScore 91 - 3#3
Paul Bakaus
Impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages, dashboards…
108k1.9MScore 90 - 4#4
Accessibility
Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels, accessibility traits and hints, focus management, contrast…
301k1.7MScore 89 - 5#5
Backend Patterns
Backend architecture patterns, API design, database optimization, and server-side best practices for Node.js, Express, and Next.js API routes. Use when building or reviewing Node.js…
301k1.7MScore 89 - 6#6
nextlevelbuilder
Design
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP…
148k932kScore 89 - 7#7
Design System
Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing/typography scales, component specs, strategic…
148k932kScore 89 - 8#8
Anthropic
Skills
Anthropic
Frontend Design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as…
192k3.8MScore 89 - 9#9
UI Styling
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building…
148k932kScore 89 - 10#10
Anthropic
Skills
Web Artifacts Builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring…
192k3.8MScore 87
What makes a great frontend skill.
Framework-specific rules (React, Next.js, Tailwind) instead of generic advice.
Accessibility and performance checks the agent runs before it says done.
Examples of good output, so the agent copies patterns rather than guessing.
All 117 frontend skills.
nextlevelbuilderbrand
Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
nextlevelbuilderslides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Vercel
Agent Skills
Vercelvercel-cli-with-tokens
Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up…
Vercel
Agent Skills
Vercelvercel-react-best-practices
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…
Vercel
Agent Skills
Vercelvercel-react-native-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with…
OpenMontagegsap-core
Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a…
OpenMontagegsap-frameworks
Official GSAP skill for Vue, Svelte, and other non-React frameworks — lifecycle, scoping selectors, cleanup on unmount. Use when the user wants animation in Vue, Nuxt, Svelte, SvelteKit, or…
OpenMontagegsap-react
Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on…
OpenMontagegsap-scrolltrigger
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the…
Vercel
Agent Skills
Vercelvercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks…
OpenMontagegsap-timeline
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation…
Vercel
Agent Skills
Vercelweb-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Vercel
Agent Skills
Vercelwriting-guidelines
Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the…
OpenMontageframer-motion
Use when implementing Disney's 12 animation principles with Framer Motion in React applications
OpenMontagecharacter-animation-qa
Review local character animation with schema checks, Playwright browser previews, frame sampling, and FFmpeg/ffprobe final output checks.
OpenMontagecanvas-procedural-animation
Use p5.js/canvas for local procedural character effects: particles, weather, squash/stretch, walk cycles, and environmental motion.
Expo
Skills
Expoexpo-animation
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring…
Expo
Skills
Expoexpo-dom
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally. For the end-to-end migration of a whole web app, use the…
Google Labs
Stitch Skills
Google Labsstitch::react-native
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
Google Labs
Stitch Skills
Google Labsdesign-md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Google Labs
Stitch Skills
Google Labsenhance-prompt
Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation…
Google Labs
Stitch Skills
Google Labsstitch-loop
Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
Google Labs
Stitch Skills
Google Labsstitch::extract-design-md
Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files…
Google Labs
Stitch Skills
Google Labsstitch::extract-static-html
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a…
Google Labs
Stitch Skills
Google Labsstitch::generate-design
Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement…
Google Labs
Stitch Skills
Google Labsstitch::manage-design-system
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Google Labs
Stitch Skills
Google Labstaste-design
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric…
Google Labs
Stitch Skills
Google Labsstitch::upload-to-stitch
Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to…
Google Labs
Stitch Skills
Google Labsreact-vite-dashboard
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
Google Labs
Stitch Skills
Google Labsstitch::code-to-design
Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the…
Callstackreact-native-tv-best-practices
Reviews React Native TV apps for focus/D-pad navigation, 10-foot UI layout, TV playback/DRM integration, low-memory TV performance, and TV accessibility. Use when building, debugging, or…
Google Labs
Stitch Skills
Google Labssite-md
Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop
Callstackassess-react-native-migration
Assesses whether and how an existing mobile product should migrate to React Native. Use when auditing one or more product repositories for migration readiness, including products whose iOS…
Callstackreact-navigation
Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and…
Callstackupgrading-react-native
Upgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving…
Callstackcreate-react-native-library
Scaffolds React Native libraries with create-react-native-library for standalone libraries or local native modules and views. Use when creating or working on React Native libraries or…
Frontend skills, explained.
Also searched as: claude code frontend skills, react skills, tailwind skill, frontend design skill.
What are the best Claude skills for frontend development?
Right now the top-ranked frontend skills on Alyn are Design Taste Frontend (Leonxlnx), Angular Developer (affaan-m), Impeccable (Paul Bakaus). Rankings combine GitHub stars, installs, freshness and depth, and update live.
Which skill makes Claude Code better at frontend?
Anthropic's frontend-design skill, Vercel's React best practices and web design guidelines, and Taste Skill are the most popular choices. Combine one design skill with one framework skill.
Do frontend skills work in Cursor?
Yes. Cursor reads SKILL.md files from .agents/skills in your project. Install with npx skills add and pick Cursor as the target.
How do I install a frontend skill?
Run npx skills add owner/repo in your project, or copy the folder with SKILL.md into ~/.claude/skills. Every skill on this page has a ready-to-copy command.
More in Build
Frontend skills for your agent