System / Skills / Design System Guardrails

Design System Guardrails

Compose, don't invent.

Install

npx skills@latest add doughawk25/claude-skills --skill design-system-guardrails

Then type /design-system-guardrails in your coding agent.

What it does

Design System Guardrails enforces one design system on all UI work. Under this skill the agent acts as composer, not creator — assembling screens only from the system's existing components and tokens, and flagging anything that doesn't exist instead of quietly inventing it.

When a task needs something the system doesn't have, the skill says so plainly, offers the nearest system-legal alternative, and files a component request so the gap reaches the system owner.

It's system-agnostic: it enforces whichever design system the current project declares, not a fixed one, so the same skill works across projects that each have their own system.

When to reach for it

Building, modifying, styling, or prototyping any user interface — components, screens, pages, layouts, or one-off UI experiments
Even when the design system isn't mentioned by name
Whenever someone asks for a new component, a custom color, a type style, or any visual change, so the request is checked against the system first

When to skip it

Work with no rendered UI at all — scripts, data work, backend logic. Otherwise there's no soft exit for UI work: a user who explicitly insists on a one-off deviation gets it, but the deviation is marked in the code and a component request is still filed so the system owner hears about it.

How it works

Select the system

Resolve which design system governs the project: a design-system.md config, then a CLAUDE.md section, then detecting it from the project, then asking and offering to write the config.

Inventory

Read the actual component directories and token files before building — never work from memory of what design systems usually have.

Compose

Existing components and token values only — no raw hex, no ad-hoc type sizes. The system itself is read-only; supported variants and props are fair game.

Flag gaps

Say plainly what's missing and offer the nearest system-legal alternative.

File component requests

Write a dated request file in design-system-requests/ routed to the system owner, so the system grows deliberately instead of by accident.

Configuration

The skill reads a design-system.md file at the target project's root declaring the system repo or package, where components and tokens live, and who owns the system. Drop this template in and fill it in:

# Design system

- **System repo / package:** <GitHub URL or npm package name>
- **Components live in:** <paths, e.g. components/ (ui/, primitives/, layout/, motion/)>
- **Design tokens live in:** <path, e.g. styles/tokens.css>
- **System owner (component requests go to):** <name — email or channel>

Compatibility

Works in Claude Code and most coding agents via the skills CLI.

Source

The skill is maintained in the open — read the raw file, browse the folder, or grab a packaged release.

GitHub folder Raw SKILL.md Download .skill All releases