What is the component-family-consistency skill?
Component-family-consistency is a skill from the dembrandt-skills repository. It tells an AI coding agent that buttons, inputs, badges, pills and other controls share one set of tokens for radius, border, height, spacing and states. It also says to reuse existing components before building new ones.
Component-family-consistency is a single SKILL.md inside the dembrandt-skills repository. Its premise is plain: every interactive control in a product, from buttons and selects to toggles, sliders and date pickers, should look like it came from the same hands.
When controls are designed one at a time, a product feels assembled from parts. The skill gives the agent a shared token set to inherit from, so a new field or chip joins the family instead of inventing its own look.
What changes in the agent's output
- Radius comes from tokens: a base of 8px for buttons, inputs and selects, 4px for checkboxes and small badges, 12px for cards and modals, and a full radius for pills.
- A button and an input on the same form get the same height. Sizes are tokens of 2rem, 2.5rem and 3rem rather than whatever padding happens to produce.
- Nested rounded boxes use concentric corners: the outer radius equals the inner radius plus the gap, written with calc() so it follows the tokens.
- Border widths stay within two options, such as 1px and 4px, instead of a 1px, 2px, 3px ladder.
- Before creating a component, the agent audits what exists and extends it with a prop or variant rather than cloning it.
How a row of controls stays level
The skill's rule is to set a control's height instead of deriving it from line height, padding and border. Use min-height, box-sizing border-box and a transparent border on borderless variants, so outlined and ghost siblings match.
- One shared class owns the box, the content slot and every state for a row. An instance may set colour and nothing else.
- Hover, focus and transition edits happen on the class, never on a single sibling, which is how rows drift apart over months.
- Icons are nudged per icon, not with one shared offset. The skill suggests measuring the alpha centroid of a rasterised glyph against its box.
- Buttons set cursor: pointer, because browsers render a button with the default cursor.
Who the component-family-consistency skill is for
Best for
- Building or reviewing a component library, for example one built with shadcn, where drift between buttons, inputs and badges is the usual complaint.
- Fixing a form that looks stitched together from different products.
- Teams moving old pages toward newer components. The skill calls the newest components the best evidence of current intent, and says to confirm before deprecating a style.
Not for
- Choosing brand colours or a type scale. The skill governs how components relate to each other. For light and dark themes, see color-mode-and-theme.
- Auditing accessibility. For focus and semantics, use fixing-accessibility.
- A critique of a finished screen. For that, see critique.
Use it with UiChemy
The skill only changes the code or components your agent writes. To get that build into WordPress, bring it in through UiChemy: AI to WordPress imports an AI build, and Figma to WordPress converts a Figma design. Click Get Started on uichemy.com.
How to install Component Family Consistency Skill for Shared UI Tokens
git clone https://github.com/dembrandt/dembrandt-skills.gitClone the repository
Run
git clone https://github.com/dembrandt/dembrandt-skills.git. The skill sits in the skills/component-family-consistency folder.Copy the skill folder
Copy skills/component-family-consistency to wherever your agent loads skills from. Skills load only when a prompt or file path calls for them.
Bring along the siblings it links to
SKILL.md points to other skills in the repo, including sizing-units, generate-ui-from-brand and extract-design. Copy those folders too if you want the cross references to resolve.
Ask in plain words
Try a prompt such as: my buttons and inputs look like they are from different products. The README lists that kind of prompt as the one that loads this skill.
Check that it loaded
Ask the agent to review a small form holding a button, an input and a badge. It should compare radius, height and borders against shared tokens and flag each mismatch.
Key features
- Shared radius tokensA base radius of 8px for buttons, inputs and selects, 4px for checkboxes and small badges, 12px for cards and modals, and a full radius for pills. Badges stay consistent across the product.
- Concentric nested cornersThe outer radius equals the inner radius plus the gap between them. A card with 12px padding around an 8px button gets 20px, derived with calc() so the tokens stay linked.
- Two step border ruleBorder widths are limited to two options, such as 1px for inputs, cards and dividers and 4px for featured items. Focus and error borders each use one shared colour token.
- Component height tokensSmall, medium and large controls share heights of 2rem, 2.5rem and 3rem with matching padding, in rem so a label still fits when users enlarge their text.
- Explicit height for each controlControls on one line get a set min-height instead of a derived one, with box-sizing border-box and a transparent border on borderless variants.
- One class owns the rowA single shared class holds the box, content slot and states. Variants change colour only, and state edits happen on the class, not on one instance.
- Icon centring by measurementAn icon's drawn mass is rarely centred in its box. The skill measures the alpha centroid of a rasterised glyph and bakes a per icon offset into the markup.
- Reuse before you buildThe agent works down a list: use an existing component, generalise a close one, and build new only when nothing fits, drawing on the shared tokens.
- Promote and migrateA visual treatment seen in two or three places is promoted to a shared component or token. When pages from different eras disagree, migrate old toward new after confirming intent.
- Optional drift checksWith the dembrandt engine installed, get_findings reports consistency and duplication issues and compute_drift scores how far two extractions have diverged.
Frequently asked questions
What is the component-family-consistency skill?
It is a skill in the dembrandt-skills repository, written as one SKILL.md. It makes an AI coding agent treat buttons, inputs, selects, badges, pills and similar controls as one family that shares radius, border, height, spacing and states, and reuse existing components before adding new ones.
How do I install the component-family-consistency skill?
Clone dembrandt/dembrandt-skills and copy the skills/component-family-consistency folder into the place your agent loads skills from. The repository README documents a CLI install for the whole set, but a manual copy of this one folder is enough. Then ask the agent to review or build a component library.
Which AI coding agents can use the component-family-consistency skill?
The repository README says its skills work with Claude Code, Cursor, Codex, GitHub Copilot and any agent that reads the Open Agent Skills format. The skill is a plain SKILL.md, so an agent that loads that format can use it.
When does the skill load on its own?
Its frontmatter lists path patterns such as components folders, tsx and jsx files, tokens and theme folders, design-system folders and tailwind.config files. It also lists prompt phrases such as component library, design system, button, input, form, badge and pill.
Does the skill need the dembrandt engine?
No. The engine is optional. With it installed, get_findings runs a design-system lint over a real extraction and compute_drift scores drift between two extractions. The README says two other skills, extract-design and generate-ui-from-brand, do need the engine to read tokens from a live site.
How does the skill handle existing inconsistencies?
It tells the agent to audit what exists first. Extend a component with a variant instead of cloning it, promote a treatment that appears in two or three places, and migrate old styles toward new ones after confirming intent. For a styling review of a screen, critique is a separate option.
What license does the component-family-consistency skill use?
The dembrandt-skills repository is MIT licensed, per both the README and the GitHub license field. The README notes that changes to skills go through a pull request, and that a push to the main branch is live to every install.