Skip to main content

Auditing Widget Design

Use the widget-design-guide skill to audit and fix design system violations in your widget — hardcoded colors, fixed sizes, inline styles — against the Invent design system (Tailwind 4 + shadcn/ui + @invent/tailwind-integration).

The skill also acts as a reference: it activates automatically when you ask design questions during normal development.

Install​

In Claude Code (start it by running claude in your terminal first if it isn't already open), run:

/plugin install widget-design-guide@invent-skills

This is a Claude Code slash command — not a shell command. It only works at the Claude Code prompt.

Audit your widget​

Make sure your terminal's working directory is the widget's project root, then start Claude Code there:

cd path/to/your-widget
claude

At the Claude Code prompt, describe what you want in natural language. For example:

audit this widget for design system violations and fix them

To preview violations without making changes (a report only, no edits):

audit this widget for design system violations but don't change anything, just report what you find

These are natural-language requests to Claude — not shell commands. The audit scans all .tsx / .ts files in src/ (excluding tests, mocks, and type declarations) and fixes hardcoded colors, sizes, and inline styles by swapping them for design tokens.

Reference mode​

The skill also activates by natural-language keywords during normal development. At the Claude Code prompt, just ask things like:

  • "what color token should I use for the primary action?"
  • "what's the right way to add a loading state?"
  • "how do I make this widget responsive?"

The skill loads the relevant reference files (token tables, typography specs, widget anatomy, state patterns, accessibility guidelines) on demand. No slash command needed.