design-ship

The last gate before it goes out. This skill has one job: find the thing that will embarrass you in production, while it is still cheap to fix.

Two rules:

1. A gate that always passes is not a gate. If you cannot find anything, say so with the checks you ran, not with encouragement.
2. Blockers and polish are different categories. Contrast failing at 3.1:1 blocks. A shadow being 2px too far does not. Mixing them means the real blocker gets skimmed.

Engine

DS=$(ls "${CLAUDE_PLUGIN_ROOT:-/nonexistent}/engine/dstack.py" "$HOME/.claude/dstack/engine/dstack.py" 2>/dev/null | head -1)
python3 "$DS" --audit -c accessibility        # critical first
python3 "$DS" --audit --motion -c accessibility-motion
python3 "$DS" --audit --motion -c performance
python3 "$DS" "<symptom>" --all

The seven gates

Work them in order. Record a pass, a fail, or a not applicable for each with the evidence. Never mark a gate passed that you did not actually check.

Gate 1: Accessibility

• Contrast. Body text 4.5:1 minimum. Large text 3:1. Interactive elements and focus rings 3:1 against their surroundings. Compute the ratios; do not eyeball them.
• Focus. Every interactive element reachable by keyboard, with a visible ring at all times. Tab through the whole flow. Order must follow visual order.
• Labels. Every input labelled. Every image with alt text, or explicitly marked decorative. Placeholder is not a label.
• Targets. 44x44px minimum on touch. Adjacent targets need spacing between them, not just size.
• Semantics. Headings in order with no skipped levels. Buttons that are buttons and links that are links.
• Reduced motion. The query is honored and the interface still communicates state without travel.

Anything failing here is a blocker. Accessibility failures are not a matter of taste.

Gate 2: Responsive

Check at 375, 768, 1024, 1440, and 1920. Then check at 320, because it still exists and it is where things break.

• Horizontal overflow anywhere. Tables, code blocks, long unbroken strings, wide images.
• Text that reflows into one or two orphaned words on a line.
• Touch targets that were fine on desktop and collapsed on mobile.
• Fixed heights that clip content when the font size grows.
• Layout that technically works but reorders content into a nonsensical reading order.

Also test at 200 percent browser zoom, which is a WCAG requirement and catches most fixed height bugs at once.

Gate 3: Dark mode

Skip only if the product genuinely does not ship one.

• Every contrast pair rechecked. Passing in light mode proves nothing.
• Elevation built from lighter tinted surfaces, not from shadows, which stop reading in the dark.
• No pure black with pure white text on LCD.
• Images, illustrations, and logos that assumed a white background.
• Accent color desaturated slightly so it does not vibrate against near black.
• Any hardcoded color that missed the theme layer. Grep for raw hex in component files.

Gate 4: States

The most common source of shipped embarrassment, because the happy path is the only one anybody clicks during development.

For every interactive element: default, hover, focus, active, disabled, loading.

For every surface that shows data: loading, empty, error, partial, and overflow with far more content than the design assumed.

Specifically hunt:

• Empty states that render as a blank rectangle with no explanation and no next action
• Error states that print a raw exception or say "Something went wrong" with no recovery
• Loading states that shift the layout when real content arrives
• A name field tested with "Jo" and never with a 60 character name
• A list tested with 3 items and never with 300 or with 0
• Long content in a container with a fixed height

Gate 5: Motion

python3 "$DS" --audit --motion -c accessibility-motion

• No linear on anything travelling through space.
• Nothing animating width, height, top, left, margin, or box-shadow.
• No animation over 400ms without a reason.
• Entrance animations do not replay on scroll.
• Everything interruptible. Double click, navigate mid transition, grab a settling sheet.
• Reduced motion branch present and tested at the OS level.

Gate 6: Performance

• Throttle CPU to 4x and use the interface. Frames under 16ms at 60fps.
• Hero images sized for their container and served in a modern format.
• Background video under 2MB, muted, with a poster frame that matches frame one.
• Fonts subset and preloaded, with a fallback that does not shift the layout when the real font arrives.
• No layout shift on load. Reserve space for images, embeds, and anything split at runtime.

Gate 7: Copy and craft

• No placeholder text anywhere. Grep for lorem, TODO, FIXME, Test, asdf, and the designer's own name.
• No "clean and modern", "seamless", "elevate", "unlock", "supercharge".
• No dashes used as punctuation.
• Sentence case or title case, applied consistently rather than per component.
• Numbers, dates, and currency formatted for the actual locale.
• Error copy that says what to do next, not just what failed.
• Run the deslop tells from engine/reference/ai-slop-tells.md one last time.

Report

# Ship check: <what was checked>

## Verdict: GO / NO GO
<one line. If no go, name the single blocking issue.>

## Blockers (n)
**1. <claim>**
Gate: <which one>
Evidence: <the measurement or the file and line>
Fix: <exact>

## Should fix before ship (n)
<same shape>

## Noted, not blocking (n)
<one line each>

## Gates
Accessibility  PASS / FAIL / SKIPPED. <evidence, one line>
Responsive     ...
Dark mode      ...
States         ...
Motion         ...
Performance    ...
Copy and craft ...

## Not checked
<anything you could not verify, and what it would take. Never leave this implicit.>

Rules

• Do not fix in this skill. Report and hand to design-improve or design-motion. A gate that also patches loses the ability to tell you what was wrong.
• Evidence for every claim. A ratio, a file and line, a viewport width, a measured duration. "Contrast looks low" is not a finding.
• Say what you did not check. An unchecked gate reported as passed is worse than no gate. If you had no browser access, say the responsive gate was reasoned from code and is not verified.
• GO is a real verdict. If it clears, say GO and stop. Manufacturing a blocker to look thorough trains people to ignore the next one.