ds-guard

When to invoke (auto-trigger)

Invoke this skill automatically whenever:

• Any .css file is edited
• A .tsx / .jsx file is edited and the diff contains className, style=, or CSS custom properties
• A new component is created
• A new CSS class is introduced

Do NOT wait for the user to ask. Run as part of the normal post-edit flow for any styling change.

The trigger depends on this description matching. To make the reminder deterministic, you can add your own PostToolUse hook in settings.json; this repo does not ship one. The hook has to print JSON with hookSpecificOutput.additionalContext: plain text on stdout only shows in the transcript view and never reaches the model. It fires after every Edit, Write, or MultiEdit, not just styling edits, so the reminder still leaves it to the model to decide whether the edit touched styling. Minimal example:

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write|MultiEdit",
        "hooks": [
          {
            "type": "command",
            "command": "echo '{\"hookSpecificOutput\": {\"hookEventName\": \"PostToolUse\", \"additionalContext\": \"If this edit touched styling (.css, className, style=), run the ds-guard skill.\"}}'"
          }
        ]
      }
    ]
  }
}

Effort gating: at high/xhigh/max run the full audit against the token inventory and showcase (Steps 1+); at lower effort a quick spot-check of the diff's hardcoded values is enough.

DS Guard — Design System Enforcement

Purpose

Audit a diff or set of files to ensure every styling decision goes through the project's design system token layer. Catch violations before they land.

Step 1 — Discover the token inventory

Find the project's token source files:

• Look for src/lib/theme/themes/*.css, tokens.css, design-tokens.*, or similar
• Extract all defined --* custom property names
• Note the token namespaces in use (e.g. --color-*, --space-*, --font-*, --radius-*)

If no token files are found, ask the user where the design system is defined before proceeding.