qa-toolkit

Generate QA checklist from a design source — dispatches specialized agents to verify design-to-implementation fidelity

Use this agent to verify that all user flows from the design source are implemented end-to-end. Examples: <example> Context: Playground has a contract flow: not_sent → sent → revision → signed. User: "Check if the contract lifecycle works end-to-end." Assistant: "Let me use the flow-tracer to trace state transitions and verify they're implemented." <Task tool invocation to launch flow-tracer agent> </example> <example> Context: Design shows like → accept → match → chat flow across two users. User: "Generate E2E flow checks for the matching flow." Assistant: "Let me use the flow-tracer to extract cross-role flow checks." <Task tool invocation to launch flow-tracer agent> </example>

Use this agent to verify that all screens, states, and conditional UI from the design source are faithfully implemented. Examples: <example> Context: A playground HTML with sidebar toggles for 5 screens × 2 roles × 4 states. User: "Generate QA checks from the matches playground." Assistant: "Let me use the screen-checker agent to extract all screen × role × state combinations." <Task tool invocation to launch screen-checker agent> </example> <example> Context: Figma file with component variants for the contract screen. User: "Check if the contract screen matches the Figma design." Assistant: "Let me use the screen-checker to verify all states are implemented." <Task tool invocation to launch screen-checker agent> </example>

Use this agent to verify that implemented visual styles match the design source. Examples: <example> Context: Playground CSS has `.msg { padding: 10px 14px; gap: 8px }` but implementation uses different values. User: "The chat bubbles look different from the playground." Assistant: "Let me use the style-extractor agent to compare CSS properties." <Task tool invocation to launch style-extractor agent> </example> <example> Context: Figma component has 16px corner radius but implementation has 12px. User: "Generate style spec checks from the Figma design." Assistant: "Let me use the style-extractor to map Figma properties to code." <Task tool invocation to launch style-extractor agent> </example>

Use this agent to verify that design tokens from the design source match the project's token system. Examples: <example> Context: Playground CSS has `--brand-accent: #f43f5e` but tokens file has a different hex. User: "Check if playground colors match our design tokens." Assistant: "Let me use the token-checker to compare CSS variables against tokens." <Task tool invocation to launch token-checker agent> </example> <example> Context: Component uses hardcoded `#94a3b8` instead of the `brand.muted` token. User: "Are there any hardcoded colors that should use tokens?" Assistant: "Let me use the token-checker to find token violations." <Task tool invocation to launch token-checker agent> </example>

Use this agent to verify that implemented user-facing text matches the design source's intended copy. Examples: <example> Context: Playground shows button text '확인하고 보내기' but implementation has '보내기'. User: "Check if all UX text matches the playground." Assistant: "Let me use the ux-writing-checker to compare design text against code." <Task tool invocation to launch ux-writing-checker agent> </example> <example> Context: New feature added with Korean text hardcoded in components. User: "Are there any hardcoded strings that should be in labels.ts?" Assistant: "Let me use the ux-writing-checker to find hardcoded text." <Task tool invocation to launch ux-writing-checker agent> </example>