Claude Code Frontend Design Skill: One Core + Four Optional Roles

SkillSignal compared indexed Skills that own a distinct part of frontend work: visual direction, product-specific constraints, interface rules, responsive visual review, and browser-level evidence. Source trust, documentation, maintenance, attributed adoption signals, Agent compatibility, permissions, and role overlap all informed the order.

This is a source-reviewed editorial ranking, not a benchmark claiming that one prompt produced a universal winner. A Skill may behave differently across repositories, Agents, models, browsers, and source revisions. The useful question is which missing role would reduce uncertainty in the project in front of you.

• The Skill owns a distinct decision or evidence role.
• Its source and limitations are visible before installation.
• Its permissions are proportionate to the role.
• Its output can be reviewed by a person or repeatable check.

Anthropic's frontend-design is the best starting point when generated interfaces feel generic. Its instructions push the Agent toward a concrete visual concept, deliberate typography, composition, color, and motion, while asking implementation complexity to match the chosen direction.

Its strength is art direction, not independent usability proof. It can still produce inaccessible controls, incomplete states, or project-specific regressions. Pair it with one review or evidence role only when the task requires that proof.

anti-ui-slop is strongest when a team already has product context and wants the generated interface to reflect real users, actions, nouns, states, and an existing design system. It turns repository evidence and selected interface references into a design contract, then uses a finish gate to reject generic patterns and missing states.

The indexed source targets GitHub Copilot and may need network access to gather public references. That makes it a poor automatic recommendation for every Claude Code or Codex user. Treat cross-Agent use as portable and verify discovery before relying on it.

Vercel's web-design-guidelines is the most focused choice when the interface already exists and needs a structured review against practical web and accessibility rules. Its read-oriented permission profile is narrower than a Skill that drives the browser or rewrites the repository.

A rules review cannot see every rendered state or prove keyboard, screen-reader, mobile, and task performance. Use it as an early quality gate, not as a substitute for browser evidence or user research.

web-design-reviewer inspects a running site across mobile, tablet, desktop, and wide viewports, locates problems in the source, applies bounded fixes, and checks the result again. It is the most direct fit here for clipping, overflow, inconsistent spacing, weak hierarchy, and breakpoint-specific defects.

Browser control and repository writes widen its permissions, while screenshots can still miss interaction, semantic, and assistive-technology failures. The indexed source targets GitHub Copilot; other Agent pairings need a controlled discovery test.

Anthropic's webapp-testing completes the shortlist because a visually polished page can still fail its primary flow. It uses Playwright-oriented browser workflows to exercise a local application, capture screenshots, and preserve browser-log evidence for a human to inspect.

It is not primarily a visual-design Skill, and that is precisely why it earns the fifth role. It should verify a short acceptance flow after design and implementation—not generate taste, certify accessibility, or imply that every browser and production dependency was covered.

For Claude Code, start with Anthropic's frontend-design when you need a product-specific visual concept, deliberate typography, composition, color, and motion. The official instructions provide art direction; they do not independently verify usability, accessibility, or rendered behavior.

Add only one review role if the task needs it: web-design-guidelines for a read-oriented rules pass, or webapp-testing for a named browser flow. Confirm the current install path, discovery, and dependencies in your repository before relying on either.

anti-ui-slop and web-design-reviewer are useful comparisons for GitHub Copilot workflows, but their indexed sources target Copilot; do not treat them as default Claude Code installs. Choose by the evidence you still need, not by the number of entries in a Top 5 list.

• Start with one Skill for a specific visual-direction problem.
• Add a reviewer only for a named quality or behavior question.
• Confirm the Agent discovers the Skill and its dependencies work.
• Keep Copilot-targeted sources out of the default Claude Code stack.