# Dembrandt — UX pipeline orchestrator Human Guide

## What This Is For
Orchestrator for the full dembrandt UX pipeline. It gives the agent a clearer input/output frame for brand and messaging: what context to ask for, what decisions to make, and what usable artifact to return.

Use this as a human-readable version of the Dembrandt — UX pipeline orchestrator agent skill. It is meant for marketers, operators, founders, and other non-coders who want the workflow without reading agent-specific implementation instructions.

## When To Use This
- Use this when you need a repeatable process for dembrandt — UX pipeline orchestrator.
- Use this when the task needs judgment, examples, constraints, or a clear output format rather than a one-off prompt.
- Use this when you want to hand an AI assistant enough context to produce a usable marketing artifact.

## When Not To Use This
- Do not use this when you only need a quick factual answer.
- Do not use this when the work depends on private data you cannot share with the assistant.
- Do not use this as a replacement for legal, compliance, financial, or medical review.

## What You Need Before Starting
- The goal or business outcome you want.
- The audience, customer segment, or market context.
- Any source material the assistant should respect, such as notes, briefs, examples, URLs, or brand guidance.
- Constraints such as tone, length, channel, deadline, region, or approval requirements.
- A clear definition of what a good final answer should look like.

## Step-By-Step Workflow
1. State the job clearly: "Use the Dembrandt — UX pipeline orchestrator guide to help me with..."
2. Add context: audience, goal, offer, channel, source material, and constraints.
3. Ask the assistant to identify missing inputs before producing the final output.
4. Have the assistant follow the skill-specific guidance below.
5. Review the result against the final checklist and ask for revisions where needed.

## Skill-Specific Guidance
- 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 `generate-ui-from-brand` instead
- `brand-visual-language` — shape language, icon style, typography tone
- `algorithmic-color-palette` — derive states and brand-tinted greys from brand colours
- `color-mode-and-theme` — light vs dark vs combined, when to offer a theme selector
- `modular-scale-typography` — ratio-based type scales, minimum sizes, context-aware usage
- `elevation-and-depth` — shadow scale, border-radius, card and modal patterns
- `button-states` — six states: rest, hover, active, focus, disabled, loading
- `component-family-consistency` — buttons, inputs, pills: shared radius, colour, height
- `status-colors-and-errors` — minimal semantic colours, error recovery, prevention
- `layout-paradigms-and-consistency` — choose the layout paradigm that fits the content; reuse the same page skeleton across screens (macro-scale consistency)

## Decision Points And Nuance
The original skill emphasizes: Pipeline, Stage 1 — Brand Foundation, Stage 2 — Design Tokens & Scales, Stage 3 — Layout & Structure, Stage 4 — Components & Interaction, Stage 5 — UX Polish, Stage 6 — Accessibility & Technical Gate, Output, Relationship to `generate-ui-from-brand`.

Use these questions to steer the work:
- What is the intended audience or buyer?
- What source material must be preserved?
- What should the assistant optimize for: clarity, persuasion, accuracy, speed, creativity, or conversion?
- What examples represent the desired quality bar?
- What should the assistant avoid?

## Common Mistakes
- `scroll-areas` — avoid inner scroll, one axis only, user-controlled
- Hard ship gate. Do not skip or defer.
- **Gate:** Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.
- **Blockers** — fails a hard gate: WCAG 2.2 AA, a broken flow, a dead end. Must fix before ship.

## Copy-And-Paste Prompt
```text
Use the Dembrandt — UX pipeline orchestrator human guide.

My goal:
[Describe the business outcome]

Audience:
[Describe who this is for]

Context and source material:
[Paste notes, examples, links, or existing copy]

Constraints:
[Tone, length, channel, timeline, must-include items, must-avoid items]

Before producing the final output, ask me for any missing information that would materially improve the result.
```

## Final Checklist
- [ ] The output matches the original goal.
- [ ] The audience and context are reflected in the answer.
- [ ] Important constraints and source material were preserved.
- [ ] The assistant made the relevant decisions explicit.
- [ ] The final artifact is ready to use, review, or hand to the next person.

## Source
This guide was generated from the dembrandt/dembrandt-skills skill entry for `dembrandt`.

## Source Skill Notes
These notes preserve the nuance from the original skill. Use them as supporting reference when the workflow above feels too generic.

# dembrandt — UX Pipeline Orchestrator

> Concept by [@VictorGjn](https://github.com/VictorGjn).

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 `generate-ui-from-brand` instead

---

## Pipeline

### Stage 1 — Brand Foundation

Establish the visual language before making any token decisions.

Sub-skills (load as needed):
- `brand-visual-language` — shape language, icon style, typography tone
- `algorithmic-color-palette` — derive states and brand-tinted greys from brand colours
- `color-mode-and-theme` — 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):
- `modular-scale-typography` — ratio-based type scales, minimum sizes, context-aware usage
- `elevation-and-depth` — shadow scale, border-radius, card and modal patterns
- `button-states` — six states: rest, hover, active, focus, disabled, loading
- `component-family-consistency` — buttons, inputs, pills: shared radius, colour, height
- `status-colors-and-errors` — 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` — choose the layout paradigm that fits the content; reuse the same page skeleton across screens (macro-scale consistency)
- `gestalt-ui-organisation` — group related controls: proximity, similarity, common region
- `visual-emphasis-and-hierarchy` — one CTA per view, colour and size as emphasis
- `information-architecture` — naming, mental models, data UI, confirm dialogs
- `ui-context-and-scope` — hierarchy, breadcrumbs, colour regions, scope communication
- `responsive-paradigms` — mobile/tablet/desktop: nav, sections, sticky behaviour
- `ui-density` — match density to platform and user type
- `sticky-and-fixed-elements` — headers, bottom toolbars, z-index tokens
- `scroll-areas` — 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):
- `real-world-metaphors` — cards, carousels, drawers: when to use and how
- `tab-navigation` — tab types, overflow, keyboard nav, ARIA, state persistence
- `modal-and-overlay-patterns` — tooltip/popover/drawer/modal hierarchy, focus management, destructive confirm
- `form-design` — helper text, placeholder, validation, submit state
- `data-display-and-selection` — grid/list/table, large hit areas, mass actions
- `repeated-component-alignment` — repeated components as slot models: equal size, pinned anchors, clamp + recover overflowing text
- `operational-expert-tool-ui` — dense, workflow-driven UIs for trained daily B2B users
- `coordinated-data-views` — keep a table and a visual view (map, diagram, chart) synchronized
- `domain-expert-configuration` — expose solver/algorithm settings in domain language
- `authentic-product-representation` — real content and real output over staged mockups and marketing chrome
- `app-shell` — top bar, app launcher, tenant and environment cue, status bar: one shell across an estate
- `global-toolbar-controls` — currency, language, region and unit selectors