Stark

Stark

Stark is a design router for AI coding agents. Use it to make product, platform, visual, interaction, and quality decisions before implementation.

Operating rule

Keep context proportional to the task:

1. Select no more than two routed skills.
2. Load two core references for the selected surface.
3. Add at most two conditional references for a specific risk or failure mode.
4. Load post-render gates only after rendered evidence exists.

Do not read the entire reference library. Use references/ui-patterns/README.md, references/ux-patterns/README.md, and references/web-patterns/README.md as catalogs when the tables below do not cover the request.

Route the request

Request	Routed skill
Web UI, landing page, dashboard, React, Next, Astro, Tailwind	skills/web-design/SKILL.md
Product flow, onboarding, checkout, IA, usability, forms	skills/ux-design/SKILL.md
Windows, WinUI, WPF, Fluent	skills/windows-design/SKILL.md
Apple, iOS, iPadOS, macOS, SwiftUI	skills/apple-design/SKILL.md
Android, Material, Jetpack Compose	skills/android-design/SKILL.md
Tauri, Electron, React Native, Flutter, CMP, shared UI	skills/cross-platform-design/SKILL.md
Design tokens, themes, token export	skills/design-tokens/SKILL.md
Platform is genuinely unclear	skills/design-router/SKILL.md

Combine UX with one platform skill when the request includes both workflow and implementation. Preserve the UX brief when platform guidance is applied.

Use scripts/detect_platform.py only as a deterministic fallback. Treat ambiguous as a request for one short clarification, not permission to default to web.

Select a reference bundle

Choose one primary bundle. Read its two core references. Add conditional references only when their trigger is present.

Product application

Core:

• references/ux-patterns/task-ergonomics.md
• references/ui-patterns/interaction-state-matrix.md

Conditional:

• Responsive or multi-viewport: references/ui-patterns/responsive-adaptation-gate.md
• Complex navigation: references/ui-patterns/navigation-information-architecture.md
• Direct manipulation: references/ui-patterns/interaction-physics-direct-manipulation.md
• Reusable components: references/ui-patterns/component-api-variant-contract.md

Landing page or product proof

Core:

• references/ui-patterns/creative-direction.md
• references/ui-patterns/page-proof-architecture.md

Conditional:

• Conversion or pricing: references/ui-patterns/conversion-proof-system.md
• Distinct identity: references/ui-patterns/brand-identity-motif-system.md
• Product media: references/ui-patterns/asset-realism-matrix.md
• Cinematic surface: references/ui-patterns/cinematic-landing-system.md

Animation-led surface

Core:

• references/ui-patterns/animation-creation.md
• references/ui-patterns/choreography-state-machine.md

Conditional:

• Library selection: references/ui-patterns/motion-library-playbooks.md
• Authored timelines or Rive/Lottie: references/ui-patterns/designer-authored-motion-handoff.md
• Heavy runtime: references/ui-patterns/performance-budget-contract.md
• Acceptance frames: references/ui-patterns/motion-frame-qa-contract.md

Dashboard or analytics

Core:

• references/ui-patterns/dashboard-insight-hierarchy.md
• references/ui-patterns/data-visualization-library-selection.md

Conditional:

• Realistic fixtures: references/ui-patterns/product-data-content-system.md
• Dense repeated work: references/ux-patterns/task-ergonomics.md
• Responsive replacement: references/ui-patterns/adaptive-composition-system.md
• Data states: references/ui-patterns/interaction-state-matrix.md

Design system or reusable library

Core:

• references/ui-patterns/design-system-production-loop.md
• references/ui-patterns/token-implementation-contract.md

Conditional:

• Public component API: references/ui-patterns/component-api-variant-contract.md
• State coverage: references/ui-patterns/component-state-gallery.md
• Theme and density: references/ui-patterns/theme-mode-density-system.md
• Automation: references/ui-patterns/frontend-quality-automation-gate.md

Audit or repair

Core:

• references/ui-patterns/ui-audit-rubric.md
• references/ui-patterns/visual-repair-playbook.md

Conditional:

• Usability concern: references/ux-patterns/usability-heuristic-evaluation.md
• Accessibility concern: references/ui-patterns/accessibility-acceptance-gate.md
• Generic or repetitive output: references/ui-patterns/design-fingerprint-diversity-gate.md
• Implementation drift: references/ui-patterns/implementation-review-loop.md

Research or reference-led work

Core:

• references/ui-patterns/reference-board-workflow.md
• references/ui-patterns/research-synthesis-contract.md

Conditional:

• Compare against a stronger example: references/ui-patterns/benchmark-repair-loop.md
• Avoid copying identity: references/ui-patterns/reference-analysis.md

First-run or risky flow

Core:

• references/ux-patterns/first-run-empty-state-system.md
• references/ux-patterns/task-flow-acceptance-harness.md

Conditional:

• Forms and validation: references/ui-patterns/form-state-validation-system.md
• Checkout or trust: references/ui-patterns/conversion-proof-system.md
• Permissions and accessibility: references/ui-patterns/accessibility-interaction-contract.md

Produce a compact decision brief

Before code, state:

• product job and primary user;
• target platform and implementation track;
• primary object and action;
• selected structural pattern;
• visual direction and one product-specific motif;
• required states and recovery path;
• responsive or native adaptation;
• motion level and library owner, if any;
• selected references and why they apply;
• acceptance evidence.

Keep this brief actionable. Do not turn it into a design essay.

Implement and validate in stages

1. Define the product object, primary action, states, and recovery.
2. Choose platform idiom and structural pattern.
3. Choose typography, material, assets, and motion according to the surface.
4. Implement in the user's existing stack unless a change is explicitly requested.
5. Inspect the rendered result.
6. Load only the relevant post-render gate:
   • visual: references/ui-patterns/rendered-quality-gate.md
   • usability: references/ux-patterns/rendered-usability-acceptance-gate.md
   • typography: references/ui-patterns/rendered-typography-quality-gate.md
   • advanced libraries: references/ui-patterns/capability-stack-rendered-gate.md
7. Apply the highest-impact repair and re-check the failed evidence.

Commands

Use command briefs when the user explicitly asks for one of these modes:

Mode	Command
General design	commands/stark.md
Audit	commands/stark-audit.md
Full design direction	commands/stark-director.md
Quality scoring	commands/stark-quality.md
Browser/runtime QA	commands/stark-qa.md
Release-quality gate	commands/stark-quality-gate.md
Usability	commands/stark-usability.md
Animation	commands/stark-animation.md
Assets	commands/stark-assets.md
Reference research	commands/stark-reference-board.md
Second attempt	commands/stark-regenerate.md
Design translation	commands/stark-translate.md
Dogfood evaluation	commands/stark-dogfood.md

Helper scripts

• Use scripts/detect_platform.py only when semantic platform routing remains ambiguous.
• Use scripts/token_export.py when converting Stark token bundles to CSS, Tailwind, SwiftUI, Compose, or WinUI.
• Maintainers use scripts/validate_repository.py and scripts/build_package.py; they are not part of normal design execution.

Guardrails

• Prefer product-specific structure over generic cards, gradients, and slogans.
• Do not force expressive landing-page composition onto repeated-use tools.
• Preserve keyboard, focus, semantics, reflow, reduced motion, and recovery paths.
• Treat advanced libraries as dependencies with an owner, fallback, budget, QA probe, and removal rule.
• Borrow principles from references, never trade dress, proprietary assets, or copied layouts.
• Do not claim rendered quality without rendered evidence.
• Keep the user's framework and conventions unless the request clearly authorizes a change.