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:

design-foundation — Design tokens, system structure, principles
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)

design-foundation — Establish tokens, system structure, component library
design-engineer-mindset — Understand code as design material
layout-system — Create responsive, accessible layout patterns
typography-system — Define type scales and hierarchy
visual-hierarchy-refactoring — Establish clear visual hierarchy through size, weight, contrast
color-system — Establish color system with accessibility in mind
component-architecture — Build reusable, well-documented components
loading-states — Design loading and empty states
error-handling-recovery — Design error states and recovery
interaction-physics — Add intentionality to animations and transitions
performance-optimization — Optimize perceived performance
accessibility-excellence — Audit and improve accessibility across all layers

Path B: Formalizing Existing Design (Inconsistent → System-Driven)

design-foundation — Document and formalize existing patterns
visual-hierarchy-refactoring — Audit and improve visual hierarchy
component-architecture — Extract and document existing components
layout-system — Audit and standardize layout patterns
typography-system — Audit and standardize typography
color-system — Audit and standardize color usage
design-engineer-mindset — Establish design-code alignment
accessibility-excellence — Audit and improve accessibility
loading-states — Standardize loading and empty states
error-handling-recovery — Standardize error handling
interaction-physics — Add intentionality to interactions
performance-optimization — Optimize perceived performance

Path C: Improving Mature System (System-Driven → Transcendent)

design-engineer-mindset — Deepen implementation fidelity
interaction-physics — Add delight and intentionality
visual-hierarchy-refactoring — Refine visual hierarchy
performance-optimization — Optimize perceived performance
loading-states — Enhance loading state design
error-handling-recovery — Enhance error state design
accessibility-excellence — Audit and enhance accessibility
typography-system — Refine typography and readability
color-system — Refine color system and theming
component-architecture — Enhance component library

Path D: Fixing Performance Issues (Slow → Responsive)

performance-optimization — Measure and optimize perceived latency
design-engineer-mindset — Understand rendering pipeline
loading-states — Implement skeleton screens and progress bars
interaction-physics — Optimize animation performance
error-handling-recovery — Improve error feedback
accessibility-excellence — Ensure accessibility during optimization

Path E: Improving Accessibility (Partial → Excellent)

accessibility-excellence — Audit and establish accessibility baseline
error-handling-recovery — Ensure error messages are accessible
loading-states — Ensure loading states are accessible
component-architecture — Build accessible components
interaction-physics — Ensure animations respect prefers-reduced-motion
visual-hierarchy-refactoring — Ensure sufficient contrast and hierarchy
typography-system — Ensure readable typography
performance-optimization — Ensure performance doesn't impact accessibility

How to Use the Orchestrator

Step 1: Assess Your Current State

Ask yourself these questions:

What's your design maturity level? (1-5)
What's your biggest pain point? (Inconsistency, performance, accessibility, interactions, etc.)
What's your primary goal? (Ship fast, improve retention, build brand love, etc.)
What's your team size and expertise? (Solo developer, junior designer, experienced team, etc.)

Step 2: Choose Your Path

Based on your assessment, select the path that matches your situation:

Path A if you're building from scratch
Path B if you have inconsistent design you want to formalize
Path C if you have a mature system you want to refine
Path D if performance is your main issue
Path E if accessibility is your main issue

Step 3: Follow the Sequence

Work through the skills in the recommended order. Each skill builds on the previous ones.

Step 4: Iterate and Refine

After implementing each skill, assess your progress. You may need to revisit earlier skills or adjust your path based on what you learn.

Integration Between Skills

Foundation Skills Enable All Others

design-foundation provides tokens used by all other skills
design-engineer-mindset ensures fidelity across all implementations

Visual Skills Work Together

layout-system creates structure
typography-system establishes hierarchy
color-system adds visual interest
visual-hierarchy-refactoring ties them together

Interaction Skills Create Delight

interaction-physics makes interactions feel natural
loading-states maintain confidence during waits
error-handling-recovery guide users to resolution
performance-optimization make everything feel fast

Quality Skills Ensure Excellence

accessibility-excellence ensures everyone can use your product
frontend-orchestrator ensures strategic coordination

How to Use This Skill with Claude Code

Automatic Skill Invocation

After assessing the user's situation and recommending a path, ask the user if they want you to automatically invoke the recommended skills in sequence. For example:

"Based on your assessment, I recommend Path B with these skills:
1. design-foundation
2. visual-hierarchy-refactoring
3. component-architecture
...

Would you like me to run these skills now? I'll invoke each one in sequence to analyze your codebase and provide specific recommendations."

If the user agrees, invoke each recommended skill using the /skill-name command (e.g., /design-foundation, /interaction-physics). Work through them in the recommended order, applying each skill's methodology to the user's specific codebase.

Get a Personalized Roadmap

"I'm using the frontend-orchestrator skill. Can you help me:
- Assess my current design maturity
- Identify my biggest pain points
- Recommend a skill sequence
- Then run the recommended skills automatically"

Diagnose Design Issues

"My users are complaining about [issue]. Using the orchestrator:
- What's the root cause?
- Which skills would help?
- What should I prioritize?"

Plan a Design System

"Can you help me plan a design system using the orchestrator?
- Assess my current state
- Recommend a path
- Create a step-by-step guide
- Estimate effort for each skill"

Key Principles

1. Start Where You Are Don't try to implement all skills at once. Start with the highest-impact skill for your situation.

2. Build Momentum Early wins create confidence and buy-in for continued improvement.

3. Iterate, Don't Perfectionism Each skill can be refined later. Get the basics right first.

4. Measure Progress Track improvements in user satisfaction, support tickets, and retention.

5. Celebrate Refinement The journey from MVP to transcendent design is a marathon, not a sprint.

Checklist: Are You Ready to Begin?

I've assessed my current design maturity level
I've identified my biggest pain point
I've chosen my implementation path
I understand the sequence of skills
I know which skill to start with
I have a team or resources to implement
I'm ready to commit to the journey

The orchestrator's role is to guide you from where you are to where you want to be. Start with the next skill in your path.