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.
daymadedata-visualization-discipline
数据可视化的判断层 SSOT——画任何图表、dashboard、看板之前先加载它，不是画完之后。管"该不该这么画"：这张图想让读者得出什么结论、用均值还是中位数、能不能聚合、堆叠还是折线、能不能上双轴、配色与颜色数量、同一实体跨图是否同色同位、表格该留几列。介质无关：HTML 报告页、React/Vue dashboard、PPT 原生图…
op7418guizang-social-card-skill
Generate Guizang-style social card image sets, Live Photo motion cards, material-first Live Photo puzzle layouts, triple Live Photo collages, long-video-to-Live-Photo treatments, and WeChat…
Addy Osmani
Web Quality Skills
Addy Osmaniaccessibility
Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard…
anbeimesrt-whiteboard-animation
将 SRT 字幕做成暖米黄纸张底的白板手绘动画：读字幕→输出配图策略→确认后生成统一风格线稿→按叙事语义标注分区→预览台调整→渲染 MP4。编排沿用分区遮罩揭示（annotation.json / sequence / startMs / protectedRegions），但每个区域内的落墨换成 stream 的连续笔迹（骨架/网格 ink→color）。当用户提供 SRT…
vuejs-ai
Skills
vuejs-aivue-testing-best-practices
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
jezweb
Claude Skills
jezwebai-image-generator
Generate AI images using Gemini or GPT APIs directly. Covers model selection (Gemini for scenes; GPT Image 2 for text rendering, batch variations, multi-reference compositing; GPT Image 1.5…
jezweb
Claude Skills
jezwebcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks…
jezweb
Claude Skills
jezwebicon-set-generator
Generate cohesive, project-specific SVG icon sets for websites and applications. Use this skill whenever the user needs custom icons, an icon set for a website or app, icons for a client…
Callstackreact-native-best-practices
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread…
Callstackreact-native-brownfield-migration
Implements an accepted incremental brownfield migration from native iOS or Android to React Native or Expo using @callstack/react-native-brownfield. Use after the brownfield path has been…
Callstackreact-native-testing
Write tests using React Native Testing Library (RNTL) v13 and v14 (`@testing-library/react-native`). Use when writing, reviewing, or fixing React Native component tests. Covers: render…
rampstackcoaccessibility-audit
Run a comprehensive WCAG accessibility audit covering perceivable, operable, understandable, and robust principles. Use this skill whenever the user wants to audit accessibility, review…
arjun988animation
Game-ready animation in Blender including walk/run/idle cycles, combat, mechanical animation, camera animation, constraints, Graph Editor, and NLA workflows via MCP.
plugin87design-code
Generate production-ready, accessible, token-driven component code for ANY framework (React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native…
plugin87design-component
Design a UI component spec to the house quality bar (anatomy, variants, sizes, the 8 states, token mapping, and accessibility). Use when the user wants to design or document a component…
dzhngisometric-motion
Build animations and interactive elements (explainers, figures, hero visuals, step-through walkthroughs) in the crafted isometric "Anatomy" style, with many small precise solid parts…
tech-leads-clubreact-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…
rmyndharis
Antigravity Skills
rmyndharisangular-migration
Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework…
Appllamaappllama-app-design-skill
Build native-feeling, benchmark-quality mobile app screens (Expo / React Native). Use when designing or implementing any mobile UI — screens, flows, onboarding, paywalls, tab bars, sheets…
Microsoft
Power Platform Skills
Microsoftcreate-code-app
Creates Power Apps code apps using React and Vite. Use when building code apps, scaffolding projects, or deploying to Power Platform.
Owl-Listener
Designer Skills
Owl-Listenerdesign-debt-audit
Inventory and prioritise accumulated design inconsistencies across a product. Use when drift has built up over time. For token coverage specifically use `design-token-audit`…
vibe-motionpixel2motion
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global…
waynesutton
Builder Skills
waynesuttonsec-check
Security check and audit for Convex apps and any app with a React, Vite, Next.js, or Expo frontend, built from real incidents across shipped repos. Runs a secret scanner plus a per function…
bitjaruss-learn
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts…
bitjarustyleseed
Build, improve, or inspect UI with StyleSeed. Preserves project design choices and routes setup, layout, tokens, review, rendered verification, and updates through one entry point.
anbeimearchify
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion…
juliobszawwwards
Build award-caliber websites from a one-line prompt such as "make me a portfolio, my name is Ana". Uses the bar of sites that win Awwwards Site of the Day as a quality standard. Covers…
vibe-motioncolorize
Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦). The frame starts monochrome and spun, color sweeps in from the left under a…
dpearson2699
Swift IOS Skills
dpearson2699core-motion
Access Core Motion accelerometer, gyroscope, magnetometer, device-motion, pedometer, activity-recognition, altitude, headphone motion, batched high-frequency workout motion, and…
zarazhangrui
Frontend Slides
zarazhangruifrontend-slides
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create…
mohitagw15856accessibility-audit
Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for…
plugin87apply-aesthetic
Apply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144 named design systems (apple, linear-app, stripe, vercel, notion…
EL4CTEOblender-animation
Animation in Blender 5.2 - slotted/layered actions and the channelbag API, Python keyframing, F-curves, game loops with pop/hitch checks, NLA clips, pose library, mocap/BVH/Mixamo…
isjiamugzh-design
微信公众号文章排版引擎，将 Markdown 转换为可直接粘贴到公众号编辑器的 HTML。主题风格从 references/theme-index.md 注册的自定义主题库中选取，自动章节编号、关键词下划线标记、引言卡片、目录导航、代码块、图片/GIF、作者签名。支持 Markdown / Word(.docx) / PDF / 纯文本输入（非 Markdown…
Agentchengfeng
Chengfeng Videocut Skills
Agentchengfengian-xiaohei-svg-motion
Create Ian Xiaohei-style HTML/SVG motion illustrations for Chinese articles, scripts, storyboard scenes, workflow explanations, concept metaphors, and short video visual aids. Use when the…
Sushegaadsection-508
Expert Section 508 compliance advisor for US federal ICT accessibility. Use this skill whenever a user asks about Section 508, WCAG 2.0/2.1 AA for federal systems, VPAT or Accessibility…
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