Dembrandt Skills
Apply enterprise UX judgment to design systems, interfaces, and accessibility reviews.
The package covers visual identity, tokens, layout, components, interaction, usability, accessibility, and technical UI foundations. Its dembrandt orchestrator coordinates the full design review pipeline.
Use cases
- Review interface usability and accessibility
- Build coherent palettes, type scales, and components
- Extract a live site’s design system
How to use
Ask for a specific interface decision or a full screen review. Live-site token extraction and brand-based generation need the Dembrandt CLI or MCP engine described upstream.
Skills
algorithmic-color-palette
Derive a full UI palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
dembrandt/dembrandt-skillsapp-shell
Top bar, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell or navigation between apps behind one login.
dembrandt/dembrandt-skillsauthentic-product-representation
Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.
dembrandt/dembrandt-skillsbrand-visual-language
Shape language across type, radius and icons carries brand personality. Use when starting a design system, picking icons or radius tokens, or reviewing visual consistency.
dembrandt/dembrandt-skillsbutton-states
Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.
dembrandt/dembrandt-skillsclone-website
Rebuild a live web page 1:1 from measurement into Figma, Penpot or code, then verify it. Use when reproducing a page or checking a rebuild against the original.
dembrandt/dembrandt-skillscolor-mode-and-theme
Light, dark or both, and when a theme selector is worth it. Use when defining a base palette or deciding on dark mode support.
dembrandt/dembrandt-skillscomponent-family-consistency
Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.
dembrandt/dembrandt-skillscoordinated-data-views
Show a table and its map, diagram, timeline or chart together, with selection synced both ways. Use when data appears in two representations at once.
dembrandt/dembrandt-skillsdata-display-and-selection
View modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.
dembrandt/dembrandt-skillsdembrandt
Orchestrator that routes a UI/UX task through brand, tokens, layout, components, polish and accessibility. Use for multi-concern work such as a design review, UI build or interface audit.
dembrandt/dembrandt-skillsdomain-expert-configuration
Settings for experts who are not developers — domain language, sane defaults, grouping by professional concept. Use when designing settings panels, solver configuration or constraint editors.
dembrandt/dembrandt-skillselevation-and-depth
Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.
dembrandt/dembrandt-skillsextract-design
Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.
dembrandt/dembrandt-skillsform-design
Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.
dembrandt/dembrandt-skillsgenerate-ui-from-brand
Pipeline from a URL or DESIGN.md to tokens, decisions and a UI spec. Use when building UI for an existing brand, auditing a design system or fixing visual inconsistency.
dembrandt/dembrandt-skillsgestalt-ui-organisation
Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.
dembrandt/dembrandt-skillsglobal-toolbar-controls
Currency, language, region and unit selectors live in a low-profile header or footer spot. Use when designing locale switchers or product-wide preference controls.
dembrandt/dembrandt-skillsinformation-architecture
Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.
dembrandt/dembrandt-skillslayout-paradigms-and-consistency
Choose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.
dembrandt/dembrandt-skillsloading-states-and-perceived-performance
Spinners, skeletons and staggered reveals that manage wait times. Use when designing loading states, async data or the feel of a slow interface.
dembrandt/dembrandt-skillsmarketing-vs-product-system
A marketing site and its product may differ in density and scale but share one token layer. Use when the two drift apart, share components or need a single token owner.
dembrandt/dembrandt-skillsmicro-interactions
Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.
dembrandt/dembrandt-skillsmodal-and-overlay-patterns
Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.
dembrandt/dembrandt-skillsmodular-scale-typography
Ratio-based type scale where every size relates to the others. Use when defining font sizes or type tokens, or when typography feels arbitrary.
dembrandt/dembrandt-skillsmotion-and-storytelling
Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.
dembrandt/dembrandt-skillsnielsen-usability-heuristics
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
dembrandt/dembrandt-skillsnotifications-and-recovery
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
dembrandt/dembrandt-skillsoperational-expert-tool-ui
Dense, linear, status-at-a-glance UI for specialists who use a tool all day. Use when designing dispatch, warehouse, logistics, scheduling or other B2B operations tools.
dembrandt/dembrandt-skillsperformance-and-web-vitals
Lighthouse audits and Core Web Vitals — LCP, CLS, INP. Use when optimising page load, layout shift, input delay, images, fonts or render-blocking resources.
dembrandt/dembrandt-skillsreal-world-metaphors
Cards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.
dembrandt/dembrandt-skillsrepeated-component-alignment
Cards, rows, tiles and cells are fixed slot models that stay aligned when content length varies. Use when building or reviewing any repeated component.
dembrandt/dembrandt-skillsresponsive-paradigms
Mobile, tablet and desktop are different paradigms, not one layout scaled. Use when designing responsive layouts or deciding what each breakpoint shows.
dembrandt/dembrandt-skillsscroll-areas
Avoid inner scroll containers; when unavoidable, one axis at a time. Use when a layout, table or panel might scroll inside the page.
dembrandt/dembrandt-skillssemantic-html-and-seo
Semantic HTML5, SEO basics, alt text, progressive enhancement and SPA concerns. Use when building web UI, reviewing markup or optimising for search.
dembrandt/dembrandt-skillssizing-units
rem, px or relative units for each kind of value. Use when defining spacing and sizing tokens, control heights or media queries, or when a layout breaks under enlarged text.
dembrandt/dembrandt-skillsstatus-colors-and-errors
Few semantic colours, each meaning one thing, and errors with a way forward. Use when designing status indicators, validation, alerts or error states.
dembrandt/dembrandt-skillssticky-and-fixed-elements
Sticky headers, bottom toolbars, floating action buttons and pinned table headers. Use when deciding what stays on screen while the user scrolls.
dembrandt/dembrandt-skillssurface-separation
Set a surface apart by one means — border, elevation or fill — and keep opacity for state. Use when designing cards, panels, list rows, toolbars or any container.
dembrandt/dembrandt-skillstab-navigation
Tabs swap views under a shared context. Use when designing tabbed layouts, settings pages, detail views or dashboards with several data views.
dembrandt/dembrandt-skillsui-context-and-scope
Show where the user is and what their actions affect — breadcrumbs, regions, scope labels. Use when designing deep navigation or multi-section layouts.
dembrandt/dembrandt-skillsui-density
Match information density to platform and user type. Use when designing data tables, dashboards or toolbars, or adapting a desktop product for mobile.
dembrandt/dembrandt-skillsuser-flows-and-guided-paths
Guided multi-step paths and wizards. Use when designing onboarding, checkout, setup sequences or any multi-step journey.
dembrandt/dembrandt-skillsvisual-emphasis-and-hierarchy
Size, colour, weight and position mark what matters most. Use when designing button groups, CTAs, cards, dashboards or any layout with a primary action.
dembrandt/dembrandt-skillswcag-accessibility
WCAG 2.2 AA compliance as required by the European Accessibility Act. Use when designing, building or reviewing any user-facing interface for accessibility.
dembrandt/dembrandt-skills