TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Routes to specialists for CAPABILITIES.
TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Routes to specialists for CAPABILITIES.
npx skills add https://github.com/dtsong/frontend-qa-skills --skill suite-name复制此命令并粘贴到 Claude Code 中以安装该技能
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. Covers 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 | SUITE_NAME |
| description | TRIGGER_DESCRIPTION. Use when USER_CONTEXT. Routes to specialists for CAPABILITIES. |
One-sentence description of what this skill suite does.
skills/specialist-a/SKILL.mdskills/specialist-b/SKILL.mdskills/specialist-a/SKILL.md| Skill | Path | Purpose | Model Tier |
|---|---|---|---|
| specialist-a | skills/specialist-a/SKILL.md | Does X | analytical |
| specialist-b | skills/specialist-b/SKILL.md | Does Y | reasoning |
Read ONLY the relevant specialist SKILL.md based on classification above. Do not pre-load multiple specialists.
Pass between skills as structured JSON:
{
"source_skill": "specialist-a",
"findings": [],
"confidence": "high|medium|low"
}