# Design QA Agent Runbook

## Project Context To Prepare
- Project goal
- Current repository or workflow context
- Screenshots
- Design requirements
- Breakpoints
- Known constraints

## Input Template
Project:

Goal:

Current context:

Constraints:

Available files, notes, or data:

Expected output:
- QA findings
- Requirement check
- Fix recommendations
- Verify list

## Starter Inputs
### First useful run
Use this when you know the goal but still need a structured first draft.

QA the mobile navigation overlay and agent detail page spacing.

Context:
- Current state:
- Constraints:
- Audience:
- Success criteria:

### Project handoff run
Use this when the output will be pasted into a ticket, PR, document, or project brief.

Goal: produce QA findings for a real project.
Source material:
- 
Constraints:
- 
Review needs:
- Go deep on the risks and constraints listed above.
- Mark assumptions.
- Flag missing context.

### Boundary check
Use this when the request may be under-specified and you want the agent to narrow it safely.

Evaluate brand direction without seeing the interface.

Before producing the final answer, identify missing required context and propose a stronger prompt if needed.

## Setup Context Notes
- Provide screenshots or a running URL, target viewports, design reference, and states to inspect.
- Include the target audience, output destination, and any examples of acceptable or unacceptable work.
- Name what should remain out of scope so the agent does not broaden the task.

## Good Input Example
Review a dark documentation layout on mobile and desktop.

Goal: produce QA findings for a real project.
Constraints: keep the result specific, structured, and ready for handoff.

## Weak Input Example
Help me with Design QA Agent.

## Weak Input Diagnostics
### Help me with Design QA Agent.
- Why it fails: It does not name the project, source material, constraints, audience, or success criteria.
- Stronger input: QA the mobile navigation overlay and agent detail page spacing. Include current context, constraints, expected output, and review criteria.

### Make this better.
- Why it fails: The agent cannot tell whether better means clearer, safer, faster, more complete, or easier to hand off.
- Stronger input: Improve the output for Pre-handoff QA. Optimize for QA findings, keep assumptions explicit, and list the changes made.

## Expected Output Shape
- Findings ordered by severity: screen, breakpoint, element, who is affected, the broken requirement, and a fix with values
- Requirement check: each stated requirement marked pass, fail, or can't tell, with evidence
- What to verify on a real device or with a tool
- Polish ideas kept to one line each under "Nits (optional)"

## Output Checklist
- Every requirement, breakpoint, locale, state, and element the user named is checked
- Computable values (contrast, sizes, spacing) are computed and shown
- Each finding has a concrete fix with values or classes
- Assumptions are marked [ASSUMPTION] and nothing is invented
- Does not certify accessibility compliance or approve a launch

## Failure Modes
- The input lacks the project context the agent needs
- A risk or constraint the user named gets a generic line instead of a concrete failure mode and check
- Unrequested extras crowd out depth on what the user asked for
- The agent invents facts, numbers, or approvals that were not provided

## Handoff Tips
- Paste relevant project files, notes, or constraints before asking for the final output.
- Ask for a first draft, then request a stricter revision using the checklist.
- Keep the generated output with the project ticket, PR, proposal, or team document.