← ClaudeAtlas

design-shiplisted

Pre ship design gate. Runs the final craft check across accessibility, contrast, responsive breakpoints, dark mode, every interactive and data state, motion, and performance, then reports a go or no go with blockers. Use when asked if something is ready to ship, for a final design check or QA pass, whether a UI holds up on mobile or in dark mode, or before a release or deploy.
AnimaEcho/dstack · ★ 0 · Web & Frontend · score 70
Install: claude install-skill AnimaEcho/dstack
# 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 ```bash 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 min