Example skill
Design refactor page
Migrates one UI file to the Stack File · Character language, then verifies it.
v0.3.0 Updated
Written for the STACK IT FAST codebase and published as a worked example. Read it for the shape of a good skill; the
method skills are the ones to install in your own project.
What it does
Takes one file path — an Astro page, a React component or a layout — and
moves it to the design system: picks ink or paper for each section, swaps
hand-rolled markup for @stackitfast/ui components, places Stacky or a
sticker where it has a role, and sentence-cases the UI copy.
When it triggers
Only when you run it explicitly with a file path, as the per-file step of a redesign rollout.
What’s inside
- An inventory step with the design lint, so nothing changes silently.
- The surface decision (ink shell or paper panel) per section.
- Verification: typecheck, design lint, WCAG contrast from the real tokens, a web-design-guidelines audit, and screenshots at 1440px and a real 390px mobile viewport.
Example prompt
/design-refactor-page apps/web/src/pages/explore.astro