Output Enforcement

When to Use

• Use when: about to deliver a UI component, page, or design update
• Use when: user asks for a "final review" or "check this before I use it"
• Use when: any task involving frontend code is about to be marked complete
• Do NOT use when: the work is not frontend (no visual output)
• Do NOT use when: the task is still in early draft — run this gate only before delivery

How It Works

1. Run the Code Quality checks — scan for the items in the checklist below
2. Run the Visual Correctness checks
3. Run the Accessibility Baseline checks
4. Run the Placeholder Sweep
5. Report results — list PASS / FAIL / SKIP (with reason) per item
6. Fix all FAILs before delivering
7. Deliver only after all items are PASS or SKIP (with justification)

Enforcement Checklist

Code Quality

• No inline styles unless required by the framework
• No hardcoded color values outside of design tokens or a designated constants file
• No commented-out code blocks
• No console.log or debug output left in
• Component props are typed (TypeScript) or documented (JSDoc/PropTypes)
• No TODO comments that block functionality (informational TODOs are acceptable)

Visual Correctness

• Layout renders without overflow at default viewport (1280px desktop)
• Layout renders without overflow at 375px mobile
• Interactive elements have visible hover and focus states
• Text does not overlap or clip at any of the above viewports
• Images and icons have defined width/height or aspect ratio (no layout shift)

Accessibility Baseline

• All <img> have alt text (empty alt="" is acceptable for decorative images)
• All interactive elements are keyboard-reachable (tabindex or native elements)
• Color contrast ≥ 4.5:1 for normal text, ≥ 3:1 for large text (WCAG AA)
• Form inputs have associated <label> elements

Placeholder Sweep

• No Lorem Ipsum or placeholder text in the output
• No [TODO], [insert here], example@email.com, or John Doe in visible content
• No placeholder images (via.placeholder.com, placehold.it)

Output Format

## Output Enforcement Report

### Code Quality
- [ ] No inline styles — PASS
- [ ] No hardcoded colors — FAIL: Button.tsx line 12: color: "#3b82f6"
...

### Visual Correctness
...

### Accessibility Baseline
...

### Placeholder Sweep
...

Summary: X PASS / Y FAIL / Z SKIP
Action required before delivery: [list of FAILs to fix]

Gotchas

• SKIP is only valid with a written reason — never skip silently
• Contrast check: if you cannot run a tool, estimate from color names and flag as ESTIMATED
• Layout overflow: if you cannot render the UI, flag viewport checks as ESTIMATED and note the risk
• TypeScript typing: if the project is plain JS, skip typing checks and note it

Anti-Fake-Pass Rules

Before claiming output enforcement is complete, you MUST show:

• The full checklist output — every item marked PASS / FAIL / SKIP
• All FAILs listed with specific file + line reference
• Summary line: X PASS / Y FAIL / Z SKIP
• If any FAILs remain: delivery is blocked until fixed or explicitly waived by user

Reference: gates/anti-fake-pass-gate.md