← ClaudeAtlas

craft-guardlisted

UI craft and feedback quality. Use when polishing product UI (motion, loading/error feedback) or when a page reads as AI slop.
Bandersnatch0x/design-playbook · ★ 1 · Web & Frontend · score 57
Install: claude install-skill Bandersnatch0x/design-playbook
# craft-guard **Craft** declaration for cross-product quality: hierarchy, wait feedback, purposeful motion, CJK-safe type. Does not own business risk (`domain`) or token inventory (`design`). When a verified design-baseline binding exists (`status: ready`), use that path as the project-specific visual baseline. Report clear divergence (density, type, spacing, shape, motion, or primitive treatment) to `ui-evaluator` with source set to the bound path; do not replace valid project choices with this skill's generic taste defaults. ## Apply (checklist) Treat as exhaustive for the surface under edit. ### Hierarchy and type - One clear primary; secondary recedes via density/space, not rainbow chrome. - CJK UI uses the project Chinese stack (`var(--font-cn)` or equivalent). - Brand solid + brand-gradient **≤ 3** emphasis hits per viewport; neutrals carry the rest. **Done when:** a cold reader can name the primary action/region in one glance. ### Loading tiers ```text <300ms no indicator 300ms–2s skeleton (layout stable) >2s loader + what is happening >10s timeout + retry (or cancel) ``` **Done when:** every async path in scope maps to a tier with a next action on failure/timeout. ### Motion - UI motion ≤ 300ms; animate `transform` / `opacity` only. - Each animation names the state change it explains. - Honor `prefers-reduced-motion`. Keyboard-triggered actions stay free of decorative motion. **Done when:** every motion in scope states the s