UI design token refactor

Use this skill to turn ad hoc CSS or Tailwind styling into a maintainable, token-based UI system that another agent can safely update later.

Default workflow

1. Discover the project styling stack before changing code.

   • Check for package.json, Tailwind version/config, CSS entry points, CSS modules, Sass/Less, component libraries, Storybook, design-system packages, and theme toggles.
   • Identify whether the codebase is primarily vanilla CSS, CSS modules, Sass, Tailwind v4, Tailwind v3, or mixed.

2. Run or perform a style audit.

   • When repository files are available, prefer the bundled scripts/audit_style_tokens.py script to inventory raw colors, dimensions, typography values, and Tailwind utility patterns. Run it from the skill package or by absolute path, for example: python /path/to/ui-design-token-refactor/scripts/audit_style_tokens.py <project-root> --output style-token-audit.md.
   • Supplement the script with manual inspection of representative components and global styles.