Menú
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).
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
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.