Skill radar · checked 23 September 2026
Twelve frontend listings. Decide on the screen before the code changes.
Choose the bottleneck first: concept-led visual build, visual direction, a full design-and-build state model, project-bound visual feedback, a flag-heavy React component, deliberate interface motion, browser state capture, exploratory browser QA, a named changed-flow QA loop, a captured product-flow audit, a code-first UI review, or React/Next performance. Eleven listings are source-pinned; Frontend Testing & Debugging is a mutable current source. None is a pool-tested result.
Fast decision: Need a person to choose details on a known screen before Codex edits it? Consider Wenkang Frontend Design. Need a full state model for a substantial product surface? Consider PracticalSwan Frontend Design 2.0. Neither replaces the user, task, components, tokens, and constraints you must name.
Choose the job, then the skill
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
Anthropic Frontend Design
New visual direction, a landing page, dashboard, or major refresh.
- Needs
- A brief, audience, product constraints, and ideally a screenshot loop.
- Watch for
- Creative instructions are not your product strategy or design system.
- Source
- Anthropic 41bbe19 · Apache-2.0
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
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
React Composition Patterns
A flag-heavy React component API.
- Needs
- A React component worth refactoring.
- Watch for
- A reported lifted-state example issue remains unverified.
- Source
- Vercel 063bee94 · 1.0.0 · MIT
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
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, and a reachable test route.
- Watch for
- It can expose a state for review. It does not decide whether the design is right or prove full accessibility.
- Source
- Vercel v0.38.1 · Apache-2.0
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
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
Product Design Audit
A real product flow or screen that needs screenshot-tied UX and visual review.
- Needs
- A named journey, 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
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
- Fetched rules are mutable; a clean output is not an accessibility test.
- Source
- Vercel 063bee94 · 1.0.0 · MIT collection
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
Use one skill for the job in front of you
| When the real problem is | Start with | Do not mistake it for |
|---|---|---|
| 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 |
| 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 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 journey 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 target agent, scope, upstream revision, 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.