design-flow

Plugin design-flow from marketplace claude-skills in fmanimashaun/claude-skills. Commands read from the repo's manifest — 21 days ago.

Slash commands (13)

• /design-flow:assets

  Set up and drive the curated asset library — scaffold config, read the brief, plan what the product needs, generate what is outstanding, and keep the plan honest as the product grows.

• /design-flow:audit

  Audit UI against the design system — flag drift (raw/brand colors in components, brittle selectors, breakpoint misuse where an intrinsic primitive fits, missing focus ring/ARIA, non-min-h-touch targets, hand-rolled layout CSS) and propose fixes. Optional browser mode measures conformance on the REND

• /design-flow:canvas

  Compose a Claude Design prompt for one surface that carries this project's own tokens, component catalog and band sequence — so the canvas comes back speaking the system and the port is a reconciliation rather than a translation. Saves to docs/design/prompts/.

• /design-flow:component

  Author or refactor a UI component per the design system — compose layout primitives + semantic role tokens, apply the variant/size/state vocabulary, add a11y and prescribed responsive behavior.

• /design-flow:compose

  Generate the composition brief for one surface — which owned asset fills which band, at what tone, and which bands have nothing — from the project's own research, anatomy and manifest.

• /design-flow:critique

  Critique UI look-and-feel against the art-direction doctrine — visual hierarchy, focal point, per-surface aesthetic intent — and return ranked, concrete improvements. Advisory; never blocks.

• /design-flow:generate

  Generate an illustration or decorative asset for a surface — only after tiers 1–2 are ruled out, with a derived prompt, a declared model ladder and a budget that refuses.

• /design-flow:interface-audit

  Audit a running app's screens against the interface architecture rules; findings cite rule and authority.

• /design-flow:mobile

  Scaffold native-shell parity (Phase 2) into the app through its UI adapter — native-app detection + body flags, JSON path configuration, bridge components, safe-area + min-h-touch wiring, and table->summary cards. Reuses the existing design system; the native shells stay in their own repos.

• /design-flow:port

  Port a Claude Design output — JSX/TSX, or a `<x-dc>` canvas export — into this app, faithful to the design and aligned to the design system by construction. Dispatches to the UI adapter's porter agent.

• /design-flow:setup

  Scaffold the design system into the project through its UI adapter — token architecture (brand primitives -> semantic roles -> Utopia fluid scale), layout-primitive recipes, base components, dark mode. Idempotent; brand-parameterized.

• /design-flow:tokens

  Export native design tokens (Phase 3) from the app's token source of truth — generate Android (colors.xml + Theme.Fidara) and iOS (SwiftUI Color) token files so fully-native screens match the web by construction. Writes to tmp/; does NOT modify native app repos.

• /design-flow:variants

  Generate N brand-conformant compositions of one brief plus a dev-only switcher route — so an aesthetic decision is made by comparing real screens, not by approving a single output.

Subagents (6)

• brand-guardian

  Enforces brand correctness for the active brand pack — token usage, logo/mark rules, iconography (Lucide), typography roles, and the two-brand (one-system) model. Use when adding brand elements (logos, marketing surfaces), setting up a project's brand, or reviewing brand fidelity.

• design-auditor

  The UI consistency gate. Reviews views/components against the design system and reports drift — raw/brand colors in components, hand-rolled layout CSS, breakpoint misuse, missing a11y, off-catalog variants — with file:line and the exact fix. Use via /design-flow:audit and in UI review. Complements r

• design-critic

  The art-direction LENS, not a gate. Judges look-and-feel — visual hierarchy and focal point, per-surface aesthetic intent (marketing = emotion, dense app = clarity), whether a surface reads as considered or mechanically assembled — and returns concrete, ranked improvements. Never pass/fail, never a

• interface-auditor

  Audits a running app against the interface architecture rules. Use via /design-flow:interface-audit.

• rails-ui-composer

  Builds and refactors UI (views, components, screens) for Rails 8 + Hotwire + Tailwind v4 by COMPOSING the design system — layout primitives + semantic role tokens + catalog variants — never freehand CSS. Use via /design-flow:component, or whenever authoring UI in a design-system project.

• rails-ui-porter

  Ports a Claude Design output — React/JSX/TSX, or a `<x-dc>` canvas export with a `:root` token block, inline styles and a CDN font — into a Rails 8 + Hotwire app: faithful to the design AND aligned to the design-system system by construction. Use when translating a Claude Design canvas or JSX mockup

Hooks (1)

• PostToolUse

  /bin/bash -p "${CLAUDE_PLUGIN_ROOT}/hooks/scripts/design-tells.sh"

Similar plugins