Ui Master

UI Master (V2 Orchestrator)

Mission

ui-master is the central orchestration engine. It enforces a strict, pipeline-driven process that elevates UI from generic "prompt-to-code" slop into a measurable, iterative, and deeply intentional design system.

The V2 Pipeline

For any substantial UI task, you MUST execute this exact sequence. Do not skip steps.

textCopy code
Brief
  ↓
Visitor Mode Classification (Persuade | Operate | Read | Experience)
  ↓
Design Read (via ui-creative-director)
  ↓
Reference Analysis (via ui-reference-first)
  ↓
Design Dials (via ui-design-dials)
  ↓
Design System (via ui-design-memory / tokens)
  ↓
Composition Plan (via ui-composition-engine)
  ↓
Media Plan (via ui-media-composition)
  ↓
Scroll Story Plan (via ui-scroll-storytelling)
  ↓
Asset Plan (via ui-assets)
  ↓
Craft Floor Baseline (Theming, Elevation, Typography)
  ↓
Implementation (via ui-web / ui-react / ui-mobile / ui-flutter)
  ↓
Motion (via ui-motion / ui-cinematic-motion)
  ↓
Responsive (via ui-layout-responsive)
  ↓
Accessibility (via ui-accessibility)
  ↓
Visual Render (via ui-visual-qa)
  ↓
Visual Critic (via ui-visual-critic)
  ↓
Fix (Loop until Critic Score >= 8)
  ↓
Re-render
  ↓
Pre-flight (via ui-preflight)
  ↓
Final UI Task Complete

Pipeline Execution Rules

• Context Loading: Before starting any step marked with (via skill-name), you MUST use the view_file tool to read the SKILL.md of that specific skill. Do not hallucinate or guess the rules of other skills.
• Strict Progression: Do not proceed to the Implementation step (via ui-web, ui-react, etc.) until the Composition Plan, Media Plan, and Scroll Story Plan have been explicitly formulated and approved.

Core Design Principles

1. Visitor Mode Discipline: Categorize the surface into Persuade, Operate, Read, or Experience. Design decisions must serve the mode (e.g. no landing-page bento boxes in high-density Operate dashboards).
2. The Craft Floor: Ensure browser surface theming (selection, scrollbars, focus), single elevation discipline (no ghost cards), logical typography measure (65-75ch), and tabular nums for data.
3. Media-First Visual Storytelling (Use More Images Than Icons): Maximize use of IMAGE, VIDEO, ILLUSTRATION, DIAGRAM, and TYPOGRAPHY. Whenever building websites, apps, or UI, use more and more images than icons. Icons are strictly utility elements for navigation and small actions, NEVER the primary visual storytelling language.
4. Zero Pills (Strictly Forbidden): Do NOT create pills. Strictly avoid rounded-full pill badges, floating pill tags, pill chips, or pill containers (px-3 py-1 rounded-full). Use clean typographic hierarchy, micro-borders, or spatial layout instead.
5. No Background Color Behind Icons (Strictly Forbidden): Do NOT add background colors, tinted boxes, colored circles, square containers, or glass tiles behind icons (e.g. bg-primary/10 rounded-xl p-3). Icons must sit directly on the surface or inline with copy without decorative box fills.
6. Intentional Scroll Storytelling: Use scroll interactions (pins, reveals, video scrubs, parallax) only where they elevate the narrative. Never animate every section simply because the capability exists.
7. Strict Media/Scroll Pre-Planning: Media Plan and Scroll Story Plan MUST be defined before writing implementation code.
8. Iterative Adversarial Loop: Do not treat generation as a one-shot task. The CRITIC → FIX → RENDER loop is mandatory.

WEBSITE DEFAULT

When creating a website:

Do not begin with a conventional hero template.

First answer: "What is the visual idea of this hero?"

Then determine:

• primary media
• composition
• interaction
• motion
• depth
• scroll behavior
• mobile translation
• reduced-motion fallback

Only then implement the hero.

INTERACTIVE HERO MANDATE

For website UI tasks, DO NOT default to:

• centered headline
• subtitle
• two buttons
• static image
• generic gradient background
• empty whitespace
• generic SaaS hero template

The default hero must be an intentional visual experience.

REQUIRED:

1. A product-specific visual concept.
2. Meaningful imagery, product render, illustration, video, diagram, environmental scene, or other rich media.
3. Purposeful motion or interaction.
4. Strong visual depth/layering where appropriate.
5. Responsive behavior that preserves the concept on mobile.

PREFERRED:

• animated image layers
• parallax depth
• cursor/reactive visuals
• scroll-linked transformation
• video or frame sequencing
• interactive product visualization
• layered typography/media choreography
• animated diagrams
• Rive/Lottie interactive visual objects where they add meaning

The hero should communicate the product before the user reads every word.

Do not add animation merely to satisfy this rule. Motion must reinforce hierarchy, product meaning, spatial depth, interaction, or storytelling.

Execution & Reporting Requirements

At the conclusion of every UI task, the agent must output a structured execution report by creating a Markdown artifact named ui_execution_report.md. This ensures the plan is persisted for the user:

textCopy code
DESIGN DIALS
SCROLL_INTERACTION: [1-10]
MEDIA_PROMINENCE: [1-10]
CINEMATIC_INTENSITY: [1-10]
BENTO_COMPLEXITY: [1-10]

MEDIA PLAN:
[Summary of media types, roles, scales, and treatments - images prioritized over icons]

SCROLL STORY:
[Summary of scroll patterns, sticky/pinned behaviors, choreography]

MOTION:
[Summary of micro, standard, and cinematic motion implementations]

VIDEO: [Used / Not Used]
PARALLAX: [Used / Not Used]
STICKY/PINNED: [Used / Not Used]

VISUAL QA:
[Responsive render verification across mobile and desktop]

REDUCED MOTION:
[Verification of prefers-reduced-motion fallback]

MOBILE FALLBACK:
[Strategy for mobile recomposition and scroll fallback]

ANTI-SLOP:
[Verification that generic AI tropes, pill badges/chips, icon background containers, and repetitive icon cards were eliminated]

PRE-FLIGHT:
PASS / FAIL [All binary pre-flight gates passed]