Odin Design

Use when starting UI work, defining palettes or tokens, fixing AI-generic UI, or persisting a design system to DESIGN.md (modes: implement, persist). Not for live URLs: use web-design-review.

Use when asked to prototype one design question through a cheap logic or UI experiment, including button-driven state-model checks. Not for polished artifacts: use polished-web-prototype.

Use when directing, building, or auditing React/Next.js Tailwind UI: visual direction, responsive/dark-mode retrofits, UX audits. Not for typography or motion: use typography-audit or ui-animation.

Use when asked to push an already-working artifact to finished composition, texture, and feel. Not for remote or irreversible changes. Not for hygiene routing: use clean-and-true.

Use when a human invokes this skill to build a webhook UI that wakes a bot. Not for unpreviewed or unapproved credential, host, Tailscale, deployment, remote, paid, or irreversible changes.

Use when asked to build spring, easing, gesture, and choreographed animations with correct physics and reduced-motion support. Not for auditing existing motion or finding animation opportunities.

Use when deciding what an interface should do before UI is built or audited: consequences, action scope, reachable states, naming, and accessibility. Not for visual implementation: use prototype.

Use when /design-variants generates distinct design directions and a gallery for selection. Not for one polished artifact: use polished-web-prototype. Not for token-system picking: use design.

Use when asked to audit typography across a codebase. Produces a file:line report with concrete fixes ordered by impact and flags unverifiable rules. Not for building a type system or token scale.

Use when the user invokes /ios-visual-review to audit an iOS app's visuals on a real device. Not for remote, credential, publish, deploy, or irreversible changes.

Use when a rendering path needs stable frame-time, CPU, GPU, and memory evidence against fixed targets. Not for one-shot profiling or visual quality review.

Use when asked to build or modify production-quality components, layouts, state, and pages with WCAG 2.1 AA and real content. Not for token-system design: use frontend-design-deslop.

Use when writing, editing, cleaning, or refactoring Tailwind classes, components, or configuration. Not for read-only audits of Tailwind code, or general CSS without Tailwind.

Use when the user requests an accessibility audit, a11y check, or WCAG compliance review. Don't use for tasks that require source or remote-system changes.

Use when creative work is requested with no approved design, or a raw idea or repository must be developed into an approved design document. Not for work with an approved design in context.

Use when an authorized reference surface needs a clean-room frontend reconstruction across static, motion, and responsive fidelity. Not for styling or component work without a reference surface.

Use when a visual needs repeatable fixed-view rendering and independent rubric scoring. Not for free-form visual review or subjective critique.

Use when thumbnail concepts need real-size, accuracy-first scoring without misleading claims. Not for generating thumbnails or declaring winners that fail the accuracy rubric.