Updated 4d ago
by dembrandt
dembrandt-skills
Senior-level UX and design-system knowledge, packaged so your AI agent applies it automatically.
183 GitHub stars (183)
+117 in 30 days
| Period | New stars |
|---|---|
| Sep 27 | +1 |
| Sep 28 | +1 |
| Sep 29 | +1 |
| Sep 30 | 0 |
| Oct 1 | 0 |
| Oct 2 | +1 |
| Oct 3 | −1 |
| Oct 4 | 0 |
| Oct 5 | +1 |
| Oct 6 | +1 |
| Oct 7 | 0 |
| Oct 8 | 0 |
| Oct 9 | 0 |
| Oct 10 | +3 |
| Oct 11 | +1 |
| Oct 12 | +1 |
| Oct 13 | +1 |
| Oct 14 | 0 |
| Oct 15 | +2 |
| Oct 16 | 0 |
| Oct 17 | +3 |
| Oct 18 | +17 |
| Oct 19 | +22 |
| Oct 20 | +13 |
| Oct 21 | +12 |
| Oct 22 | +3 |
| Oct 23 | +3 |
| Oct 24 | +7 |
| Oct 25 | +8 |
| Oct 26 | +2 |
| Oct 27 | +5 |
| Oct 28 | +4 |
| Oct 29 | +1 |
| Oct 30 | +2 |
| Oct 31 | +1 |
| Nov 1 | +2 |
| Nov 2 | +1 |
| Nov 3 | +1 |
| Nov 4 | 0 |
| Nov 5 | +2 |
- 30 skills (30 skills found in its SKILL.md files)
- 22 forks (22 forks)
- 4d ago last update (Last updated 4d ago)
Install
Skills CLI
npx skills add dembrandt/dembrandt-skills
Asks which skills and agents to install. Just one: npx skills add dembrandt/dembrandt-skills --skill algorithmic-color-palette — add -g for every project.
Claude Code
git clone https://github.com/dembrandt/dembrandt-skillscp -r "dembrandt-skills/skills/algorithmic-color-palette" ~/.claude/skills/
Copies the algorithmic-color-palette skill into ~/.claude/skills/ for every project (use .claude/skills/ for one project). Repeat for the other skills listed below.
Plugin
/plugin marketplace add dembrandt/dembrandt-skills
Run inside Claude Code if the repository ships a plugin marketplace, then pick plugins from /plugin.
Skills can run code on your machine — read the SKILL.md first.
What it does
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 palette from one or two brand colours — state variants, brand-tinted greys, semantic colours. Use when building or expanding a colour system.
skills/algorithmic-color-palette/ on GitHub (opens in a new tab)SKILL.md -
app-shell
Top bar, sidebar rail, app launcher, tenant and environment cue, status bar. Use when designing the persistent shell, a collapsible sidebar, or navigation between apps behind one login.
skills/app-shell/ on GitHub (opens in a new tab)SKILL.md -
authentic-product-representation
Product visuals must show the real product with real data. Use when building landing pages, hero sections, screenshots or demo panels.
skills/authentic-product-representation/ on GitHub (opens in a new tab)SKILL.md -
brand-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.
skills/brand-visual-language/ on GitHub (opens in a new tab)SKILL.md -
button-states
Rest, hover, active, focus, disabled and loading states, derived from the base colour. Use when designing buttons, links, inputs or any clickable component.
skills/button-states/ on GitHub (opens in a new tab)SKILL.md -
clone-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.
skills/clone-website/ on GitHub (opens in a new tab)SKILL.md -
color-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.
skills/color-mode-and-theme/ on GitHub (opens in a new tab)SKILL.md -
component-family-consistency
Buttons, inputs, badges and pills share radius, colour logic, shadow, border and spacing. Use when building or reviewing a component library.
skills/component-family-consistency/ on GitHub (opens in a new tab)SKILL.md -
coordinated-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.
skills/coordinated-data-views/ on GitHub (opens in a new tab)SKILL.md -
data-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.
skills/data-display-and-selection/ on GitHub (opens in a new tab)SKILL.md -
dembrandt
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.
skills/dembrandt/ on GitHub (opens in a new tab)SKILL.md -
domain-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.
skills/domain-expert-configuration/ on GitHub (opens in a new tab)SKILL.md -
elevation-and-depth
Shadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.
skills/elevation-and-depth/ on GitHub (opens in a new tab)SKILL.md -
extract-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.
skills/extract-design/ on GitHub (opens in a new tab)SKILL.md -
form-design
Helper text, placeholders, validation and submit behaviour. Use when designing or reviewing a form, input field or data entry UI.
skills/form-design/ on GitHub (opens in a new tab)SKILL.md -
generate-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.
skills/generate-ui-from-brand/ on GitHub (opens in a new tab)SKILL.md -
gestalt-ui-organisation
Group controls with Gestalt principles so users see what belongs together. Use when laying out components, navigation, toolbars, forms or dashboards.
skills/gestalt-ui-organisation/ on GitHub (opens in a new tab)SKILL.md -
global-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.
skills/global-toolbar-controls/ on GitHub (opens in a new tab)SKILL.md -
information-architecture
Naming, navigation, a UI that mirrors the data model, confirms for irreversible changes. Use when structuring a large application or naming its entities.
skills/information-architecture/ on GitHub (opens in a new tab)SKILL.md -
layout-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.
skills/layout-paradigms-and-consistency/ on GitHub (opens in a new tab)SKILL.md -
loading-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.
skills/loading-states-and-perceived-performance/ on GitHub (opens in a new tab)SKILL.md -
marketing-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.
skills/marketing-vs-product-system/ on GitHub (opens in a new tab)SKILL.md -
micro-interactions
Small purposeful animations — toggles, animated icons, success moments. Use when designing interactive feedback, success states or loaders.
skills/micro-interactions/ on GitHub (opens in a new tab)SKILL.md -
modal-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.
skills/modal-and-overlay-patterns/ on GitHub (opens in a new tab)SKILL.md -
modular-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.
skills/modular-scale-typography/ on GitHub (opens in a new tab)SKILL.md -
motion-and-storytelling
Disney's animation principles and cinematic technique applied to UI motion. Use when designing transitions, scroll animations or onboarding motion.
skills/motion-and-storytelling/ on GitHub (opens in a new tab)SKILL.md -
nielsen-usability-heuristics
Nielsen's 10 usability heuristics. Use when auditing an interface, designing interaction flows, writing error messages or reviewing usability.
skills/nielsen-usability-heuristics/ on GitHub (opens in a new tab)SKILL.md -
notifications-and-recovery
Toasts, inline errors, banners and recovery paths. Use when designing error states, success confirmations, async feedback or in-place editing.
skills/notifications-and-recovery/ on GitHub (opens in a new tab)SKILL.md -
operational-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.
skills/operational-expert-tool-ui/ on GitHub (opens in a new tab)SKILL.md -
performance-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.
skills/performance-and-web-vitals/ on GitHub (opens in a new tab)SKILL.md
No skill matches that filter.
Review before you install
A skill is a set of instructions and scripts your agent will follow, and it can run code on your machine. Read the SKILL.md and any scripts first — this listing is not a security review.