SkillFoxx

dembrandt-skills

45 enterprise UX skills for agents: palettes, typography, forms, WCAG accessibility and usability review of an interface.

  • 192 ★ on the repository
  • Last commit
  • MIT
Skill

Minimal access

Why this level

  • The skills are text guidance. Two skills read live sites through the Dembrandt MCP server.
All reasons and checks

dembrandt/dembrandt-skillsAuthor:Dembrandt

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/dembrandt-skills

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skills are text guidance. Two skills read live sites through the Dembrandt MCP server.

This is third-party code. Review the repository files before installing.

What it does

dembrandt-skills gives an agent design judgment: when a modal should become a drawer, why a chosen grey fails contrast, how to set a type scale. Skills load only on demand, so installing them all does not bloat context. For example, asking to review an interface for usability issues loads `nielsen-usability-heuristics`, and asking whether a screen passes WCAG 2.2 AA loads `wcag-accessibility`. The set is grouped into brand and visual language, tokens and scales, layout and structure, components and interaction, and UX principles. 43 of 45 skills work right after install, while two read live sites and need the Dembrandt engine, attached as an MCP server.

Who it is for. Developers and designers who hand interfaces to an agent and want it to account for contrast, button states and navigation structure.

Good fit when

  • One brand colour has to grow into a full interface palette with states.
  • Font sizes in the project are random and a modular scale is needed.
  • Buttons, inputs and badges look like three different products.
  • A multi-step onboarding for a B2B tool has to be designed from scratch.
  • A screen is checked against WCAG 2.2 AA before release.

Not a fit when

  • You need one short skill with a narrow topic; this set has 45, though they load on demand.
  • You need to read tokens off a live site without installing the Dembrandt engine.
  • You want a ready component library rather than guidance.

Example request

Review this interface for usability problems and say where it fails WCAG 2.2 AA contrast.

Limitations

The skills give guidance rather than ready component code. Install copies files, and they update with `npx skills update`. The `extract-design` and `generate-ui-from-brand` skills work only with the Dembrandt engine, which needs a browser: run `npx dembrandt install-browser` before the first extraction. The Claude Code plugin installs the skills and registers the MCP server in one go. The set targets enterprise B2B interfaces, and some rules, such as dense working screens, do not suit landing pages.

How to disable. For the Claude Code plugin run `/plugin uninstall dembrandt@dembrandt`. Skills installed through `npx skills` are removed from the agent's skills folder.

FAQ

How do I install dembrandt-skills?

Run `npx skills add dembrandt/dembrandt-skills --all`. The `--global` flag installs for all projects and `npx skills update` refreshes the copies.

Do I need all 45 skills at once?

You can install them all: they enter context only when a request matches their description, so `--all` costs nothing.

What does extract-design need?

The Dembrandt engine as an MCP server and a browser. Run `npx dembrandt install-browser` once before the first extraction.

Which agents does it work with?

Claude Code, Cursor, Codex, GitHub Copilot and any agent that reads the Open Agent Skills format.

How do I install it as a Claude Code plugin?

Run `/plugin marketplace add dembrandt/dembrandt-skills` and `/plugin install dembrandt@dembrandt`. The plugin installs the skills and registers the MCP server at once.

Discussion

No questions or reviews yet.

Skills

A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code

PluginMinimal access100

Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes

SkillMinimal access11K

A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.

SkillExtended access51

A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI

SkillExtended access982

Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile

SkillMinimal access114.1K113

A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles

SkillMinimal access3.6K

README in short

The repository presents the set as enterprise UX experience packaged for agents. Tables show which request loads which skill and group the 45 skills into five topics.

README badge

Original SKILL.md

---
name: dembrandt
description: 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.
metadata:
  priority: 10
  authors:
    - name: VictorGjn
      url: https://github.com/VictorGjn
      note: original concept and pipeline design
  docs:
    - "https://dembrandt.com"
    - "https://www.npmjs.com/package/dembrandt"
  promptSignals:
    phrases:
      - "design review"
      - "build ui"
      - "audit interface"
      - "from brand to ui"
      - "full ux review"
      - "ui audit"
      - "review my ui"
      - "review this interface"
      - "design audit"
      - "ux audit"
retrieval:
  aliases:
    - dembrandt pipeline
    - full ux pipeline
    - ui design orchestrator
    - end-to-end design review
  intents:
    - run a full UX review across multiple design concerns
    - orchestrate brand-to-UI design pipeline
    - audit an interface end to end
    - run all design checks in order
  examples:
    - review my checkout flow
    - audit this interface
    - do a full design review
    - build a UI from scratch following best practices

Report a problem