odin-design

Plugin odin-design from marketplace odin-marketplace in OutlineDriven/odin-claude-plugin. Commands read from the repo's manifest — 1 month ago.

Skills (21)

• design-gate-brainstorming

  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.

• design-variants

  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.

• 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.

• final-grain

  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.

• fixed-view-visual-benchmark

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

• frame-rate-stability

  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.

• frontend-design-deslop

  Use when a user builds or styles a web frontend or asks to make it not look AI-generated. Not for component-level UI work without the token system: use frontend-ui-engineering.

• frontend-fidelity-rebuild

  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.

• frontend-ui-engineering

  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.

• ios-visual-review

  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.

• make-bot-ui

  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.

• polished-web-prototype

  Use when /polished-web-prototype runs or a user builds an artifact from a mockup, design plan, or brief. Not for variant galleries: use design-variants. Not for live audits: use web-design-review.

• product-design

  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.

• prototype

  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.

• tailwind-best-practices

  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.

• thumbnail-accuracy-scorecard

  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.

• typography-audit

  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.

• ui-animation

  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.

• ui-design

  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.

• web-accessibility-audit

  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.

• web-design-review

  Use when the user runs /web-design-review with a URL to visually audit and fix a live UI. Not for design direction: use design. Not for variant galleries: use design-variants.

Similar plugins