Design refactor page

What it does

Takes one file path — an Astro page, a React component, or a Tailwind config — and walks it through a fixed pipeline: load the design system, inventory every non-compliant class or raw hex value in the file, apply the refactor, typecheck, run the contrast checker, and finish with a design guidelines audit.

When it triggers

This skill only runs when explicitly invoked (it does not auto-trigger on generic “design” prompts). Use it after stackitfast-design-system has already told you what the target state looks like, when you’re ready to apply that state to one specific file.

What’s inside

• An inventory step that greps for raw hex codes, default Tailwind palette classes, banned shadow utilities, and outdated icon stroke widths before any edit is made.
• A typecheck step (astro check or tsc --noEmit, chosen by file type).
• A contrast check against the design system’s pre-verified color pairs.
• A final web-design-guidelines audit pass.
• Scope guardrails: never touches .agents/rules/, packages/db/, API routes, or raster assets, and never introduces a second theme.

Example prompt

Refactor apps/web/src/pages/explore.astro to the new design system.