dembrandt-skills

Enterprise UX secrets, now built into your AI agent.

Your agent writes the component in seconds. It does not know the modal should be a drawer, or that the grey it picked fails contrast. These skills carry that judgment: what to do, and what breaks otherwise. Works with Claude Code, Cursor, Codex, GitHub Copilot and any agent that reads the Open Agent Skills format.

Quick start

npx skills add dembrandt/dembrandt-skills --all

Skills load only when a prompt needs them, so --all costs nothing. --global installs for every project. 42 of the 45 skills work on the install alone. Three read live sites and need the engine.

Then try it. Open a UI file and ask your agent:

Review this interface for usability issues.

On Claude Code, the plugin is the shorter route: it carries the skills and registers the dembrandt MCP server in one go. Everyone else uses npx skills above. The npx line goes in a terminal; the /plugin lines are typed inside Claude Code.

/plugin marketplace add dembrandt/dembrandt-skills
/plugin install dembrandt@dembrandt

Usage

Ask in your own words and the matching skill loads. Ask broadly, "review this screen", and the dembrandt skill runs the whole pipeline.

Ask	What loads
I have one brand colour, #133174. Build me a full UI palette.	algorithmic-color-palette
My font sizes feel random. Set up a proper type scale.	modular-scale-typography
Review this interface for usability issues.	nielsen-usability-heuristics
Our buttons, inputs and badges look like three different products.	component-family-consistency
Design a multi-step onboarding flow for a B2B SaaS tool.	user-flows-and-guided-paths
Does this pass WCAG 2.2 AA?	wcag-accessibility
Extract the design system from stripe.com.	extract-design, needs the engine

Skills

Brand & Visual Identity

Skill	What it covers
brand-visual-language	Shape language, icon style, typography tone
color-mode-and-theme	Light vs dark vs combined, when to offer a theme selector
marketing-vs-product-system	What a marketing site and the product may differ on, and what is drift
algorithmic-color-palette	Derive states and brand-tinted greys from brand colours

Design Tokens & Scales

Skill	What it covers
modular-scale-typography	Ratio-based type scales, minimum sizes, context-aware usage
elevation-and-depth	Shadow scale, border-radius, card and modal patterns
surface-separation	One separation strategy per surface; opacity as state, not tint
button-states	Six states: rest, hover, active, focus, disabled, loading
component-family-consistency	Buttons, inputs, pills: shared radius, colour, height
sizing-units	px vs rem vs relative: which values move when the user enlarges text

Layout & Structure