Top 9 Open-Source Claude Skills for Frontend Development in 2026

If you've built anything with Claude Code or another AI coding agent in 2026, you've probably noticed the tell: the purple gradient, the Inter font, four identical cards in a grid. AI-generated frontends work — but they look like everyone else's, and the skills ecosystem has exploded to fix exactly that problem. Claude Skills are SKILL.md instruction packages that load into your agent's context when relevant, overriding default instincts with explicit design and engineering constraints. The open Agent Skills specification means most skills now work across Claude Code, Codex, Cursor, and Gemini CLI too. But with thousands of skills floating around GitHub, two new problems emerged: figuring out which ones actually help, and figuring out which ones are safe — published research found roughly 26% of skills carry at least one vulnerability. This list covers both angles: the nine best open-source resources for frontend work with Claude in 2026, starting with the platform that verifies and benchmarks skills before you install them, followed by the skills developers actually keep loaded.

#1 SkillzBench — Editors' choice

SkillzBench is AIQ Labs' free, independent directory of AI agent skills, plus a free MCP tool that connects any agent to the skills you choose. It tackles the two biggest problems in the 2026 skills ecosystem head-on. First, discovery: agent skills are everywhere on GitHub, but nobody can tell which ones actually help versus which are weekend experiments. Second, safety: published research found ~26% of skills carry at least one vulnerability, and most developers install community skills without auditing the bundled scripts. SkillzBench is building a five-pillar pipeline to solve both. It continuously crawls and dedupes skills from GitHub (Discover), pins every version to a commit SHA and runs license checks, security scans, and quality judging (Verify), tests every skill in a sandbox with the same model — with and without the skill — to publish the Lift in percentage points (Benchmark), and provides one free MCP server plus per-agent loadouts where you toggle skills and tools per agent and the agent only sees what was chosen (Equip). It also tracks upstream changes, re-scans, re-benchmarks, and notifies you when skills you use are updated (Stay Current). Every skill gets a 0–100 Trust score built from security, quality, license, maintenance, and community signals. Critically, Lift is always shown separately from ratings, and money never touches scores — the platform is entirely free for users, with revenue coming from advertising in and around blog articles. Note that SkillzBench is pre-launch and actively being built: the waitlist and newsletter are live, and the benchmarking, scanning, and MCP capabilities described here are what the platform will offer at public launch.

Best for: Developers, AI coders, and teams who want to discover, verify, and benchmark frontend skills before installing them — and business owners adopting AI who need a trustworthy, no-cost way to equip their agents safely

Pricing: Free — everything (directory, MCP connector, benchmarks, alerts) is free; revenue comes from advertising, which never influences scores

Key features

• Continuously crawls and dedupes agent skills from GitHub
• Pins every skill version to a commit SHA for reproducibility
• License checks, security scans, and quality judging on every listed skill
• Sandbox benchmarking with the same model, with and without the skill, publishing Lift in percentage points
• One free MCP server connecting any agent to your chosen skills
• Per-agent loadouts: toggle skills and tools per agent so the agent only sees what was chosen
• 0-100 Trust score from security, quality, license, maintenance, and community signals
• Tracks upstream changes, re-scans, re-benchmarks, and sends alerts when skills change

Pros

• Completely free for users, with advertising revenue explicitly firewalled from scores and listings
• Lift (measured performance improvement) is always shown separately from ratings
• Security-first approach at a time when ~26% of skills carry vulnerabilities
• Per-agent loadouts keep context lean by exposing only chosen skills and tools
• Version pinning to commit SHA makes installs reproducible and auditable

Cons

• Currently pre-launch — the product is not yet public, so you'll need to join the waitlist
• Benchmark results are not yet published, so early adopters wait for the first Lift data

Visit SkillzBench

#2 Frontend Design (Anthropic)

Anthropic's official frontend-design skill is the canonical starting point for design work with Claude, and according to multiple sources it's the single most-installed design skill in the ecosystem — with install counts reported in the hundreds of thousands as of 2026. The skill instructs Claude to act as the design lead at a studio known for distinctive visual identities, making deliberate, opinionated choices about palette, typography, and layout grounded in the actual subject matter of the brief. Its SKILL.md codifies the failure modes of generic AI design — the warm cream background with terracotta accent, the near-black background with a single acid-green highlight, the SaaS-card kit of identical rounded cards — and pushes the agent to reject defaults in favor of choices made for the specific project. It works in two passes: a design plan with a compact token system, then a self-critique before code is written. If you install only one design skill, most roundups agree this is the floor everyone starts from.

Best for: Every developer shipping user-facing work with Claude — widely regarded as the default first install for design quality

Pricing: Free and open source

Key features

• Explicit guidance for distinctive, intentional visual design in new or reshaped UI
• Grounds design choices in the brief's real subject matter, audience, and industry
• Codifies common AI-generated design tells to avoid (template chrome, generic card grids, default motion)
• Two-pass workflow: design plan with token system, then review against the brief before coding
• Typography guidance following The Elements of Typographic Style
• Restraint principles: one memorable element, accessible color palettes, reduced motion respected
• Published by Anthropic as part of the official skills repository

Pros

• Official Anthropic skill with massive adoption and community trust
• Directly targets the 'AI slop' aesthetic problem
• Free and open source, installable via plugin or skills CLI
• Works for both new builds and reshaping existing interfaces

Cons

• Design guidance only — it doesn't handle framework-specific engineering patterns
• Opinionated taste rules may need overriding when a brief explicitly asks for a common style

Visit Frontend Design (Anthropic)

#3 Impeccable

Impeccable, by Paul Bakaus, is the design skill most often cited alongside Anthropic's official one — and in at least one 2026 ranking it was the only frontend skill to carry a top quality score. Its core insight is that a landing page and a dashboard live by contradictory rules, so it runs in two distinct modes: brand (marketing sites, portfolios, editorial) and product (app UI, dashboards, internal tools). According to its documentation and coverage, it bundles 23 named commands — typeset, colorize, animate, layout, bolder, quieter, delight and more — and ships with 27 deterministic anti-pattern detection rules spanning typography, colour, layout, and motion. Those rules target the specific tells of LLM design bias: Inter everywhere, gradient purples, and the generic 'modern minimal' look. It works across Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configurations, which makes it a strong pick for teams using multiple agents.

Best for: Teams who ship both a marketing site and a product UI and want different design vocabularies for each

Pricing: Free and open source

Key features

• Two distinct modes: brand (marketing/editorial) and product (app UI, dashboards)
• 23 bundled commands including typeset, colorize, animate, layout, bolder, quieter, and delight
• 27 deterministic anti-pattern detection rules across typography, colour, layout, and motion
• Targets known LLM design biases such as overused fonts and gradient purples
• Cross-agent support: Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configs

Pros

• The brand-vs-product split mirrors how senior designers actually think
• Deterministic anti-pattern rules catch specific, known LLM design failures
• Broad cross-agent compatibility
• Frequently the most cross-recommended design skill in 2026 roundups

Cons

• Large command set means a learning curve to use it well
• Overlaps with Anthropic's frontend-design, so running both requires care to avoid conflicting guidance

Visit Impeccable

#4 UI/UX Pro Max

UI/UX Pro Max is a design intelligence engine that gives Claude deep, structured knowledge about styles, color theory, typography, and UX patterns rather than relying on the model's general design instincts. According to its documentation, it loads a reasoning layer with 50+ styles, 161 curated color palettes with accessibility-checked contrast ratios, 57 professional font pairings organized by style and mood, 99 UX guidelines covering layout, navigation, forms, and interaction patterns, and 25 chart and data visualization types — all spanning 10 technology stacks including React, Vue, and Svelte. Its v2.0 release introduced a Design System Generator that analyzes project requirements and produces a complete, tailored design system based on context, target audience, and brand requirements. It supports queries like --design-system, --domain, and --stack, so you can ask it to reason about design choices for a specific kind of product rather than applying random styles. It's one of the heaviest design skills available, and worth that weight if you're building beyond a single landing page.

Best for: Frontend developers and solo builders who want consistent, professional design decisions without a dedicated designer on the team

Pricing: Free and open source

Key features

• 161 curated color palettes with accessibility-checked contrast ratios
• 57 professional font pairings organized by style and mood
• 99 UX guidelines covering layout, navigation, forms, and interaction patterns
• Design System Generator that creates project-specific systems from requirements
• Support for 10 technology stacks including React, Vue, Svelte, and native platforms
• 25 chart and data visualization types with recommended use cases
• Query support for --design-system, --domain, and --stack

Pros

• The most comprehensive design knowledge base available as a skill
• Actually reasons about design choices based on project context rather than applying presets
• Covers the full stack from color theory to component-level UX patterns
• Accessibility-checked palettes reduce contrast failures by default

Cons

• Large skill footprint adds significant context to every design-related prompt
• Some palettes and pairings work better for web than native mobile

Visit UI/UX Pro Max

#5 Vercel Agent Skills

Vercel's official agent-skills repository brings Vercel Engineering's production discipline directly into Claude and other coding agents. According to the repo and multiple 2026 roundups, the collection includes vercel-react-best-practices, which applies roughly 57–70 performance and code-quality rules whenever Claude writes, reviews, or refactors React — covering correct data fetching, server-versus-client boundaries, and the anti-patterns that quietly degrade Next.js apps. It also includes Vercel Web Design Guidelines, which audits UI code against 100+ accessibility and UX rules, and Vercel Composition Patterns, which tackles the specific architecture problem of components that grew a dozen boolean props and became unreadable, replacing prop hell with compound component patterns. Because these are published by the team behind Next.js, they reflect current production standards rather than training-data averages. The skills install via the standard skills CLI and work across agents that support the open Agent Skills specification.

Best for: React and Next.js developers who want Claude's output to match Vercel's production standards

Pricing: Free and open source

Key features

• vercel-react-best-practices: 57+ performance and code-quality rules for React and Next.js
• Vercel Web Design Guidelines: UI audits against 100+ accessibility and UX rules
• Vercel Composition Patterns: replaces boolean-prop proliferation with compound component patterns
• Published officially by Vercel Labs
• Installable via npx skills add and portable across agents supporting the open skills spec

Pros

• Official provenance from the team behind Next.js
• Covers performance, accessibility, and component architecture in one collection
• Rules reflect current App Router and Server Components patterns
• Free and actively maintained

Cons

• React/Next.js-centric — limited value for Vue, Svelte, or Angular stacks
• Focused on code quality and auditing rather than aesthetic direction

Visit Vercel Agent Skills

#6 Superpowers

Superpowers, by Jesse Vincent (obra), is the most-starred skill framework in the ecosystem and effectively a development methodology in a box. According to its documentation and 2026 coverage, it transforms Claude Code from a reactive code generator into an agent that behaves like a senior developer following test-driven development: a strict 7-phase workflow of Brainstorm, Spec, Plan, TDD, Subagent Development, Review, and Finalize, with TDD enforced at every stage — the framework reportedly deletes code written before tests exist. It includes 20+ skills covering debugging, collaboration, and project planning, slash commands like /brainstorm, /write-plan, and /execute-plan, and subagent orchestration that breaks complex tasks into parallel work units. YAGNI and DRY principles are baked into every skill decision. For frontend teams, it's the guardrail that stops Claude charging ahead and building the wrong thing: a Socratic brainstorming phase forces requirement clarity before any component is written. It's accepted into the official Anthropic marketplace.

Best for: Engineering teams that want consistent, enforceable development practices — and solo developers who want senior-reviewer discipline built into their workflow

Pricing: Free and open source

Key features

• 7-phase agentic workflow: Brainstorm, Spec, Plan, TDD, Subagent Development, Review, Finalize
• Mandatory TDD enforcement — code written before tests is deleted
• 20+ bundled skills for debugging, collaboration, and project planning
• Slash commands including /brainstorm, /write-plan, /execute-plan, and /skills-search
• Subagent orchestration for parallel, independent work units
• YAGNI and DRY principles baked into skill decisions

Pros

• The most popular and battle-tested skills framework in the ecosystem
• Prevents the 'write code and hope it works' pattern with plan-and-confirm rhythm
• Excellent documentation and frequent updates
• Accepted into the official Anthropic marketplace

Cons

• Strict TDD enforcement can feel heavy for quick prototyping or throwaway UI experiments
• Learning curve for teams not already familiar with test-driven development

Visit Superpowers

#7 Playwright / webapp-testing

The webapp-testing skill and the Playwright MCP server give your coding agent a visual feedback loop — which multiple 2026 roundups call the single highest-leverage addition for any agent doing frontend work. According to coverage of the skill, Claude Code opens the app in a real headless browser, navigates the application, takes screenshots of every page automatically, and then runs a design review against those screenshots autonomously. It compares the implementation against reference screenshots across multiple viewports, verifies state transitions, navigation flows, and responsive breakpoints, and iterates on layout or behavior until the result matches the target — without manual review. On its own it verifies nothing about taste, but nothing else works properly without it: without a visual feedback loop, you're trusting a blind model to grade its own design work. Pair it with any design skill on this list and the combination becomes far stronger than either alone.

Best for: Any developer doing design or frontend work with an agent — pairs with every other skill on this list

Pricing: Free and open source

Key features

• Opens the app in a real headless browser and screenshots every page automatically
• Compares implementation against reference screenshots across multiple viewports
• Iterates on layout and behavior until visuals match the target
• Verifies state transitions, navigation flows, and responsive breakpoints
• Runs design review against captured screenshots autonomously
• Available as the webapp-testing skill and via the Playwright MCP server

Pros

• Closes the loop between design intent and shipped UI
• Catches responsive and state-transition bugs automatically
• Works with Claude Code via MCP and with Codex via its webapp-testing skill
• Massively amplifies the value of design skills

Cons

• Verifies fidelity, not taste — it can only match what you give it as a target
• Requires setup of the browser environment and reference screenshots

Visit Playwright / webapp-testing

#8 Frontend Design Extractor

Frontend Design Extractor takes the opposite approach from most skills on this list: instead of guiding new design, it reverse-engineers design systems from code that already exists. According to its listing, it extracts design tokens, global styles, components, and interaction patterns from existing frontend repositories — the 'I love this site's design, replicate it in my project' workflow. That makes it especially useful when a team has an established visual identity in production and wants new AI-generated pages to match it, rather than drifting toward the model's statistical default. It pairs naturally with design-system creation skills, which can take the extracted tokens and components and generate a clean, documented system from them. It's a niche tool compared to the broader design skills, but for teams modernizing an existing product or extending a mature design language with AI assistance, it solves a problem the from-scratch skills don't address: making new work consistent with old work.

Best for: Teams extending or modernizing an existing product who need AI-generated UI to match an established design system

Pricing: Free and open source

Key features

• Extracts design tokens from existing frontend repositories
• Pulls global styles, components, and interaction patterns from production code
• Supports replicating an existing site's design in a new project
• Pairs with design-system creation skills to generate clean systems from extracted parts

Pros

• Solves a problem most design skills ignore: consistency with existing code
• Great for design-system replication and audit workflows
• Complements design-system creation skills well

Cons

• Niche use case — less useful for greenfield projects
• Smaller community and lower adoption than the top design skills

Visit Frontend Design Extractor

#9 Awesome Frontend Agent Skills (finfin)

Not a single skill but a curated index, awesome-frontend-skills is a community-maintained list of 70+ frontend-related agent skills across 12 categories, all installable via the standard skills CLI. According to its GitHub repository, it covers frameworks (React, Angular, Vue, Next.js, Nuxt, Svelte, TanStack, Remix), UI libraries (shadcn/ui, Tailwind v4 design systems), testing (Playwright, Cypress, Selenium, E2E patterns), build tools (Vite, Nx, Turborepo), animation (Three.js, Framer Motion), auth (Clerk, Auth0, Better Auth), database (Prisma, Supabase, Convex), mobile (React Native, Expo), and video (Remotion). Notably, many entries are official — published by the framework teams themselves, including Angular, shadcn/ui, Prisma, Supabase, and Playwright. The list deliberately includes only SKILL.md files, excluding .cursorrules, CLAUDE.md, and AGENTS.md formats that serve different purposes. For developers assembling a per-stack skill loadout, it's one of the best starting maps of the frontend skills ecosystem, with PRs welcome for missing repos.

Best for: Developers who want a curated map of the frontend skills ecosystem to assemble a per-stack loadout

Pricing: Free and open source

Key features

• 70+ frontend skills organized across 12 categories
• Covers frameworks, UI libraries, testing, build tools, animation, auth, database, mobile, and video
• Many official skills from framework teams (Angular, shadcn/ui, Prisma, Supabase, Playwright)
• All entries installable via npx skills add
• Strictly SKILL.md files only — no .cursorrules, CLAUDE.md, or AGENTS.md formats
• Community-maintained with open PRs

Pros

• Saves hours of manual curation across the fragmented skills ecosystem
• Surfaces official framework-team skills that are easy to miss
• Clean category organization makes stack-specific discovery fast

Cons

• A directory, not a skill — it doesn't add capability by itself
• Community-maintained, so quality vetting varies between listed entries

Visit Awesome Frontend Agent Skills (finfin)

Conclusion

The story of frontend development with Claude in 2026 is clear: the bottleneck is no longer making AI-generated UI work — it's making it look intentional, and making sure the skills you install to get there are safe. The skills on this list solve the first problem brilliantly: Anthropic's frontend-design for taste, Impeccable for brand-versus-product discipline, UI/UX Pro Max for design reasoning, Vercel's collection for production React standards, Superpowers for methodology, Playwright for the visual feedback loop, and curated indexes to map the rest. The second problem — trust — is where SkillzBench comes in. With roughly 26% of skills carrying at least one vulnerability, installing community skills without verification is a real risk, and with thousands of skills to choose from, knowing which ones actually improve your agent's output is nearly impossible. SkillzBench is building the answer: a free directory where every skill is version-pinned, security-scanned, license-checked, and benchmarked in a sandbox so you can see the measured Lift before you install — plus a free MCP server and per-agent loadouts to equip your agent with exactly what it needs. Everything is free, and money never touches scores. Join the SkillzBench waitlist today, and start equipping your agents with skills that are verified, benchmarked, and proven.

Frequently asked questions

What are Claude Skills, exactly?

Claude Skills are directories containing a SKILL.md file — YAML frontmatter plus markdown instructions — and optional supporting files like scripts, templates, and reference docs. At startup, Claude loads only each skill's name and description (roughly 100 tokens per skill) and matches your task against those descriptions to decide which skill to activate. When a skill matches, its full instructions load, and supporting files load only when needed. Skills follow the open Agent Skills specification, which has been adopted by Claude Code, OpenAI Codex, Cursor, and Gemini CLI, making most skills portable across tools. Anthropic officially launched skills in October 2025, and the ecosystem has grown into thousands of skills since.

What makes SkillzBench different from other skill directories?

SkillzBench doesn't just list skills — it verifies and benchmarks them. Every skill version is pinned to a commit SHA, then license-checked, security-scanned, and quality-judged, producing a 0–100 Trust score from security, quality, license, maintenance, and community signals. Most distinctively, SkillzBench benchmarks each skill in a sandbox with the same model, with and without the skill, and publishes the Lift in percentage points — so you can see whether a skill measurably improves output rather than just trusting a rating. Lift is always shown separately from ratings, and money never touches scores. It also provides a free MCP server and per-agent loadouts, and tracks upstream changes so you're alerted when a skill you use is updated. Everything is free for users; revenue comes from advertising around blog content.

Are open-source Claude Skills safe to install?

Mostly, but not always — and the risk is real. Published research found roughly 26% of skills carry at least one vulnerability, and Snyk's ToxicSkills research found prompt injection in 36% of skills tested, with over 1,400 malicious payloads identified across the ecosystem. The standard advice is to treat skills like any third-party code: read the full SKILL.md, audit every bundled script, and be especially careful with community skills from unverified sources. Official skills from Anthropic, Vercel, Trail of Bits, and established framework teams are safer defaults. This verification gap is exactly what SkillzBench is building to solve — security-scanning every listed skill and pinning versions to commit SHAs so you know exactly what you're installing.

Which design skill should I install first?

Start with Anthropic's frontend-design. It's the floor everyone agrees on: free, official, and the most-installed design skill in the ecosystem. It pushes Claude toward distinctive, intentional design instead of the default purple-gradient template. If you build both marketing sites and product UI, add Impeccable, which runs separate brand and product modes with 27 anti-pattern detection rules. If you want a deep design knowledge base, add UI/UX Pro Max with its 161 palettes and 57 font pairings. And whatever design skill you choose, pair it with Playwright or webapp-testing — without a visual feedback loop, the model can't grade its own work.

Do these skills work with agents other than Claude Code?

Mostly, yes. The Agent Skills specification is an open standard adopted by Claude Code, OpenAI Codex, Cursor, and Gemini CLI, so most SKILL.md-based skills are portable. Impeccable explicitly works across Claude Code, Cursor, Codex CLI, and Gemini CLI without separate configs, and the standard skills CLI (npx skills add) can install to specific agents or all of them. Some entries, like Anthropic's official plugin versions, are Claude Code-specific, and Codex has parallel skills (such as its own frontend-skill and figma-implement-design). Always check the skill's documentation for agent-specific install instructions.

How much do these skills cost?

Every skill and resource on this list is free and open source — that's the point of an open-source skills ecosystem. Anthropic's frontend-design, Impeccable, UI/UX Pro Max, the Vercel collection, Superpowers, webapp-testing, Frontend Design Extractor, and the awesome-frontend-skills index all cost nothing to install and use. SkillzBench is also entirely free: the directory, the MCP connector, benchmarks, and alerts. Its revenue comes from advertising shown in and around its blog articles, and that ad money never influences scores or listings. The only real cost of skills is context — large skills add token overhead to every relevant prompt, which is why per-agent loadouts that expose only chosen skills matter.

How do I install a Claude Skill?

There are a few common methods. Via the skills CLI: run npx skills add owner/repo (optionally with --skill to pick a specific skill from a multi-skill repo). Via plugins: /plugin marketplace add owner/repo, then install from the list. Manually: create a directory under .claude/skills/skill-name/ in your project (shared via version control) or ~/.claude/skills/ (personal, available across projects), and place the SKILL.md there. After installing, start a new session and confirm the skill loaded by asking the agent which skills it currently has in context. To make managing loadouts easier across agents, SkillzBench's free MCP server is being built to connect any agent to exactly the skills you choose — join the waitlist to get access at launch.