Start with the task, not an install

For one screen or small fix, give the agent the route, existing tokens and components, real content, required states, target widths, and checks. Inspect the render. Add a skill when a procedure repeats or needs a specialized workflow. This is a decision route, not a measured claim that no skill works better. See the brief and source check.

Skills checked 31 October 2026

Choose a skill for the task.

Start with the job and current project rules. The cards below separate visual direction, implementation, QA, and review; none is a measured winner over a careful brief.

Have a reference screenshot? Match the existing project first. UXKIN ui-from-screenshot describes a same-width render comparison using project components and tokens. It is a conditional source-read option, not a tested result. See the task check.

Choose the job, then the skill

Conditional fit

Improve UI

Audit one existing app screen against its current design rules before changing product code.

Needs: The target route or component, governing design evidence, source access, and rendered evidence for visual claims.
Watch for: It reports findings and writes selected plans under design-plans/; it does not edit product source. Functional and accessibility checks need explicit scope. Mutable source; no pool-run result test.
Install: Current install command; review the files and choose your agent and scope first.
Source: Ibelick Improve UI · main (mutable) · MIT · checked 30 October 2026

Conditional fit

OpenDesigner

A new project needs a reusable design system, tokens, and a written visual rule set.

Needs: Python 3.10+, a project brief, existing asset and stack context, a target agent, and review of generated files.
Watch for: For a one-off screen with an existing system, follow its DESIGN.md instead. The source is mutable; Codex loading and frontend outcomes are untested by this pool.
Source: OpenDesigner main (mutable) · metadata 0.1.0 · MIT

Conditional fit

Hueyexe Forms, Inputs, and Checkout

A checkout, registration, or data-entry flow whose fields, validation, errors, and recovery need work.

Needs: Real field requirements, the form route, target agent, and keyboard and server-error checks.
Watch for: The source is mutable, its references and Codex loading are unverified, and the pool did not test a result.
Source: Hueyexe main (mutable) · no declared skill version · MIT repository

Conditional fit

OpenAI Game UI Frontend

A browser-game HUD, menu, or overlay that must protect the playfield and make input boundaries explicit. Mobile here means a phone-sized browser layout, not a native app.

Needs: A browser-game surface, game fantasy and player verbs, desktop and mobile expectations, and a reviewable playfield and input state.
Watch for: Do not use it for a normal dashboard. The source is mutable and its HUD rules are author guidance, not a pool result test.
Source: OpenAI main (mutable) · Game Studio 0.1.2 · MIT declared

Conditional fit

PaulRBerg Frontend Design

An existing or substantial screen that needs one project-bound direction and rendered inspection.

Needs: Existing system context, real content, relevant states and widths, local checks, and its chromium-browser dependency or a host browser or DevTools fallback.
Watch for: It is author guidance, not a result test. The source is mutable and has no declared skill version.
Source: PaulRBerg main (mutable) · MIT repository

Conditional fit

Product Design Ideate

Choose a visual direction for a new or redesigned screen before prototype work.

Needs: Product Design availability; Get Context brief with screen and user outcome; relevant references, Image Gen, and a user selection.
Watch for: It generates directions, not a verified implementation. The source is mutable.
Source: OpenAI main (mutable) · Product Design 0.1.52

Conditional fit

Frontend App Builder

New visual surface with an approved concept before code.

Needs: Image Gen, a browser render, real content, and time to approve the concept.
Watch for: Concept-and-fidelity workflow, not a small-fix default.
Source: OpenAI 789aa61 · Build Web Apps 0.1.2 · MIT

Strong fit

Anthropic Frontend Design

A new landing page or major refresh when visual direction is open.

Needs: A brief, audience, product constraints, and ideally a screenshot loop.
Watch for: It asks for a palette and type plan, but says a fixed brief wins. Give it current tokens and components; reject a plan that replaces them. No pool result test.
Source: Anthropic 41bbe19 · Apache-2.0

Conditional fit

PracticalSwan Frontend Design

A substantial product surface that needs a stated task, real state model, responsive checks, and rendered verification.

Needs: Existing system context, real content, relevant empty or error states, representative widths, and one primary design direction.
Watch for: Its hard gates are author instructions. Do not stack it with another design-direction skill before a project trial.
Source: PracticalSwan afbb609 · 2.0 · MIT AND Apache-2.0

Conditional fit

Wenkang Frontend Design

Project-bound visual feedback before you apply a UI change.

Needs: A real route or a defined concept, the project’s components and tokens, a browser for the local preview, and a person to make the visual decisions.
Watch for: It exports decisions and annotations for Codex. The preview is not proof that the real route matches or works.
Source: Wenkang fae5ad1 · MIT

Conditional fit

React Composition Patterns

A flag-heavy React component API.

Needs: A React component worth refactoring.
Watch for: The pinned lifted-state example uses `Composer.Context`, while a related rule defines `ComposerContext`. Check it before copying; no runtime test was done.
Source: Vercel 063bee94 · 1.0.0 · MIT

Conditional fit

React View Transitions

Meaningful React or Next.js motion.

Needs: Documented runtime support plus reduced-motion and browser checks.
Watch for: Not decorative animation or a cross-browser acceptance check.
Source: Vercel 063bee94 · 1.0.0 · MIT

Conditional fit

Agent Browser

A runnable frontend whose named states need browser navigation, snapshots, and retained screenshots.

Needs: Node.js 24 or later, CLI Bash access, Chrome or Chromium CDP, an isolated named session, a reachable route, and the full core instructions loaded from the installed CLI.
Watch for: The linked SKILL.md is a discovery stub. Run agent-browser skills get core and record the installed version. It does not decide whether the design is right or prove full accessibility.
Source: Vercel v0.38.1 discovery file · tagged core workflow · Apache-2.0

Conditional fit

Agent Browser Dogfood

Exploratory QA for a runnable frontend when a failure needs replayable browser evidence.

Needs: Agent Browser, a reachable target URL, a named session, an output path, and a legitimate authentication route when needed.
Watch for: It documents user-observed failures. It does not read source, enforce your design system, or certify quality.
Source: Vercel v0.38.1 · Apache-2.0

Conditional fit

Frontend Testing & Debugging

A specific rendered frontend change or bug that needs a named QA loop.

Needs: Build Web Apps, a target flow, Browser availability or an explicitly allowed Playwright fallback, and retained QA evidence.
Watch for: Record the browser backend, viewport, and session context. A screenshot can prove the wrong surface.
Source: OpenAI main (mutable) · Build Web Apps 0.1.2 · MIT

Conditional fit

Product Design Audit

A real product flow or screen that needs screenshot-tied UX and visual review.

Needs: A named flow, a capture route, and time to inspect screenshots.
Watch for: It cannot audit a flow you cannot run or prove full accessibility from pixels.
Source: OpenAI 33bd952 · Product Design 0.1.52 · Proprietary declared

Conditional fit

Web Design Guidelines

A concise UI review with file-and-line findings.

Needs: Named source files and network access for its current guidelines.
Watch for: The pinned skill still fetches mutable rules from another repository. Record or pin the fetched rule revision for comparable reviews; a clean file review is not an accessibility test.
Source: Vercel 063bee94 · 1.0.0 · MIT collection

Conditional fit

React Best Practices

React or Next.js performance work.

Needs: A React or Next.js codebase.
Watch for: Performance improvement is author guidance until tested in your app.
Source: Vercel 063bee94 · 1.0.0 · MIT

Source warnings and research updates

Same name, different skill: A frontend-design catalogue pointer sends you to another author’s full skill and warns about a shared install path. Check the installed file before use; we did not reproduce an overwrite. Read the source check.

New design system or one screen? OpenDesigner is a conditional option for creating reusable tokens and DESIGN.md. Its own instructions say to use an existing system for a one-off UI task. Codex loading and frontend results are untested by this pool. Read the source check.

Skill usage is not a result: In eligible Claude Code terminal sessions, /skill-doctor shows which skills have been invoked and their listing cost. It cannot tell you whether a frontend improved. See the two checks.

Before a skill trial: In Claude Code, confirm that the skill was invoked. Installation alone does not load its full instructions. See the check.

Revision evidence: An open contributor PR reports 21 wins in 28 decisive screenshot comparisons for proposed Frontend Design text against an older version. It did not compare against no skill or test a working flow. Read the limits.

Skill trial: Hold the brief and project fixed, then check visual-system fit and working behavior separately. See the two-check method.

Check the rendered default: In one small report, 10 of 21 Opus 5.5 pages made with Frontend Design still had pill-shaped buttons. There was no no-skill baseline. Read what the count does and does not show.

Test on your model: A web-development benchmark found that skill effects did not transfer reliably between its four models. It measured functional tasks, not visual quality. See the trial method.

Need an editable Figma handoff rather than a live web screen? Figment is a source-limited watch item, not a new web-implementation recommendation. OpenDesign has two similar frontend skill names. One is a pointer to a removed OpenAI bundle; the other is a substantive Anthropic adaptation. They are not interchangeable. See the source check.

Agent Browser loading: Its v0.38.1 SKILL.md is a discovery stub, not the full browser workflow. Read the tagged core source; in a real trial, record the installed version and agent-browser skills get core output. We have not run it. See the source check.

Concept or QA? If you need a new visual target, Frontend App Builder is a conditional concept-first route. If the screen exists and a change needs proof, name the expected state and use Frontend Testing & Debugging for a targeted rendered check. Write your own release criteria first. Neither skill has a pool-run outcome test. Compare the jobs.

Live site or chat artifact? If your layout is sound and color or type needs work, inspect the site and change its own tokens first. Anthropic Web Artifacts Builder packages a complex Claude chat artifact as one HTML file; do not use it as a website-redesign default. Compare the jobs.

Before ideation: Name the screen and what its user must do. Product Design Ideate requires the Get Context brief gate before image generation. If you only need to fix an element in a running UI, make that local change and inspect the render. See the choice.

Design-system correction: Anthropic Frontend Design asks for palette and type choices, but the pinned file says a fixed visual brief wins. Supply your real tokens and components and reject a plan that replaces them. We have not tested the outcome. Read the source check.

Trial before installing: Vercel Skills documents skills use for one session without adding a skill to your agent directory. Use its documented --agent route or confirm the full prompt arrived if piping: one user reported truncation in version 1.5.23. We did not run the CLI. See the source check.

Existing design system: Give the agent those files, the route, and the states to preserve before adding a visual-direction skill. Vercel Labs DS Skills Pipeline can generate a project-specific skill from source code, but it is a build-and-maintain workflow, not another ready-made listing. Its Codex support is marked expected, and we have not tested its results. Compare the routes.

After a skill update: An “up to date” message from Vercel Skills’ global updater does not check installed bytes against upstream. If you edited a skill locally, inspect its files and link type after updating. See the source check.

Motion-first candidate held: Silk Design makes smooth scrolling and reveal effects defaults. Before using it, check stack fit, reduced-motion behavior, and mobile readability. We have not run it; it is not a catalogue listing. Read the source check.

Skill versus no skill: One web-development preprint found lower average functional scores under skill injection; a cross-domain benchmark found gains under a different setup. Neither tested our seventeen listings or visual quality. Read the comparison limits.

Before you use the React skill: Inspect the lifted-state example and the context-interface rule. The proposed fix is still open.

OpenDesign file check: frontend-skill is a pointer to a removed OpenAI bundle. A separate frontend-design file contains an adapted Anthropic workflow and puts existing tokens and components first. These are not the same skill. We have not tested Codex loading or output. Compare the files.

Package hold: Snowe UI Skill is not listed because GitHub reports a YAML error in its SKILL.md frontmatter. We did not test host behavior.

Use one skill for the job in front of you

When the real problem is	Start with	Do not mistake it for
A new project needs shared tokens and visual rules	OpenDesigner, after reviewing project context and generated DESIGN.md and token files	A tested improvement to an individual screen or a reason to replace an existing system
A checkout or registration flow needs fewer fields and recoverable errors	Hueyexe Forms, Inputs, and Checkout with actual requirements, keyboard review, and a server-rejection path	Proof of accessibility, conversion, or Codex compatibility
A browser-game HUD, menu, or overlay must leave play and controls usable	OpenAI Game UI Frontend with player verbs, playfield budget, desktop and mobile states, and explicit camera-or-menu input boundaries	Proof that the plugin loads, the layout is readable, or the game is accessible and performant
An existing or substantial screen needs one direction held to its system and inspected in a browser	PaulRBerg Frontend Design with the actual route, local tokens and constraints, relevant checks, and rendered states at the widths that matter	Proof that it installs, loads, improves the design, or catches every regression
A known screen needs human visual choices before implementation	Wenkang Frontend Design with the real route, project tokens, human annotations, exported decisions, and a later live-route comparison	Proof that the preview and application match
A product surface needs its state model and system context made explicit	PracticalSwan Frontend Design with real states, input methods, and rendered checks	Proof of accessibility, performance, or a better result
A new or redesigned screen needs a visual direction before a prototype	Product Design Ideate with the minimum brief, relevant references, three directions, and an explicit selection	Proof that the selected direction is usable, on-brand, or faithfully implemented
The brief lacks visual direction	Anthropic Frontend Design before code	A replacement for product strategy or a design system
A high-visibility surface needs a visual target	Frontend App Builder if you can approve a concept and inspect a render	A measured quality result
A runnable UI state needs repeatable capture	Agent Browser after loading its CLI-served core workflow, with a named session, route, and fixed viewport	A design or accessibility verdict
A runnable app needs exploratory QA and a reproducible handoff	Agent Browser Dogfood with retained report artifacts	Design-system enforcement or proof that no defects remain
A known rendered change or interaction bug needs validation	Frontend Testing & Debugging with a named flow, browser-path decision, and retained evidence	Full regression coverage or proof that the capture reflects the required viewport and session
A live flow needs review	Product Design Audit with the actual captured flow	Proof of full accessibility
Files need focused review	Web Design Guidelines, then React Best Practices where it fits	Proof the result is fast or visually right

Before you install: record source revision, visible parseable metadata, target agent, scope, bundled files, local edits, update review, and the proof resource. For design work, record the screen job, system context, in-scope states, viewports, and input methods. For browser evidence, also record backend, viewport, target URL, session or account context, and visible state.

Compare fields · See the method · Read the research log