# Dembrandt > > - **Type:** Skill - **Install:** `agentstack add skill-dembrandt-dembrandt-skills-dembrandt` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [dembrandt](https://agentstack.voostack.com/s/dembrandt) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [dembrandt](https://github.com/dembrandt) - **Source:** https://github.com/dembrandt/dembrandt-skills/tree/main/skills/dembrandt ## Install ```sh agentstack add skill-dembrandt-dembrandt-skills-dembrandt ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # 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 - `form-design` — helper text, placeholder, validation, submit state - `data-display-and-selection` — grid/list/table, large hit areas, mass actions - `global-toolbar-controls` — currency, language, locale: placement and typography - `notifications-and-recovery` — toasts, banners, retry, undo — always a path forward **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` — 10 usability principles with review checklists - `user-flows-and-guided-paths` — wizards, purchase flows, onboarding sequences - `micro-interactions` — animated icons, toggles, reveals, celebrations - `loading-states-and-perceived-performance` — spinners, skeleton screens, staggered entry - `motion-and-storytelling` — 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-accessibility` — WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA - `semantic-html-and-seo` — HTML5, alt texts, Open Graph, progressive enhancement - `performance-and-web-vitals` — Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading **Gate:** Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025. --- ## Relationship to `generate-ui-from-brand` `generate-ui-from-brand` 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. ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [dembrandt](https://github.com/dembrandt) - **Source:** [dembrandt/dembrandt-skills](https://github.com/dembrandt/dembrandt-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-dembrandt-dembrandt-skills-dembrandt - Seller: https://agentstack.voostack.com/s/dembrandt - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.