{"id":"6daad584-3579-4915-8336-2adbb9270b7a","shortId":"keyRL6","kind":"skill","title":"dembrandt","tagline":"Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout → components → UX polish → accessibility gate — loading the right sub-skill at each stage. Use when the task spans multiple design concerns:","description":"# dembrandt — UX Pipeline Orchestrator\n\n> Concept by [@VictorGjn](https://github.com/VictorGjn).\n\nRoutes multi-concern UI/UX tasks through six ordered stages. Each stage loads sub-skills on demand — only what the task actually needs.\n\n**When to use this skill vs a sub-skill directly:**\n\n- Multi-concern task (\"design review\", \"audit interface\", \"build UI\") → use this orchestrator\n- Single-concern task (\"check my colour palette\", \"review button states\") → go directly to the sub-skill\n- Brand-to-token-to-spec pipeline with a URL or DESIGN.md → use `generate-ui-from-brand` instead\n\n---\n\n## Pipeline\n\n### Stage 1 — Brand Foundation\n\nEstablish the visual language before making any token decisions.\n\nSub-skills (load as needed):\n- `brand-visual-language` — shape language, icon style, typography tone\n- `algorithmic-color-palette` — derive states and brand-tinted greys from brand colours\n- `color-mode-and-theme` — light vs dark vs combined, when to offer a theme selector\n\n**Gate:** Brand tone and colour system agreed before proceeding.\n\n---\n\n### Stage 2 — Design Tokens & Scales\n\nPin the numeric system so all components share a common foundation.\n\nSub-skills (load as needed):\n- `modular-scale-typography` — ratio-based type scales, minimum sizes, context-aware usage\n- `elevation-and-depth` — shadow scale, border-radius, card and modal patterns\n- `button-states` — six states: rest, hover, active, focus, disabled, loading\n- `component-family-consistency` — buttons, inputs, pills: shared radius, colour, height\n- `status-colors-and-errors` — minimal semantic colours, error recovery, prevention\n\n**Gate:** Tokens defined and consistent across component family.\n\n---\n\n### Stage 3 — Layout & Structure\n\nApply layout decisions to the specific product context.\n\nSub-skills (load as needed):\n- `gestalt-ui-organisation` — group related controls: proximity, similarity, common region\n- `visual-emphasis-and-hierarchy` — one CTA per view, colour and size as emphasis\n- `information-architecture` — naming, mental models, data UI, confirm dialogs\n- `ui-context-and-scope` — hierarchy, breadcrumbs, colour regions, scope communication\n- `responsive-paradigms` — mobile/tablet/desktop: nav, sections, sticky behaviour\n- `ui-density` — match density to platform and user type\n- `sticky-and-fixed-elements` — headers, bottom toolbars, z-index tokens\n- `scroll-areas` — avoid inner scroll, one axis only, user-controlled\n\n**Gate:** Layout is coherent across breakpoints and user contexts.\n\n---\n\n### Stage 4 — Components & Interaction\n\nReview component patterns and interactive states.\n\nSub-skills (load as needed):\n- `real-world-metaphors` — cards, carousels, drawers: when to use and how\n- `form-design` — helper text, placeholder, validation, submit state\n- `data-display-and-selection` — grid/list/table, large hit areas, mass actions\n- `global-toolbar-controls` — currency, language, locale: placement and typography\n- `notifications-and-recovery` — toasts, banners, retry, undo — always a path forward\n\n**Gate:** All interactive states handled; no dead ends.\n\n---\n\n### Stage 5 — UX Polish\n\nApply UX principles and motion to sharpen perceived quality.\n\nSub-skills (load as needed):\n- `nielsen-usability-heuristics` — 10 usability principles with review checklists\n- `user-flows-and-guided-paths` — wizards, purchase flows, onboarding sequences\n- `micro-interactions` — animated icons, toggles, reveals, celebrations\n- `loading-states-and-perceived-performance` — spinners, skeleton screens, staggered entry\n- `motion-and-storytelling` — Disney principles and cinematic language in UI\n\n**Gate:** Flow is legible end-to-end; perceived performance is acceptable.\n\n---\n\n### Stage 6 — Accessibility & Technical Gate\n\nHard ship gate. Do not skip or defer.\n\nSub-skills (load as needed):\n- `wcag-accessibility` — WCAG 2.2 AA / EN 301 549: contrast, keyboard, ARIA\n- `semantic-html-and-seo` — HTML5, alt texts, Open Graph, progressive enhancement\n- `performance-and-web-vitals` — Lighthouse audit, LCP, CLS, INP, images, fonts, JS loading\n\n**Gate:** Passes WCAG 2.2 AA. Required by EU Accessibility Act (EAA) for products launched after June 2025.\n\n---\n\n## Relationship to `generate-ui-from-brand`\n\n`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.","tags":["dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh"],"capabilities":["skill","source-dembrandt","skill-dembrandt","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/dembrandt","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (4,536 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:26.635Z","embedding":null,"createdAt":"2026-05-18T13:14:00.982Z","updatedAt":"2026-05-18T19:08:26.635Z","lastSeenAt":"2026-05-18T19:08:26.635Z","tsv":"'/victorgjn).':53 '1':141,675 '10':515 '2':209,676 '2.2':597,634 '2025':647 '3':300 '301':600 '4':415 '5':493 '549':601 '6':575 'aa':598,635 'accept':573 'access':25,576,595,639 'across':296,409,702 'act':640 'action':461 'activ':265 'actual':76 'agre':205 'algorithm':170 'algorithmic-color-palett':169 'alt':611 'alway':480 'anim':535 'appli':303,496 'architectur':344 'area':395,459 'aria':604 'audit':95,623 'avoid':396 'awar':243 'axi':400 'banner':477 'base':236 'behaviour':370 'border':252 'border-radius':251 'bottom':387 'brand':17,121,137,142,160,177,181,200,654,659,686,713 'brand-extract':712 'brand-tint':176 'brand-to-token-to-spec':120 'brand-visual-languag':159 'breadcrumb':358 'breakpoint':410 'build':97,701 'button':111,259,273 'button-st':258 'card':254,434 'carousel':435 'celebr':539 'check':106 'checklist':520 'cinemat':558 'cls':625 'coher':408 'color':171,184,282 'color-mode-and-them':183 'colour':108,182,203,278,287,337,359 'combin':192 'common':222,326 'communic':362 'compon':22,219,270,297,416,419 'component-family-consist':269 'concept':48 'concern':43,57,91,104,708 'concret':691 'confirm':350 'consist':272,295 'context':242,310,354,413 'context-awar':241 'contrast':602 'control':323,404,465 'cta':334 'currenc':466 'dark':190 'data':348,452 'data-display-and-select':451 'dead':490 'decis':152,305 'defer':586 'defin':293 'demand':71 'dembrandt':1,6,44 'densiti':373,375 'depth':248 'deriv':173 'design':19,42,93,210,444 'design.md':131,668 'dialog':351 'direct':88,114 'disabl':267 'disney':555 'display':453 'drawer':436 'eaa':641 'element':385 'elev':246 'elevation-and-depth':245 'emphasi':330,341 'en':599 'end':491,567,569 'end-to-end':566 'enhanc':616 'entri':550 'error':284,288 'establish':144 'eu':638 'extract':664,714 'famili':271,298 'fix':384 'flow':523,529,563 'focus':266 'font':628 'form':443 'form-design':442 'forward':483 'foundat':18,143,223 'full':5,704 'gate':26,199,291,405,484,562,578,581,631 'generat':134,651,656 'generate-ui-from-brand':133,650,655 'gestalt':318 'gestalt-ui-organis':317 'github.com':52 'github.com/victorgjn).':51 'global':463 'global-toolbar-control':462 'go':113 'graph':614 'grey':179 'grid/list/table':456 'group':321 'guid':525 'handl':488 'hard':579 'header':386 'height':279 'helper':445 'heurist':514 'hierarchi':332,357 'hit':458 'hover':264 'html':607 'html5':610 'icon':165,536 'imag':627 'index':391 'inform':343 'information-architectur':342 'inner':397 'inp':626 'input':274 'instead':138 'interact':417,422,486,534 'interfac':96 'js':629 'june':646 'keyboard':603 'languag':147,162,164,467,559 'larg':457 'launch':644 'layout':21,301,304,406 'lcp':624 'legibl':565 'light':188 'lighthous':622 'load':27,66,156,227,268,314,427,508,541,590,630 'loading-states-and-perceived-perform':540 'local':468 'make':149 'mass':460 'match':374 'mental':346 'metaphor':433 'micro':533 'micro-interact':532 'minim':285 'minimum':239 'mobile/tablet/desktop':366 'modal':256 'mode':185 'model':347 'modular':231 'modular-scale-typographi':230 'motion':500,552 'motion-and-storytel':551 'multi':56,90 'multi-concern':55,89 'multipl':41 'name':345 'nav':367 'need':77,158,229,316,429,510,592,689 'nielsen':512 'nielsen-usability-heurist':511 'notif':473 'notifications-and-recoveri':472 'numer':215 'offer':195 'onboard':530 'one':333,399 'open':613 'orchestr':2,47,101,679,695 'order':15,62 'organis':320 'overlap':673 'palett':109,172 'paradigm':365 'pass':632 'path':482,526 'pattern':257,420 'per':335 'perceiv':503,544,570 'perform':545,571,618 'performance-and-web-vit':617 'pill':275 'pin':213 'pipelin':8,46,126,139,665 'placehold':447 'placement':469 'platform':377 'point':716 'polish':24,495 'prevent':290 'principl':498,517,556 'proceed':207 'product':309,643 'progress':615 'proxim':324 'purchas':528 'qualiti':504 'radius':253,277 'ratio':235 'ratio-bas':234 'real':431 'real-world-metaphor':430 'recoveri':289,475 'region':327,360 'relat':322 'relationship':648 'requir':636 'respons':364 'responsive-paradigm':363 'rest':263 'retri':478 'reveal':538 'review':94,110,418,519,699 'right':29 'rout':9,54 'scale':212,232,238,250 'scope':356,361 'screen':548 'scroll':394,398 'scroll-area':393 'section':368 'select':455 'selector':198 'semant':286,606 'semantic-html-and-seo':605 'seo':609 'sequenc':531 'shadow':249 'shape':163 'share':220,276 'sharpen':502 'ship':580 'similar':325 'singl':103 'single-concern':102 'six':14,61,261 'size':240,339 'skeleton':547 'skill':32,69,82,87,119,155,226,313,426,507,589 'skill-dembrandt' 'skip':584 'sourc':687 'source-dembrandt' 'span':40 'spec':125,671,692 'specif':308,711 'spinner':546 'stack':705 'stage':16,35,63,65,140,208,299,414,492,574,674 'stagger':549 'start':715 'state':112,174,260,262,423,450,487,542 'status':281 'status-colors-and-error':280 'sticki':369,382 'sticky-and-fixed-el':381 'storytel':554 'structur':302 'style':166 'sub':31,68,86,118,154,225,312,425,506,588 'sub-skil':30,67,85,117,153,224,311,424,505,587 'submit':449 'system':204,216 'task':12,39,59,75,92,105 'technic':577 'text':446,612 'theme':187,197 'tint':178 'toast':476 'toggl':537 'token':20,123,151,211,292,392,663,669 'token-extract':662 'tone':168,201 'toolbar':388,464 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'type':237,380 'typographi':167,233,471 'ui':98,135,319,349,353,372,561,652,657,670 'ui-context-and-scop':352 'ui-dens':371 'ui/ux':11,58 'undo':479 'url':129,666 'usabl':513,516 'usag':244 'use':36,80,99,132,439,680,693 'user':379,403,412,522 'user-control':402 'user-flows-and-guided-path':521 'ux':7,23,45,494,497,707 'valid':448 'victorgjn':50 'view':336 'visual':146,161,329 'visual-emphasis-and-hierarchi':328 'vital':621 'vs':83,189,191 'wcag':594,596,633 'wcag-access':593 'web':620 'without':709 'wizard':527 'world':432 'z':390 'z-index':389","prices":[{"id":"ff96885b-b5e7-4978-bc85-e7fd35961280","listingId":"6daad584-3579-4915-8336-2adbb9270b7a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:00.982Z"}],"sources":[{"listingId":"6daad584-3579-4915-8336-2adbb9270b7a","source":"github","sourceId":"dembrandt/dembrandt-skills/dembrandt","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/dembrandt","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:00.982Z","lastSeenAt":"2026-05-18T19:08:26.635Z"}],"details":{"listingId":"6daad584-3579-4915-8336-2adbb9270b7a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"dembrandt","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"b7c0dd5eb46cb0d0dbf5a45d60ff3a2a939949d2","skill_md_path":"skills/dembrandt/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/dembrandt"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"dembrandt","description":"Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation → design tokens → layout → components → UX polish → accessibility gate — loading the right sub-skill at each stage. Use when the task spans multiple design concerns: \"design review\", \"build UI\", \"audit interface\", \"from brand to UI\". For single-concern tasks (e.g. \"review my colour palette\") go directly to the relevant sub-skill instead."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/dembrandt"},"updatedAt":"2026-05-18T19:08:26.635Z"}}