frontend-orchestrator

What this skill does

# Frontend Design Orchestrator

## Overview

The Frontend Design Orchestrator is your strategic guide for applying the philosophy of "uncommon care" to your digital product. Rather than randomly applying design skills, this orchestrator helps you understand where your application stands, what matters most right now, and which skills to deploy in what sequence.

This skill embodies the principle: **"Reduce until it's clear, refine until it's right."** It helps you identify what's essential for your current stage and focuses your effort there first.

## The 13 Frontend Design Skills

Your complete design system includes:

**Foundation Layer:**
1. **design-foundation** — Design tokens, system structure, principles
2. **design-engineer-mindset** — Bridge design and implementation, code as material

**Visual Layer:**
3. **layout-system** — Responsive layouts, grids, flexbox, container queries
4. **typography-system** — Type scales, hierarchy, readability
5. **color-system** — Color theory, accessibility, theming
6. **visual-hierarchy-refactoring** — Size, weight, contrast, whitespace, Gestalt principles

**Component Layer:**
7. **component-architecture** — Atomic design, composition, variants, documentation

**Interaction Layer:**
8. **interaction-physics** — Momentum, gestures, animation principles, implicit input
9. **loading-states** — Skeleton screens, spinners, progress bars, empty states
10. **error-handling-recovery** — Error messages, recovery workflows, graceful degradation
11. **performance-optimization** — Perceived latency, optimistic UI, Core Web Vitals

**Quality Layer:**
12. **accessibility-excellence** — WCAG compliance, semantic HTML, inclusive design
13. **frontend-orchestrator** — This skill - strategic coordination and sequencing

## Core Methodology: Design Maturity Assessment

Every application exists at one of five design maturity levels. Understanding your level is the first step to improvement.

### The Five Maturity Levels

**Level 1: Functional MVP**
Your application works. Users can accomplish their core goals. But the experience feels rough, inconsistent, or confusing. Design feels like an afterthought. This is where most startups begin.

**Level 2: Consistent Foundation**
You've established basic consistency. Components look similar, colors are somewhat coordinated, spacing has some logic. But the system isn't documented, and new features often break the pattern. Accessibility is partial or missing.

**Level 3: System-Driven**
You have a documented design system with tokens, components, and clear patterns. New features follow the system. Accessibility is integrated. But the system might feel generic, lacking personality or delight. Interactions feel mechanical.

**Level 4: Refined Experience**
Your system is mature and well-executed. Every detail has been considered. Interactions feel smooth and intentional. Accessibility is excellent. Users notice the care. But the experience might not yet feel timeless or anticipatory.

**Level 5: Transcendent Design**
This is rare. Your product doesn't just work well—it feels loved. The experience anticipates user needs. Every interaction delights. The design feels timeless, not trendy. Users recommend it not because they have to, but because they want to.

## The Orchestrator's Diagnostic Process

### Step 1: Current State Assessment

Before recommending skills, the orchestrator asks these diagnostic questions:

**Foundation Questions:**
- What is your primary goal right now? (Shipping fast, improving retention, reducing support tickets, building brand love?)
- How many users are actively using your product?
- What's your team's design maturity? (No designer, junior designer, experienced designer, design team?)
- How much technical debt do you have in your UI/CSS?

**Design System Questions:**
- Do you have a documented design system?
- Are you using a CSS framework (Tailwind, CSS-in-JS, vanilla CSS)?
- How consistent is your current design across the application?
- Do you have design tokens or design system documentation?

**User Experience Questions:**
- What's your biggest user frustration right now?
- How many accessibility issues have been reported?
- What's your mobile experience like compared to desktop?
- Do users comment on the feel or polish of your product?

**Interaction Questions:**
- How much thought has gone into animations and transitions?
- Do users understand what actions are available to them?
- How clear is your error messaging and feedback?
- Do interactions feel responsive and intentional?

**Performance Questions:**
- How fast does your application feel?
- Do users complain about loading times?
- Are there perceived performance issues?
- Do you measure Core Web Vitals?

### Step 2: Gap Analysis

Based on the assessment, the orchestrator identifies which skills will have the highest impact on your specific situation.

| Current State | Highest Impact Skill | Why | Secondary Skills |
| :--- | :--- | :--- | :--- |
| Functional MVP, no system | design-foundation | Establishing a foundation prevents future technical debt and enables faster, more consistent development. | layout-system, typography-system, design-engineer-mindset |
| Inconsistent design, partial system | design-foundation | Documenting and formalizing what exists prevents regressions and enables team alignment. | component-architecture, color-system, visual-hierarchy-refactoring |
| System exists, but feels generic | interaction-physics | Adding intentionality to interactions transforms a functional product into one that feels loved. | typography-system, accessibility-excellence, performance-optimization |
| Good system, poor accessibility | accessibility-excellence | Accessibility is foundational and affects all other skills. Fixing it first ensures all future work is accessible. | component-architecture, interaction-physics, error-handling-recovery |
| Mature system, needs refinement | interaction-physics, visual-hierarchy-refactoring | Refinement happens at the margins—in the details of how things move, feel, and communicate. | performance-optimization, loading-states, design-engineer-mindset |
| Users confused by interactions | error-handling-recovery, loading-states | Clear feedback and error messages reduce support tickets and improve confidence. | interaction-physics, performance-optimization |
| Slow perceived performance | performance-optimization | Perceived speed dramatically affects user satisfaction and retention. | loading-states, interaction-physics, design-engineer-mindset |

### Step 3: Skill Sequencing

The orchestrator recommends one of five implementation paths based on your situation:

**Path A: Building from Scratch (Functional MVP → Refined Experience)**
1. design-foundation — Establish tokens, system structure, component library
2. design-engineer-mindset — Understand code as design material
3. layout-system — Create responsive, accessible layout patterns
4. typography-system — Define type scales and hierarchy
5. visual-hierarchy-refactoring — Establish clear visual hierarchy through size, weight, contrast
6. color-system — Establish color system with accessibility in mind
7. component-architecture — Build reusable, well-documented components
8. loading-states — Design loading and empty states
9. error-handling-recovery — Design error states and recovery
10. interaction-physics — Add intentionality to animations and transitions
11. performance-optimization — Optimize perceived performance
12. accessibility-excellence — Audit and improve accessibility across all layers

**Path B: Formalizing Existing Design (Inconsistent → System-Driven)**
1. design-foundation — Document and formalize existing patterns
2. visual-hierarchy-refactoring — Audit and improve visual hierarchy
3. component-architecture — Extract and document existing components
4. layout-system — Audit and standardize layout patterns
5. typography-system — Audit and standardize typography
6. color-system — Audit and stan