Design commands
Impeccable
Every design skill command, with a ready example prompt.
- /impeccableCommandTyped alone, it looks at where this project stands and suggests the next command. If there is no PRODUCT.md yet, it suggests init first.
- /impeccable initCommandOne-time setup for a project. It asks you questions, then writes PRODUCT.md (who uses it, the brand, the guiding principles), which every other command reads.
- /impeccable shapeCommandPlans how a page should work and look before any code is written. It asks a few questions and writes a design brief for you to approve. For a new page or a new look, it then makes three image mockups, you pick one, and it builds to match.
- /impeccable documentCommandWrites DESIGN.md by reading the code you already have: colors, fonts, spacing and the building blocks of the interface.
- /impeccable extractCommandFinds styles that repeat across the app and turns them into shared settings and pieces. Use it when the look has drifted out of sync.
- /impeccable critiqueCommandReviews how easy a screen is to use: what stands out, how things are organized, and how much it asks you to think. Gives scores and tests it from the view of different kinds of users.
- /impeccable auditCommandRuns technical checks: accessibility, speed, light and dark themes, how it fits different screens, and common mistakes. Ranks problems from P0 (worst) to P3. Checks phone apps against Apple's and Google's rules.
- /impeccable polishCommandThe last pass before you ship. Fixes alignment, spacing, consistency and small details.
- /impeccable bolderCommandMakes a safe or bland design stand out more, without making it harder to use.
- /impeccable quieterCommandTones down a design that is too loud or busy.
- /impeccable distillCommandRemoves what isn't needed so the screen is less cluttered.
- /impeccable hardenCommandGets a screen ready for real use: error messages, very long text, other languages and unusual data.
- /impeccable onboardCommandDesigns what new users see first, what empty screens show, and the moments that get people to start using the product.
- /impeccable animateCommandAdds motion that has a purpose, plus small animated responses to clicks and taps, as part of a design pass.
- /impeccable colorizeCommandAdds color in chosen places to an interface that looks flat or gray.
- /impeccable typesetCommandFixes the font choice, which text stands out most, text sizes and how easy it is to read.
- /impeccable layoutCommandFixes spacing, the visual rhythm of a page, and screens where nothing clearly stands out.
- /impeccable delightCommandAdds personality and small touches people remember.
- /impeccable overdriveCommandGoes beyond the usual with advanced graphics, bouncy realistic motion and effects that react as you scroll. For moments meant to impress.
- /impeccable clarifyCommandRewrites confusing on-screen text, labels and error messages.
- /impeccable adaptCommandMakes a design work on different screen sizes, devices and platforms, including phone apps built with SwiftUI, Compose, React Native and Flutter.
- /impeccable optimizeCommandFinds and fixes slow loading, choppy scrolling or drawing, large images and too much code sent to the browser.
- /impeccable liveCommandClick an element in the app running on your computer and see different versions of it swapped in right away.
- /impeccable generateCommandName an element and the change you want, and get as many versions as you ask for to flip through and pick from.
- /impeccable hooks on|off|statusCommandTurns on or off the design check that runs on its own after you edit interface files, or shows its status. It can also ignore a rule, file or value you have accepted, or reset those choices.
- /impeccable doctorCommandFinds and fixes places where PRODUCT.md, DESIGN.md and the installed version no longer match.
- /impeccable pin <command>CommandMakes a shortcut so a command like /audit works without typing /impeccable first. Unpin removes the shortcut.