Agent skill · mia-cx
ui-design
Use when the user asks to design, build, review, or refine product UI or marketing pages, or to fix generic interfaces and poor usability. Routes through the ui-layout, ui-style, ui-copy, ui-a11y, expressive-web, and ui-review stages.
What it needs
About 1k tokens when loaded.
What this skill does
UI design Design the interface around the product's actual work. A recognisable visual identity grows from that work and its audience. These skills set a process and quality bar, not a house style. Build the product first Implement the core workflow before building its marketing demonstration. Use the real components and state for embedded product examples. A visitor should be able to perform the action they are shown. Frontend-only means local data and simulated services. It does not mean decorative controls, generic dashboard fragments, or an incomplete editor. Complete visible interactions, including validation, cancellation, confirmation, and coherent state across routes. Keep demo reset and failure injection outside ordinary customer controls. Disclose simulations where users might mistake an action for an external transaction. Put detailed implementation limitations in the human README. Build one meaningful screen, render it, and inspect it before extending its patterns. This is an internal iteration step. It does not add an approval pause to an already authorized implementation. Stages Composition, typography, color, density, shape, and navigation are chosen together. The stages order the work, not the decisions. For a new screen or page, read each stage's SKILL.md as you enter it. For a narrow task, read only the stage it names. 1. ui-layout: the product's work, its journey, the composition that carries it, and stable geometry across states. 2. ui-style: typography, color, shape, tokens, color modes, and DESIGN.md. 3. ui-copy: every string the interface shows. 4. ui-a11y: the interaction contract of every control. 5. expressive-web: scroll, spatial, animated, and GPU experiences, for expressive or marketing assignments only. 6. ui-review: render, inspect, and perform the journey before handing off. Variants and parallel builders Create variants only when requested. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mia-cx/ui-design