Catalogue snapshot · 23 September 2026
Browse by the job, state model, and proof path.
Eleven listings are source-pinned; Frontend Testing & Debugging is a mutable current source with a declared plugin version, not an immutable skill revision. This is not a ranking. “Strong fit” means the stated workflow matches the job. It does not mean the pool measured a better outcome.
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
One field every installation should add
Adoption record: target agent · project or global scope · upstream URL and revision · local edits · update review. For a design-and-build skill, add user and screen job, existing system, in-scope states, viewports, and input methods. For a project-bound feedback loop, add the represented route, source tokens, human decisions, annotations, export, applied diff, and later live-route comparison. Add the proof resource too: a concept and browser comparison for a visual build; a named route, interaction, expected result, Browser path, backend, viewport, and session context for targeted QA; a named journey and accepted screenshots for a flow audit; a target URL, named session, output directory, retries, and retained repro artifacts for exploratory QA; or the relevant files and rule revision for a code review.
Not in this catalogue
Prompt collections, component libraries, templates, whole applications, and design-system conversion pipelines solve different problems. A repository with a SKILL.md can also bundle scripts and references, so inspect every file before adoption.