Menu
Manage per-design-system lint rule presets, severities, and exemptions. Use when a design system needs different lint strictness (e.g. fintech needs strict contrast, editorial relaxes accent-overuse).
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Infer a design system's tokens + voice from a brand reference (screenshots or a URL) — vision-assisted. Use for /mds:system:create --mode extract, feeding the design-system-author skill.
Reason about color on-system — pick/adjust accent, surfaces, and status colors within a design system's palette, check contrast/accessibility, and propose token changes (not raw hex). Adapted from open-design's color-expert. Use for color decisions during build, review, or system edits.
Build a reusable, on-system React+Tailwind component from an intent. Use when creating or editing a component in emdesign. Composes design-system primitives from "@ds", references token roles only, emits a CSF story, and feeds the verify loop.
Author or maintain a design system's DESIGN.md + tokens.css (the contract). Use when fixing the SYSTEM rather than a component — adding tokens, tightening anti-patterns, or capturing visual rules. Adapted from open-design's design-md (Google Labs / Stitch).
Designer-who-codes visual audit + fix. Use to tighten a component before shipping — run the four-source critique, then make atomic, on-system fixes with before/after screenshots. Adapted from open-design's design-review (gstack) to emdesign's code-first loop.
Create or update a design system to the emdesign quality bar — author the 9-section DESIGN.md + tokens.css + base primitives. Use for the System flow (/mds:system:create | :update). Knows the four sources: brief, blank, import, extract.
| name | ds-lint-rules |
| description | Manage per-design-system lint rule presets, severities, and exemptions. Use when a design system needs different lint strictness (e.g. fintech needs strict contrast, editorial relaxes accent-overuse). |
| when | After creating or importing a design system, before building components against it. |
| workflow | configure |
| commands | ["ds lint-rules list","ds lint-rules set","ds lint-rules preset","ds conflicts"] |
Each design system category needs different lint rules. A fintech dashboard should fail on insufficient contrast; an editorial site might relax accent-overuse. This skill teaches you to configure the right rule set for your design system's purpose.
| Preset | Best For | Rules | When to Use |
|---|---|---|---|
editorial | Content-heavy, serif-led | off-token-color, accent-overuse, filler-copy, sans-display | Default — editorial/creative |
product | UI apps, dashboards | off-token-color, accent-overuse, emoji-icon, invented-metric | Standard UI applications |
fintech | Financial, data-dense | + strict-contrast, mono-data-values, no-decorative-accent | Banking, trading, data dashboards |
minimal | Clean, restrained | —accent-overuse, —external-image, + strict-spacing | Minimal/brand-focused |
brutalist | Bold, experimental | —accent-overuse (exempted), + no-focus-ring | Experimental/artistic |
a11y-strict | Accessibility-first | All rules at P0, +contrast-min-7-1, +focus-visible-required | Public sector, regulated |
1. List current rules → ds lint-rules list <id>
2. Assess fit → does the preset match the DS category?
3. Apply preset → ds lint-rules preset <id> <preset>
4. Adjust rules → ds lint-rules set <id> <rule> <severity>
5. Verify conflicts → ds conflicts <id>
emdesign ds lint-rules list <id>
Shows: preset name, applies list (active rules), exemptions list (disabled rules).
emdesign ds lint-rules preset atelier product
Changes the system to the product preset. Presets define:
# Make a rule blocking (P0)
emdesign ds lint-rules set atelier accent-overuse P0
# Disable a rule entirely
emdesign ds lint-rules set atelier accent-overuse off
# Lower severity (P1, P2)
emdesign ds lint-rules set atelier accent-overuse P1
emdesign ds conflicts <id>
Lists orphan or unused tokens — tokens declared but not referenced by any primitive.
| Severity | Meaning | Gate Impact |
|---|---|---|
| P0 | Blocking — must fix before ship | mustFix counter increments, gate fails |
| P1 | Warning — should fix | Increases composite score requirement |
| P2 | Advisory — informational | No gate impact |
| off | Disabled — not checked | Rule is exempted |
| Command | Purpose |
|---|---|
ds lint-rules list <id> | Show all active rules and exemptions |
ds lint-rules preset <id> <preset> | Apply a named preset |
ds lint-rules set <id> <rule> <severity> | Change rule severity |
ds conflicts <id> | List token conflicts/orphans |
preset replaces the entire applies/exemptions lists. Set individual rules AFTER applying the preset, not before.off adds it to exemptions, which is a different list from applies. It's removed from checking entirely.fintech and a11y-strict are demanding — they add contrast and accessibility rules that may fail on many existing components. Only apply if the design system was built for it.ds conflicts to verify.