design-system-fixer

Fix design token violations in VitalArc UI code from scanner reports.

1|Updated Jan 25, 2026
One-click install
npx skills add https://github.com/tanujsutaria/VitalArc --skill design-system-fixer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-system-fixer
Source: https://github.com/tanujsutaria/VitalArc/tree/main/.claude/skills/design-system-fixer
Command: npx skills add https://github.com/tanujsutaria/VitalArc --skill design-system-fixer

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? This Skill automatically fixes design token violations detected by the design-system-scanner, reducing manual correction time and ensuring consistency with the design system.

## Core Features & Use Cases

  • Automated token fixes: replaces hard-coded colors, spacings, typography, and icon sizes with design-system tokens.
  • Scanner-driven workflow: consumes a design-system-scanner report to apply deterministic corrections across VitalArc/UI code.
  • Build-verified fixes: runs a build after applying changes to verify no regressions.

### Quick Start Run in dry-run mode to preview changes, then execute fixes across the VitalArc/Presentation layer using the --all flag. To target a single file, use --file=<path>.

Frequently Asked Questions about design-system-fixer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automatically fix design token violations in my UI code?

You can automatically fix design token violations by running a scanner-driven tool that replaces hard-coded colors, spacings, typography, and icon sizes with design-system tokens. It consumes a scanner report to apply deterministic corrections across your UI code.

Can I preview design token fixes before applying them to the codebase?

Yes, you can preview design token fixes by running the tool in dry-run mode. This allows you to review the proposed changes for hard-coded values like colors and spacing across the UI presentation layer before committing them.

Do I need a specific environment to run design token linting and fixes?

Yes, you need a build-capable workstation to run design token linting and fixes. The environment must be able to compile the UI codebase because the tool runs a build after applying changes to verify that no regressions were introduced.

What is the best way to target a single file for design system token corrections?

The best way to target a single file for design system token corrections is to use the file targeting flag. This isolates the automated replacement of hard-coded colors, spacings, and typography to one specific path instead of applying changes across the entire presentation layer.

What happens if applying design system token replacements breaks the UI build?

If applying design system token replacements risks breaking the UI build, the tool includes a build verification step that runs immediately after applying changes. This detects regressions early, though you should always use dry-run mode first to review modifications.