name: qa-frontend description: Run Frontend/UI QA: Storybook coverage and visual checks, responsive behaviour, component consistency. Use when the user runs a full QA, /qa-frontend, or asks for frontend-only QA. Output structured findings in the QA report format.

QA — Frontend / UI

Run frontend-focused QA and output findings in the shared QA report format (severity, steps, suggestion, evidence).

Input (from user or orchestrator)

• Repo path (and optional branch).
• Storybook URL or path (e.g. local npm run storybook or deployed URL).
• Staging or app URL (if available) for full-page checks.
• Exclusions (paths to skip).

Steps

1. Identify frontend surface

   • List React/UI entry points (e.g. src/, theme folder).
   • Locate Storybook config and stories (e.g. *.stories.tsx).

2. Storybook

   • If Storybook is available (URL or run locally): list all story IDs; note components without stories.
   • Open a sample of stories; check for layout breaks, missing props, console errors.
   • Output findings with IDs like FE-01, FE-02, using the QA report format (title, severity, steps, suggestion, evidence).

3. Visual / responsive

   • If staging or app URL is given: check key pages at 320px, 768px, 1280px (or project breakpoints).
   • Note overflow, broken layout, touch targets, text truncation.
   • Add findings in the same format.

4. Component consistency

   • Scan for repeated patterns (buttons, forms, cards); note deviations or missing variants.
   • Optional: compare to design tokens or theme (if documented).

5. Output

   • Emit a structured list of findings (ID, title, area=Frontend, severity, steps, expected/actual, suggestion, evidence).
   • If you captured screenshots or recordings, reference them in evidence (path or link).
   • Do not merge with backend/E2E findings; the orchestrator or report-merger skill will combine them.

Notes

• Use the QA report format rule for every finding.
• Prefer P1/P2 for user-visible issues; P3 for polish.
• If Storybook or URLs are missing, say so in the output and skip those steps.