TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Covers CAPABILITIES.
npx skills add https://github.com/dtsong/frontend-qa-skills --skill skill-nameCopy and paste this command into Claude Code to install the skill
Use when a user reports a frontend bug, visual defect, or unexpected behavior in a Next.js/TypeScript application. Orchestrates a multi-phase QA pipeline — component mapping, diagnosis, fix, and regression testing — by classifying symptoms and dispatching to the appropriate specialist skill. Does not perform diagnosis or fixes directly; delegates all domain work to specialists. Not for backend-only issues, infrastructure problems, or build/deployment failures.
Use when investigating any frontend issue before diagnosis or debugging — maps a Next.js route to its full component tree. Resolves "what components render on this page," "show me the component tree for /dashboard," or "trace imports for this route." Produces a ComponentMap artifact with server/client boundaries, props, hooks, data fetching, and styling metadata consumed by all downstream QA skills. Not for diagnosing bugs, fixing code, or generating tests — those are handled by specialist skills after mapping is complete.
TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Routes to specialists for CAPABILITIES.
Use when a diagnosed fix needs to be applied and verified against a Next.js component — "apply this fix," "fix and run tests," or "verify this change." Applies a single diagnosed fix with mandatory diff preview, then runs scoped and broad verification (tsc, lint, tests) with atomic safety and revert capability. Not for diagnosing bugs (use ui-bug-investigator or css-layout-debugger) or generating regression tests (use regression-test-generator).
Use when a user reports CSS, layout, or styling issues in a Next.js application — "element overlapping," "spacing is wrong," "responsive layout broken," "dark mode not working," "Tailwind classes not applying," or "alignment off." Diagnoses through a 6-phase pipeline that mirrors browser evaluation order, covering token resolution, cascade conflicts, layout models, stacking contexts, and viewport responsiveness. Handles Tailwind, CSS Modules, styled-components, and vanilla CSS. Not for JavaScript logic bugs, data fetching issues, or server-side rendering errors — route those to ui-bug-investigator.
Use when a verified fix needs a regression test — "write a test for this fix," "generate regression test," or "add test coverage for this bug." Auto-detects project test conventions, routes to Vitest+RTL or Playwright based on component type (sync vs async server), generates targeted tests with anti-brittleness constraints, and annotates coverage boundaries. Not for diagnosing bugs, applying fixes, or writing feature tests — use ui-bug-investigator, component-fix-and-verify, or manual test authoring respectively.
| name | SKILL_NAME |
| description | TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Covers CAPABILITIES. |
required_input: DESCRIPTIONoptional_input (optional): DESCRIPTIONStep 1: Gather context.
Step 2: PRIMARY_ACTION.
Step 3: Verify output.
{
"result": "EXAMPLE_VALUE",
"confidence": "high|medium|low",
"details": []
}
| File | Load When | Contains |
|---|---|---|
references/CHECKLIST.md | Step 2 if CONDITION | Detailed checklist for X |