The Best-Regarded Frontend-Design "Skills" for AI Coding Agents (Claude Code & Codex), June 2026

TL;DR

For a Next.js + Node indie site, the highest-confidence stack is: install Anthropic's official frontend-design skill (the universally-agreed baseline), layer impeccable (Paul Bakaus) on top for stronger, more opinionated craft, add Vercel's web-design-guidelines as an accessibility/UX quality gate, and add a shadcn/ui skill plus GSAP's official skills for stack-specific component and animation accuracy.
The two community darlings by reputation (not just stars) are impeccable and Leonxlnx/taste-skill — both are "anti-AI-slop" design skills that consistently earn genuine praise from developers; impeccable is the more production-/UX-serious of the two, taste-skill the more art-directed.
Treat all third-party skills as untrusted code: Snyk's ToxicSkills audit (published Feb 5, 2026) scanned 3,984 skills from ClawHub and skills.sh and found 36.82% (1,467) had at least one security flaw and 13.4% (534) carried a critical-severity issue — so review each SKILL.md before installing and prefer official/high-reputation sources.

Key Findings

What a "Skill" actually is (and isn't). A Skill is a folder containing a SKILL.md file with YAML frontmatter (name + description) plus optional scripts/references. Anthropic introduced the format in October 2025 and released it as an open standard ("Agent Skills") in December 2025; it is now supported by Claude Code, Claude.ai, the Claude API, OpenAI Codex, Cursor, Gemini CLI, Antigravity, and Windsurf. Skills load progressively (only ~100 tokens of metadata per skill at session start; the full body loads on demand). This is distinct from:

Subagents — self-contained agents with their own context and restricted tools (a subagent can use skills).
Plugins — the installable distribution unit; a plugin can bundle one or more skills, commands, and MCP config.
Slash commands — shortcut invocations; many skills are invokable as /skill-name.
MCP servers — define connections to external systems/tools; skills define behavior/workflow. They are complementary layers, not competitors.

The core problem these skills solve: "distributional convergence" — unguided LLMs reproduce the statistical center of their training data, yielding the recognizable "AI slop" look (Inter/Roboto fonts, purple-on-white gradients, four-card grids, minimal animation). Design skills inject explicit constraints that override these defaults.

The most-recommended frontend-design skills, ranked.

Anthropic frontend-design (official) — the agreed baseline. Lives in anthropics/skills (~149k stars, observed June 26 2026) at skills/frontend-design/, and is mirrored as a Claude Code plugin in anthropics/claude-code. It instructs the agent to commit to a bold aesthetic direction before writing code, bans overused fonts (Inter, Roboto, Arial, Space Grotesk), and works across Claude Code, Codex, Cursor, and Gemini CLI. It is a lightweight ~400-token / ~4.5KB markdown file, and reached 277,000+ installs as of March 2026 (per Composio and paddo.dev). Universally cited as "skill number one" for anyone doing UI work.
impeccable by Paul Bakaus — pbakaus/impeccable, ~28k stars / 1.5k forks (June 26 2026). Bakaus created jQuery UI (2007), built a browser game engine acquired by Zynga, led Chrome DevTools as product lead and launched AMP/Web Stories at Google, and is now founder/CEO of a16z-backed Renaissance Geek — so this skill carries unusual designer-engineer pedigree. It explicitly extends Anthropic's frontend-design skill with 7 domain-specific reference files (typography, OKLCH color/contrast, spatial design, motion, interaction, responsive, UX writing), ~23 commands (audit, polish, critique, distill, animate, bolder, quieter, etc.), and 44 deterministic detector rules plus a live-browser iteration loop. Distinguishing strength: it separates brand mode (marketing/landing) from product mode (app UI/dashboards) — the way senior designers actually think. Strong, genuine community word-of-mouth.
Leonxlnx/taste-skill — ~30.8k stars / 2.3k forks (June 26 2026), created Feb 19 2026, MIT. An "anti-slop" skill with tunable dials (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) and multiple variants (taste, redesign, soft, minimalist, brutalist, gpt-taste for Codex, output-skill to stop truncation, image-to-code). Headlines VoltAgent's awesome-agent-skills list. More art-directed/aggressive than impeccable; framework-agnostic (works with Next.js). Best when visual personality matters more than strict UX rigor.
Vercel web-design-guidelines (vercel-labs/agent-skills, ~27.6k stars / 2.5k forks, June 26 2026) — not a generator but a quality gate. Audits UI code against Vercel's Web Interface Guidelines (100 rules across 17 categories: accessibility/WCAG, performance, UX), fetching the latest rules at review time so they stay current. Pairs perfectly with a generation skill. Vercel's companion react-best-practices skill covers React/Next.js performance.
Stack-specific helpers for Next.js + Node:
- shadcn/ui skills — several exist. capraidev/shadcn-claude-skill teaches idiomatic Next.js App Router + shadcn/ui + Radix + Tailwind (CLI, components.json, theming with oklch + next-themes, forms with react-hook-form+Zod, TanStack tables, charts, blocks, a11y). masonjames/Shadcnblocks-Skill gives the agent knowledge of 2,500+ shadcn blocks/components incl. e-commerce flows (product cards, carts, checkout) — directly relevant to an indie/DTC store.
- GSAP official skills (greensock/gsap-skills) — GreenSock's own SKILL.md set covering core API, timelines, ScrollTrigger, plugins, performance, and React/Next.js SSR-safe patterns (gsap-react pushes useGSAP, proper scoping/cleanup). GSAP is now 100% free including all plugins. Reduces hallucinated animation code.
Workflow framework (adjacent but highly relevant): obra/superpowers by Jesse Vincent (Prime Radiant) — the largest community skill library, with 224,691 GitHub stars and ~20,000 forks as of June 2026 (up from 57.5k in February), accepted into Anthropic's official Claude plugin marketplace on Jan 15, 2026. Not a design skill per se; it's a brainstorm→plan→TDD→subagent-review methodology. Hacker News reception is ~60/40 positive; the main critique is "over-engineering for small tasks." Useful for disciplined feature builds on your site, less so for quick styling.

OpenAI Codex parallel. Codex has its own official frontend-skill in openai/skills (shipped alongside GPT-5.4, which OpenAI trained with a focus on UI/frontend). It enforces cardless layouts, full-bleed heroes, brand-first hierarchy, restrained motion, ≤2 typefaces and one accent. The same third-party skills (impeccable, taste-skill) install on Codex too. OpenAI strongly recommends pairing with the Playwright skill for a visual verification loop.

Details

Why the visual-verification loop matters most. Multiple expert reviewers (Composio, OpenAI's own GPT-5.4 frontend guide) converge on one point: the single highest-leverage addition for agentic design work is a Playwright-based screenshot/iterate loop (via the webapp-testing skill or Playwright MCP). The agent opens a headless browser, screenshots each page across breakpoints, runs a design-review skill against the screenshots, and fixes issues autonomously. Without it, you are trusting a "blind" model.

Honest criticisms to weigh.

The font-banning approach in frontend-design/impeccable/taste-skill is, as Composio's design-skills roundup put it, "a band-aid for a training-data problem, not a design philosophy. seniors know taste comes from understanding constraints, not from a blocklist. still the right starting point because it's the floor everyone agrees on."
Bold-aesthetic skills can fight you on internal tools/dashboards where consistency beats creativity; pair with a guidelines skill or skip.
impeccable's 7 reference files add meaningful token overhead for quick fixes.
taste-skill lacks automated tests/visual regression, so you can't easily verify the agent obeyed its rules.

Security is a real, current concern. The Agent Skills ecosystem is under active supply-chain attack. Snyk's ToxicSkills audit (Feb 5, 2026) scanned 3,984 skills: 36.82% had at least one security flaw, 13.4% (534) had critical issues (malware, prompt injection, exposed secrets), with 76 confirmed malicious payloads — 8 of which remained live on ClawHub at publication, and 91% of which combined prompt injection with traditional malware. Separately, Koi Security researcher Oren Yomtov audited all 2,857 ClawHub skills (published Feb 1, 2026) and found 341 malicious (11.9%), 335 of them from a single coordinated "ClawHavoc" campaign delivering the Atomic macOS Stealer. Because a SKILL.md can instruct an agent to run scripts with full agent permissions, treat every third-party skill as untrusted code: read the SKILL.md and bundled scripts, prefer official repos (Anthropic, Vercel, GreenSock, OpenAI) and high-reputation authors, pin versions, and consider a scanner.

Reception evidence (community word-of-mouth, not just stars).

impeccable: testimonials like "This is the only set of agent skills I ever found use in," "Claude skills are mostly BS. These ones are the rare, truly useful ones," and a reviewer who found impeccable critique scored his own portfolio "25 out of 40. Borderline AI slop" — and started treating it as "a second pair of eyes." Bakaus's own a16z launch post ("Impeccable by Design") claims it "reached over 40,000 GitHub stars and 160,000 installs through skills.sh alone."
taste-skill: andrew.ooo calls it "the first frontend skill that treats 'AI slop' as a solvable engineering problem rather than a vibes problem… the ruleset is specific enough to actually ship different-looking code." One Vietnamese dev framed the contrast well: "Impeccable is like a meticulous design lead; Taste-Skill is like an art director who likes to break the rules."
Anthropic frontend-design: praised across Snyk, Firecrawl, and Medium roundups as the indispensable starting point; criticized only for bias toward boldness on enterprise UIs.

Recommendations

Stage 1 — Install the baseline (today, 5 minutes). Install Anthropic frontend-design in Claude Code (/plugin marketplace add anthropics/claude-code then select it, or npx skills add anthropics/skills --skill frontend-design) and the Codex frontend-skill if you use Codex. This alone removes most "AI slop."

Stage 2 — Add craft + a quality gate. Add impeccable (npx skills add pbakaus/impeccable) as your primary design driver — run it in product mode for app UI and brand mode for your marketing/landing pages. Add Vercel web-design-guidelines and run it as a review pass before shipping any page (accessibility + UX gate). These three stack without conflict.

Stage 3 — Make it stack-aware for Next.js + Node. Add a shadcn/ui skill (capraidev/shadcn-claude-skill for idiomatic patterns; add masonjames/Shadcnblocks-Skill if you want pre-built e-commerce/landing blocks for your store) and GSAP's official skills for any scroll/hero animation. Add Vercel react-best-practices for Next.js performance.

Stage 4 — Add the verification loop and (optionally) workflow rigor. Wire up Playwright (webapp-testing skill or Playwright MCP) so the agent can screenshot and self-correct across breakpoints — this is the biggest single quality multiplier. If you do larger multi-file features, try superpowers; skip it for quick styling.

If you only install ONE thing: Anthropic frontend-design. If you install two: add impeccable. That pairing is the best-reputation, lowest-risk combination for a Next.js indie site.

Benchmarks that would change this advice: if you're building a data-dense dashboard/admin rather than a marketing-forward store, de-emphasize taste-skill/impeccable's boldness and lean on Vercel guidelines + a design-system skill; if your store already has a Figma design system, add a Figma-to-code skill (OpenAI's figma-implement-design or the Claude Figma skill) for faithful translation instead of "riffing."

Caveats

This is a fast-moving space; star counts and install numbers shift weekly. Figures here were observed around June 26, 2026, and GitHub rounds them (e.g., "28k"). impeccable's 40k+ figure is the author's self-reported claim (a16z post) vs. ~28k on the live repo page — treat the higher number with caution.
Many "best skills" roundups are published by vendors (Composio, Firecrawl, Snyk, Agensi) with promotional intent; the most independent sentiment came from personal dev blogs (andrew.ooo, mejba.me) and HN/Reddit threads.
"Installs" metrics come from individual marketplaces (skills.sh, LobeHub) and are not directly comparable across platforms.
Security findings are real and current; the convenience of one-line installs should not override reviewing third-party SKILL.md files.
I could not directly verify the live anthropics/claude-code star count (≈131k via a secondary source); the official design skill itself lives in anthropics/skills (~149k).