dembrandt-skills

In the author's own words, from each skill's SKILL.md — showing the first 30 of 45 files.

• algorithmic-color-palette

  Derive a full UI colour palette algorithmically from one or two brand colours. Darker and lighter variants for interactive states, desaturated greys from the brand hue for borders and backgrounds, and semantic colours that feel coherent with the brand rather than generic. Use when building a colour system from scratch or expanding a limited brand palette for UI use.

  skills/algorithmic-color-palette/SKILL.md on GitHub (opens in a new tab)

• app-shell

  The persistent shell around an application — the top bar, the app launcher, the tenant and environment cue, and in heavy tools a status bar. In an estate of several applications the shell belongs to the estate rather than to any one app, and it is what carries a user between tools. Use when designing a top bar, an app switcher, a tenant selector, an environment cue, a status bar, or navigation be…

  skills/app-shell/SKILL.md on GitHub (opens in a new tab)

• authentic-product-representation

  Product visuals — hero shots, demos, screenshots, landing-page panels — must reproduce the real product, not a stylised poster of it. Design with real content and real data, mirror the actual output the product generates, keep every label and number truthful, and refuse fabricated marketing chrome. Use when building landing pages, hero sections, product screenshots, demo panels, or any visual tha…

  skills/authentic-product-representation/SKILL.md on GitHub (opens in a new tab)

• brand-visual-language

  A brand's visual tone — playful or serious, rounded or angular — should be consistent across all UI elements. Shape language in typography, border-radius, and iconography communicates personality before a single word is read. Use when establishing a design system, choosing icon libraries, setting border-radius tokens, or reviewing visual consistency.

  skills/brand-visual-language/SKILL.md on GitHub (opens in a new tab)

• button-states

  Every interactive element needs a complete set of visual states — rest, hover, active/pressed, focus, disabled, and loading. States should be derived algorithmically from the base colour, not chosen arbitrarily. Use when designing buttons, links, inputs, or any clickable component.

  skills/button-states/SKILL.md on GitHub (opens in a new tab)

• clone-website

  Rebuild an existing web page 1:1 from measurement instead of by eye — into Figma, Penpot, or code. Captures the rendered page, the raw source and the computed styles, rebuilds section by section, then verifies the result visually, structurally and semantically. Use when reproducing a live page as editable layers or components, or when checking whether a rebuild actually matches the original.

  skills/clone-website/SKILL.md on GitHub (opens in a new tab)

• color-mode-and-theme

  Choose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters — enterprise tools, data-heavy UIs, or extended-use applications. Use when defining the base color palette, designing a design system, or deciding whether to build dark mode support.

  skills/color-mode-and-theme/SKILL.md on GitHub (opens in a new tab)

• component-family-consistency

  Buttons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library, design system, or any set of UI components.

  skills/component-family-consistency/SKILL.md on GitHub (opens in a new tab)

• coordinated-data-views

  When data has both a tabular/list representation and a visual representation, show both simultaneously and keep them synchronized. Clicking a row highlights the corresponding element in the visual view, and vice versa. Applies to maps, diagrams, timelines, and charts that accompany a data table. Use when designing any UI where data appears in two different representations at once.

  skills/coordinated-data-views/SKILL.md on GitHub (opens in a new tab)

• data-display-and-selection

  Complex data deserves multiple view modes — grid, list, table — chosen by the user based on their task. Row and item selection should use large hit areas (the whole row or card, not just a checkbox). Selected state is communicated through a subtle background colour shift. Mass actions appear when items are selected. Use when designing data tables, product listings, file browsers, or any multi-ite…

  skills/data-display-and-selection/SKILL.md on GitHub (opens in a new tab)

• dembrandt

  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 p…

  skills/dembrandt/SKILL.md on GitHub (opens in a new tab)

• domain-expert-configuration

  Configuration UIs for domain experts — users who understand their field deeply but are not software developers — require domain language, sensible defaults, and grouping by professional concept rather than technical parameter. Use when designing settings panels, solver or algorithm configuration, constraint editors, or any UI where the user needs to tune the behaviour of a complex system without…

  skills/domain-expert-configuration/SKILL.md on GitHub (opens in a new tab)

• elevation-and-depth

  Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius, it creates the tactile quality of cards, modals, and interactive surfaces. Use when designing cards, dropdowns, modals, tooltips, or any floating UI element.

  skills/elevation-and-depth/SKILL.md on GitHub (opens in a new tab)

• extract-design

  Extract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual design, or need to seed a design system from an existing product.

  skills/extract-design/SKILL.md on GitHub (opens in a new tab)

• form-design

  Forms have three layers of guidance: helper text below the input explains what to enter, placeholder shows the expected format, and validation confirms correctness. Real-time validation for complex inputs. Submit enables only when the form is valid. Use when designing or reviewing any form, input field, or data entry UI.

  skills/form-design/SKILL.md on GitHub (opens in a new tab)

• generate-ui-from-brand

  Pipeline skill — turns a URL or DESIGN.md into a concrete UI structure with decisions already made. Extracts live design tokens, normalizes them into a semantic system, applies UX principles, and outputs an actionable UI spec. Use when building UI for an existing brand from scratch, auditing a design system, or refactoring visual inconsistency.

  skills/generate-ui-from-brand/SKILL.md on GitHub (opens in a new tab)

• gestalt-ui-organisation

  UI layout and grouping should follow Gestalt principles so users immediately understand which controls, commands, and elements belong together. Use when designing or reviewing component layout, navigation, toolbars, forms, dashboards, or any UI where visual grouping communicates relationships.

  skills/gestalt-ui-organisation/SKILL.md on GitHub (opens in a new tab)

• global-toolbar-controls

  Quick global settings — currency, language, region, units — belong in a persistent, low-profile location such as a header toolbar or footer. These controls are frequent but not primary, so they use small typography and stay out of the main content hierarchy. Use when designing global selectors, locale switchers, or user preference controls that apply across the whole product.

  skills/global-toolbar-controls/SKILL.md on GitHub (opens in a new tab)

• information-architecture

  In large applications, information architecture determines whether users can find, understand, and act on data. Naming matters. The UI should mirror the data model and signal how data can be transformed. Dangerous or irreversible changes always require a confirm dialog. Use when designing navigation, naming entities, structuring large feature sets, or modelling data-driven UI.

  skills/information-architecture/SKILL.md on GitHub (opens in a new tab)

• layout-paradigms-and-consistency

  A layout is not a neutral container — choosing the right layout paradigm (feed, board, table, canvas, master-detail, dashboard, gallery, timeline, map, single-focus, narrative long-scroll) is a design decision that shapes how content is understood. Landing and marketing pages get a product narrative framework — hook, problem, USP, value props, proof points, how it works, stakes, CTA — used to rev…

  skills/layout-paradigms-and-consistency/SKILL.md on GitHub (opens in a new tab)

• loading-states-and-perceived-performance

  Manage user expectations during wait times with appropriate loading states — from simple spinners to complex skeleton screens and staggered animations. Perceived performance is often more important than actual load time. Use when designing data-heavy components, handling API calls, building hero sections, or improving the feel of a slow interface.

  skills/loading-states-and-perceived-performance/SKILL.md on GitHub (opens in a new tab)

• marketing-vs-product-system

  A marketing site and the product it sells share a brand but not a design system. The surfaces differ in density, type scale, radius and weight for good reasons, and those differences are legitimate, but the token layer underneath them must stay single. The same rule covers the other surfaces a brand runs, including documentation, transactional email and a status page. Use when a product app and i…

  skills/marketing-vs-product-system/SKILL.md on GitHub (opens in a new tab)

• micro-interactions

  Micro-interactions are small, purposeful animations and responses that reward the user and make the interface feel alive — an animated icon, a satisfying toggle, a subtle reveal. Borrowed from the natural world, they add delight without distraction. Use when designing interactive components, success states, toggles, loaders, or any moment worth celebrating.

  skills/micro-interactions/SKILL.md on GitHub (opens in a new tab)

• modal-and-overlay-patterns

  Overlays — modals, drawers, bottom sheets, popovers — interrupt or augment the main flow. Each type has a different scope, blocking level, and appropriate use case. Use when designing dialogs, confirmation prompts, side panels, action sheets, or any UI element that appears above the main content layer.

  skills/modal-and-overlay-patterns/SKILL.md on GitHub (opens in a new tab)

• modular-scale-typography

  Typography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.

  skills/modular-scale-typography/SKILL.md on GitHub (opens in a new tab)

• motion-and-storytelling

  Disney's 12 animation principles, cinematic storytelling techniques, and comic book conventions apply to web UI — used subtly, they make interfaces feel alive, intentional, and emotionally resonant. Use when designing transitions, micro-interactions, onboarding flows, scroll animations, or any motion in the UI.

  skills/motion-and-storytelling/SKILL.md on GitHub (opens in a new tab)

• nielsen-usability-heuristics

  UI design and review should apply Nielsen's 10 Usability Heuristics — the foundational principles for evaluating and improving usability. Use when auditing an interface, designing interaction flows, writing error messages, or reviewing any UI for usability issues.

  skills/nielsen-usability-heuristics/SKILL.md on GitHub (opens in a new tab)

• notifications-and-recovery

  When something goes wrong, the user must be able to recover or try again. Toasts, inline errors, banners, and notification patterns each have a specific role. Use when designing error states, success confirmations, async feedback, in-place editing, or any system that communicates state changes to the user.

  skills/notifications-and-recovery/SKILL.md on GitHub (opens in a new tab)

• operational-expert-tool-ui

  Operational expert tools — used by domain specialists for hours every day — require a different design approach than consumer or occasional-use software. Information density, workflow linearity, and at-a-glance status take priority over whitespace and discoverability. Use when designing dispatch tools, warehouse management, logistics, scheduling, or any B2B tool whose primary users are trained sp…

  skills/operational-expert-tool-ui/SKILL.md on GitHub (opens in a new tab)

• performance-and-web-vitals

  Audit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising page load, fixing layout shift, reducing input delay, improving Lighthouse scores, or reviewing images, fonts, and render-blocking resources.

  skills/performance-and-web-vitals/SKILL.md on GitHub (opens in a new tab)

No skill matches that filter.

Similar skills

• archifyby tt-a1i Turn any idea, plan, or codebase into a beautiful interactive diagram. An agent skill for Claude Code, Codex, and more. 84.1k stars · 2 skills
• video-shotcraftby Vincentwei1021 AI video skill for Claude Code & Codex — cinematic product videos with Remotion: 152 shot recipe cards, 209 motion previews, a production-r… 12.1k stars · 1 skill
• reaby morluto Reverse engineer anything with agents, from app behavior down to native binaries. 270k stars · 1 skill
• taste-skillby Leonxlnx Agent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages 97.3k stars · 13 skills
• awesome-agent-skillsby VoltAgent A curated collection of 1000+ agent skills from official dev teams and the community, compatible with Claude Code, Codex, Gemini CLI, Curso… 35.8k stars
• planning-with-filesby OthmanAdi Persistent file-based planning for AI coding agents and long-running tasks. Crash-proof markdown plans, session recovery after /clear and c… 27.5k stars · 6 skills