dembrandt/dembrandt-skills

dembrandt/dembrandt-skills · skills/algorithmic-color-palette/SKILL.md · Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when…

dembrandt/dembrandt-skills · skills/app-shell/SKILL.md · Top bar, sidebar rail, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell, a…

dembrandt/dembrandt-skills · skills/authentic-product-representation/SKILL.md · Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots…

dembrandt/dembrandt-skills · skills/brand-visual-language/SKILL.md · Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking…

dembrandt/dembrandt-skills · skills/button-states/SKILL.md · Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons…

dembrandt/dembrandt-skills · skills/clone-website/SKILL.md · Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or…

dembrandt/dembrandt-skills · skills/color-mode-and-theme/SKILL.md · Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode…

dembrandt/dembrandt-skills · skills/component-family-consistency/SKILL.md · Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building, changing…

dembrandt/dembrandt-skills · skills/coordinated-data-views/SKILL.md · Show a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears…

dembrandt/dembrandt-skills · skills/data-display-and-selection/SKILL.md · View modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables…

dembrandt/dembrandt-skills · skills/dembrandt/SKILL.md · Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for…

dembrandt/dembrandt-skills · skills/domain-expert-configuration/SKILL.md · Settings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use…

dembrandt/dembrandt-skills · skills/elevation-and-depth/SKILL.md · Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any…

dembrandt/dembrandt-skills · skills/extract-design/SKILL.md · Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you…

dembrandt/dembrandt-skills · skills/form-design/SKILL.md · Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data…

dembrandt/dembrandt-skills · skills/generate-ui-from-brand/SKILL.md · Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand…

dembrandt/dembrandt-skills · skills/gestalt-ui-organisation/SKILL.md · Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation…

dembrandt/dembrandt-skills · skills/global-toolbar-controls/SKILL.md · Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale…

dembrandt/dembrandt-skills · skills/information-architecture/SKILL.md · Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large…

dembrandt/dembrandt-skills · skills/layout-paradigms-and-consistency/SKILL.md · Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a…

dembrandt/dembrandt-skills · skills/loading-states-and-perceived-performance/SKILL.md · Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the…

dembrandt/dembrandt-skills · skills/marketing-vs-product-system/SKILL.md · A marketing site and its product may differ in density and scale but share one token layer. Use when the two drift…

dembrandt/dembrandt-skills · skills/micro-interactions/SKILL.md · Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback…

dembrandt/dembrandt-skills · skills/modal-and-overlay-patterns/SKILL.md · Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs…

dembrandt/dembrandt-skills · skills/modular-scale-typography/SKILL.md · Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when…

dembrandt/dembrandt-skills · skills/motion-and-storytelling/SKILL.md · Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll…

dembrandt/dembrandt-skills · skills/nielsen-usability-heuristics/SKILL.md · Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages…

dembrandt/dembrandt-skills · skills/notifications-and-recovery/SKILL.md · Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async…

dembrandt/dembrandt-skills · skills/operational-expert-tool-ui/SKILL.md · Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse…

dembrandt/dembrandt-skills · skills/performance-and-web-vitals/SKILL.md · Lighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay…

dembrandt/dembrandt-skills · skills/real-world-metaphors/SKILL.md · Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns…

dembrandt/dembrandt-skills · skills/repeated-component-alignment/SKILL.md · Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or…

dembrandt/dembrandt-skills · skills/responsive-paradigms/SKILL.md · Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or…

dembrandt/dembrandt-skills · skills/scroll-areas/SKILL.md · Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll…

dembrandt/dembrandt-skills · skills/semantic-html-and-seo/SKILL.md · Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing…

dembrandt/dembrandt-skills · skills/sizing-units/SKILL.md · rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media…

dembrandt/dembrandt-skills · skills/status-colors-and-errors/SKILL.md · Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators…

dembrandt/dembrandt-skills · skills/sticky-and-fixed-elements/SKILL.md · Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on…

dembrandt/dembrandt-skills · skills/surface-separation/SKILL.md · Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards…

dembrandt/dembrandt-skills · skills/tab-navigation/SKILL.md · Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards…

dembrandt/dembrandt-skills · skills/ui-context-and-scope/SKILL.md · Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep…

dembrandt/dembrandt-skills · skills/ui-density/SKILL.md · Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or…

dembrandt/dembrandt-skills · skills/user-flows-and-guided-paths/SKILL.md · Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.

dembrandt/dembrandt-skills · skills/visual-emphasis-and-hierarchy/SKILL.md · Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or…

dembrandt/dembrandt-skills · skills/wcag-accessibility/SKILL.md · WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any…