dembrandt/dembrandt-skills

dembrandt/dembrandt-skills · skills/algorithmic-color-palette/SKILL.md · Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for…

dembrandt/dembrandt-skills · skills/app-shell/SKILL.md · The persistent shell around an application — the top bar, the app launcher, the tenant and environment cue, and in…

dembrandt/dembrandt-skills · skills/authentic-product-representation/SKILL.md · Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised…

dembrandt/dembrandt-skills · skills/brand-visual-language/SKILL.md · A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape…

dembrandt/dembrandt-skills · skills/button-states/SKILL.md · Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and…

dembrandt/dembrandt-skills · skills/clone-website/SKILL.md · Rebuild an existing web page 1:1 from measurement instead of by eye — into Figma, Penpot, or code. Captures the…

dembrandt/dembrandt-skills · skills/color-mode-and-theme/SKILL.md · Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector…

dembrandt/dembrandt-skills · skills/component-family-consistency/SKILL.md · Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same…

dembrandt/dembrandt-skills · skills/coordinated-data-views/SKILL.md · When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them…

dembrandt/dembrandt-skills · skills/data-display-and-selection/SKILL.md · Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item…

dembrandt/dembrandt-skills · skills/dembrandt/SKILL.md · Orchestrator for the full dembrandt UX pipeline. Routes a UI/UX task through six ordered stages — brand foundation →…

dembrandt/dembrandt-skills · skills/domain-expert-configuration/SKILL.md · Configuration UIs for domain experts — users who understand their field deeply but are not software developers —…

dembrandt/dembrandt-skills · skills/elevation-and-depth/SKILL.md · Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined…

dembrandt/dembrandt-skills · skills/extract-design/SKILL.md · Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any…

dembrandt/dembrandt-skills · skills/form-design/SKILL.md · Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected…

dembrandt/dembrandt-skills · skills/generate-ui-from-brand/SKILL.md · Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made. Extracts live…

dembrandt/dembrandt-skills · skills/gestalt-ui-organisation/SKILL.md · UI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and…

dembrandt/dembrandt-skills · skills/global-toolbar-controls/SKILL.md · Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a…

dembrandt/dembrandt-skills · skills/information-architecture/SKILL.md · In large applications, information architecture determines whether users can find, understand, and act on data. Naming…

dembrandt/dembrandt-skills · skills/layout-paradigms-and-consistency/SKILL.md · A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail…

dembrandt/dembrandt-skills · skills/loading-states-and-perceived-performance/SKILL.md · Manage user expectations during wait times with appropriate loading states — from simple spinners to complex skeleton…

dembrandt/dembrandt-skills · skills/marketing-vs-product-system/SKILL.md · A marketing site and the product it sells share a brand but not a design system. The surfaces differ in density, type…

dembrandt/dembrandt-skills · skills/micro-interactions/SKILL.md · Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel…

dembrandt/dembrandt-skills · skills/modal-and-overlay-patterns/SKILL.md · Overlays — modals, drawers, bottom sheets, popovers — interrupt or augment the main flow. Each type has a different…

dembrandt/dembrandt-skills · skills/modular-scale-typography/SKILL.md · Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every…

dembrandt/dembrandt-skills · skills/motion-and-storytelling/SKILL.md · Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used…

dembrandt/dembrandt-skills · skills/nielsen-usability-heuristics/SKILL.md · UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and…

dembrandt/dembrandt-skills · skills/notifications-and-recovery/SKILL.md · When something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and…

dembrandt/dembrandt-skills · skills/operational-expert-tool-ui/SKILL.md · Operational expert tools — used by domain specialists for hours every day — require a different design approach than…

dembrandt/dembrandt-skills · skills/performance-and-web-vitals/SKILL.md · Audit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising…

dembrandt/dembrandt-skills · skills/real-world-metaphors/SKILL.md · UI patterns borrowed from the physical world feel immediately intuitive — cards feel graspable, carousels feel…

dembrandt/dembrandt-skills · skills/repeated-component-alignment/SKILL.md · Any component rendered many times — cards, list rows, table cells, nav items, tiles, KPI widgets, feed entries — is a…

dembrandt/dembrandt-skills · skills/responsive-paradigms/SKILL.md · Mobile, tablet, and desktop are different interaction paradigms — not the same layout scaled up or down. Sections can…

dembrandt/dembrandt-skills · skills/scroll-areas/SKILL.md · Scroll areas inside a layout should be avoided wherever possible. When unavoidable, allow only one scroll axis at a…

dembrandt/dembrandt-skills · skills/semantic-html-and-seo/SKILL.md · Semantic HTML5, SEO fundamentals, alt texts, progressive enhancement, SPA considerations, device capability detection…

dembrandt/dembrandt-skills · skills/sizing-units/SKILL.md · Which CSS unit a value should be written in. rem for anything a text-size preference must move — type, control heights…

dembrandt/dembrandt-skills · skills/status-colors-and-errors/SKILL.md · Keep status and error colours minimal and consistent — too many semantic colours confuse users. Each colour must mean…

dembrandt/dembrandt-skills · skills/sticky-and-fixed-elements/SKILL.md · Sticky and fixed positioning keeps critical UI persistent as the user scrolls — headers at the top, toolbars at the…

dembrandt/dembrandt-skills · skills/surface-separation/SKILL.md · A surface is set apart from its background by exactly one means — a border, an elevation, or a fill. Combining all…

dembrandt/dembrandt-skills · skills/tab-navigation/SKILL.md · Tabs organise related content under a shared context — switching tabs swaps the view without leaving the page. Use when…

dembrandt/dembrandt-skills · skills/ui-context-and-scope/SKILL.md · UI should make it immediately clear where the user is, what context they are operating in, and what their actions will…

dembrandt/dembrandt-skills · skills/ui-density/SKILL.md · UI density — how much information and how many features appear at once — should match the primary platform and user…

dembrandt/dembrandt-skills · skills/user-flows-and-guided-paths/SKILL.md · Related features and tasks — such as purchase flows, onboarding, or multi-step configuration — should be designed as…

dembrandt/dembrandt-skills · skills/visual-emphasis-and-hierarchy/SKILL.md · The most important actions and content in a UI should be visually prominent — through size, colour, weight, and…

dembrandt/dembrandt-skills · skills/wcag-accessibility/SKILL.md · UI must comply with WCAG 2.2 Level AA, as required by the European Accessibility Act (EN 301 549). Do not deviate…