dembrandt — UX Pipeline Orchestrator
Routes multi-concern UI/UX tasks through six ordered stages. Each stage loads sub-skills on demand — only what the task actually needs.
When to use this skill vs a sub-skill directly:
- Multi-concern task ("design review", "audit interface", "build UI") → use this orchestrator
- Single-concern task ("check my colour palette", "review button states") → go directly to the sub-skill
- Brand-to-token-to-spec pipeline with a URL or DESIGN.md → use instead
Pipeline
Stage 1 — Brand Foundation
Establish the visual language before making any token decisions.
Sub-skills (load as needed):
- — shape language, icon style, typography tone
algorithmic-color-palette
- — light vs dark vs combined, when to offer a theme selector
Gate: Brand tone and colour system agreed before proceeding.
Stage 2 — Design Tokens & Scales
Pin the numeric system so all components share a common foundation.
Sub-skills (load as needed):
- — ratio-based type scales, minimum sizes, context-aware usage
- — shadow scale, border-radius, card and modal patterns
- — six states: rest, hover, active, focus, disabled, loading
component-family-consistency
- — minimal semantic colours, error recovery, prevention
Gate: Tokens defined and consistent across component family.
Stage 3 — Layout & Structure
Apply layout decisions to the specific product context.
Sub-skills (load as needed):
layout-paradigms-and-consistency
- — group related controls: proximity, similarity, common region
visual-emphasis-and-hierarchy
- — naming, mental models, data UI, confirm dialogs
- — hierarchy, breadcrumbs, colour regions, scope communication
- — mobile/tablet/desktop: nav, sections, sticky behaviour
- — match density to platform and user type
sticky-and-fixed-elements
- — avoid inner scroll, one axis only, user-controlled
Gate: Layout is coherent across breakpoints and user contexts.
Stage 4 — Components & Interaction
Review component patterns and interactive states.
Sub-skills (load as needed):
- — cards, carousels, drawers: when to use and how
- — tab types, overflow, keyboard nav, ARIA, state persistence
modal-and-overlay-patterns
- — helper text, placeholder, validation, submit state
data-display-and-selection
repeated-component-alignment
operational-expert-tool-ui
- — keep a table and a visual view (map, diagram, chart) synchronized
domain-expert-configuration
authentic-product-representation
- — currency, language, locale: placement and typography
notifications-and-recovery
Gate: All interactive states handled; no dead ends.
Stage 5 — UX Polish
Apply UX principles and motion to sharpen perceived quality.
Sub-skills (load as needed):
nielsen-usability-heuristics
user-flows-and-guided-paths
- — animated icons, toggles, reveals, celebrations
loading-states-and-perceived-performance
- — Disney principles and cinematic language in UI
Gate: Flow is legible end-to-end; perceived performance is acceptable.
Stage 6 — Accessibility & Technical Gate
Hard ship gate. Do not skip or defer.
Sub-skills (load as needed):
- — WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA
- — HTML5, alt texts, Open Graph, progressive enhancement
performance-and-web-vitals
Gate: Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.
Output
Produce one structured review, not a stream of loose comments. Group findings by severity, most blocking first:
- Blockers — fails a hard gate: WCAG 2.2 AA, a broken flow, a dead end. Must fix before ship.
- Major — breaks consistency, hierarchy, or a core UX principle. Fix this iteration.
- Minor — polish, micro-interactions, perceived-performance refinements. Backlog.
For each finding give the stage it came from, the specific element, what is wrong, and the concrete fix.
Run only the stages the task needs. An existing product with settled brand and tokens starts at Stage 3; a pure accessibility pass runs Stage 6 alone. State which stages you ran and which you skipped, and why.
Relationship to
is a token-extraction pipeline: URL or DESIGN.md → tokens → UI spec. It overlaps stages 1–2 of this orchestrator. Use it when you have a brand source and need a concrete spec. Use this orchestrator when you are reviewing or building across the full stack of UX concerns without a specific brand-extraction starting point.