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.
325 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)…
Pack301k1.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…
Pack108k1.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…
Pack301k1.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…
Pack301k1.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…
Pack148k932kScore 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…
Pack148k932kScore 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…
Pack192k3.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…
Pack148k932kScore 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…
Pack192k3.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 325 frontend skills.
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…
antfu
Skills
antfuvite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.
antfu
Skills
antfuvue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using…
greensock
Gsap Skills
greensockgsap-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…
greensock
Gsap Skills
greensockgsap-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…
greensock
Gsap Skills
greensockgsap-utils
Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap…
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…
greensock
Gsap Skills
greensockgsap-performance
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about…
greensock
Gsap Skills
greensockgsap-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…
OpenSenseNovasn-ppt-standard
仅在 `sn-ppt-entry` 与 `sn-ppt-story` 已准备绝对 `DECK_DIR` 和 `outline.md` 后使用；生成每页独立 HTML（1600×900）、渲染 PNG、逐页讲稿、`present.html`，并按 `static_postprocess` 选择生成由 Standard 自有 exporter 转换的…
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…
jezweb
Claude Skills
jezwebproject-health
All-in-one project configuration and health management. Sets up new projects (settings.local.json, CLAUDE.md, .gitignore), audits existing projects (permissions, context quality, MCP…
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…
jezweb
Claude Skills
jezwebresponsiveness-check
Test website responsiveness across viewport widths using browser automation. Resizes a single session through breakpoints, screenshots each width, and detects layout transitions (column…
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
jezweb
Claude Skills
jezwebteam-update
Post project updates to team chat, gather feedback, triage responses, and plan next steps. Adapts to available tools (chat, git, issues, tasks). First run discovers tools and saves a…
jezweb
Claude Skills
jezwebux-audit
Walk through a live web app AS a real user to find usability + behavioural bugs that static reviews miss. REQUIRES proof of interaction (typing, clicking, sending, observing) before any…
jezweb
Claude Skills
jezwebux-compare
Compare UX patterns across multiple reference apps using pattern libraries produced by ux-extract. Reads 2+ pattern-library.md files, walks them category by category, identifies where apps…
jezweb
Claude Skills
jezwebux-extract
Exhaustively extract UX patterns from a reference web app. Walks every screen, captures screenshots of every state, records interaction patterns, copy verbatim, keyboard shortcuts…
jezweb
Claude Skills
jezwebvite-flare-starter
Scaffold a full-stack Cloudflare app from the vite-flare-starter template — React 19 + Hono + D1+Drizzle + better-auth + Tailwind v4+shadcn/ui + TanStack Query + R2 + Workers AI. Run…
vuejs-ai
Skills
vuejs-aivue-options-api-best-practices
Vue 3 Options API style (data(), methods, this context). Each reference shows Options API solution only.
vuejs-ai
Skills
vuejs-aivue-pinia-best-practices
Pinia stores, state management patterns, store setup, and reactivity with stores.
vuejs-ai
Skills
vuejs-aivue-router-best-practices
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
vuejs-ai
Skills
vuejs-aicreate-adaptable-composable
Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with…
jezweb
Claude Skills
jezwebshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI…
vuejs-ai
Skills
vuejs-aivue-jsx-best-practices
JSX syntax in Vue (e.g., class vs className, JSX plugin config).
jezweb
Claude Skills
jezwebapp-docs
Generate complete user documentation for a web app with screenshots. Browses the app via browser automation, screenshots every screen, and produces a structured user guide with step-by-step…
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…
jezweb
Claude Skills
jezwebdeep-research
Deep research and discovery before building something new. Explores local projects for reusable code, researches competitors, reads forums and reviews, analyses plugin ecosystems…
jezweb
Claude Skills
jezwebdesign-loop
Autonomous multi-page site builder using a baton-passing loop. Each iteration reads a task from .design/next-prompt.md, generates a page in HTML/Tailwind, integrates it into the site…
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