claude-design-agent-qalisted

# Claude Design Agent QA This skill combines Claude Design Handoff discipline with Browser Agent QA Wizard execution. Its job is not only "does it look close?" It must prove that the implemented interface matches the design source and then prove the interface works. ## Contract - Open the actual design source and the actual app implementation in a real browser. - Prefer the Claude Design bundle or `.dc.html` source over screenshots for exact values. - Screenshots/images are holistic evidence, not a replacement for source inspection when source exists. - Compare design and implementation before functional QA. - Do not treat prototype code as production code. - Do not accept hardcoded fixture metrics as real app data. - After fidelity passes or drift is documented, run functional/navigation/accessibility/responsive/AI QA. ## Source Discovery For a Claude Design bundle: 1. Read `README.md` first if present. 2. Identify the primary `.dc.html` or `.html` file. 3. Read the primary file in full. 4. Enumerate imported `.tsx`, `.jsx`, `.js`, `.css`, images, uploads, fonts, and icons. 5. Read imports that define visible sections, tokens, fixtures, charts, or interaction behavior. 6. Inventory: - section list and order - component/primitives list - token sources - fixture data and expected real-data contracts - prototype-only scaffolding to drop For only an image/screenshot: - Use the image as a visual acceptance target. - State that exact tokens and spacing are i