oh-my-ai/uiux
Self-contained UI/UX design intelligence: priority ladder, design reference (style, color, type, landing, charts, perf), polish checks, file-first design-system artifacts; deep defaults on React, Next.js, Tailwind, RN, Flutter.
94
94%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
deliverables.mdrules/
- name:
- deliverables
- description:
- File-first outputs — design system master, page overrides, tokens, and component specs.
File-first deliverables
When the task changes how a product looks, feels, moves, or behaves for users, write or update files in the target project (do not rely on chat-only advice for non-trivial work).
1. design-system/MASTER.md (global source of truth)
Create at the project root unless the repo already stores design docs elsewhere — then match existing layout and link from README or AGENTS.md if present.
Use this skeleton:
# Design system — MASTER
## Product context
- Product type:
- Primary audience:
- Platforms: (web / iOS / Android — via RN or Flutter)
## Stack
Record the **actual** framework(s) for this product (e.g. React, Next.js, Tailwind, Vue, Svelte, SwiftUI, React Native, Flutter). If contributors switch stacks, note constraints and token mapping here.
## Visual direction
- Style keywords: (e.g. minimal, dense dashboard, playful consumer)
- Elevation/shape: (radius scale, shadow tiers)
- Icon set: (e.g. Lucide, Heroicons, Material Symbols — one family)
## Semantic tokens
- Color roles: primary, secondary, danger, success, surface, on-surface, border, muted
- Typography roles: display, title, body, label, code
- Spacing scale: (e.g. 4/8 base)
- Motion: durations and easing tokens; reduced-motion behavior
## Layout rules
- Breakpoints: ...
- Max content width: ...
- Grid / spacing rhythm: ...
## Components (inventory)
For each: states (default, hover/focus, active, disabled, loading), a11y notes, and stack-specific implementation hints.
## Anti-patterns (project-specific)
- ...
## Review checklist
Link or embed the pre-delivery checklist from the main skill.2. design-system/pages/<page-slug>.md (optional overrides)
Use when a screen deviates from MASTER (e.g. marketing landing vs. dense admin).
# Page override — <page-slug>
## Deviations from MASTER
- ...
## Layout specifics
- ...
## Content priorities (mobile → desktop)
- ...3. design-system/tokens (optional but recommended)
Prefer one of:
- Tailwind:
tailwind.config+ CSS variables in:root/.dark - RN:
theme.tsor platform design-tokens module consumed by styled components / StyleSheet factories - Flutter:
ThemeData+ColorSchemein a single module
Document the mapping in MASTER.md under Semantic tokens.
4. Component spec (design-system/components/<name>.md)
For new or refactored components:
# Component — <Name>
## Purpose & anatomy
## Props / API
## States & interactions
## Accessibility
## Stack notes (React / Next / Tailwind / RN / Flutter)
## References in codebaseRetrieval prompt (for later sessions)
When files exist, tell the user (or the agent) to load:
design-system/MASTER.mddesign-system/pages/<page>.mdif present- Relevant
design-system/components/<name>.md
Page overrides win over MASTER for conflicting rules.