diff --git a/content/site/skills/clarify.md b/content/site/skills/clarify.md index 47d7f3298..276c6a805 100644 --- a/content/site/skills/clarify.md +++ b/content/site/skills/clarify.md @@ -19,7 +19,7 @@ The skill rewrites text across the surfaces where most UX copy problems live: 5. **Tooltips and helper text**: add information the label cannot carry, never restate it. 6. **Confirmation dialogs**: name the consequences, not the action. -The skill uses the audience and mental state from `.impeccable.md` to tune voice. Technical audience gets precise language. Consumer audience gets plain speech. Rushed users get short text. Anxious users (payment, delete) get reassurance. +The skill uses the audience and mental state from `PRODUCT.md` to tune voice. Technical audience gets precise language. Consumer audience gets plain speech. Rushed users get short text. Anxious users (payment, delete) get reassurance. ## Try it @@ -38,5 +38,5 @@ Before and after, typical: ## Pitfalls - **Writing cleverer, not clearer.** Clarify is not for voice upgrades. If the copy is already clear, do not reach for this skill. Use `/impeccable delight` instead when you want personality. -- **Skipping the audience question.** Clarify needs to know who is reading. If `.impeccable.md` does not specify audience technical level, the rewrites will be generic. +- **Skipping the audience question.** Clarify needs to know who is reading. If `PRODUCT.md` does not specify audience technical level, the rewrites will be generic. - **Running clarify on marketing copy.** Clarify is for functional UX text: labels, errors, instructions. Marketing copy needs a different set of moves and a human writer. diff --git a/content/site/skills/colorize.md b/content/site/skills/colorize.md index 9dbb52598..0cfdf57c1 100644 --- a/content/site/skills/colorize.md +++ b/content/site/skills/colorize.md @@ -33,6 +33,6 @@ Expected diff: ## Pitfalls -- **Running it without a brand hue.** Colorize needs a starting point. If `.impeccable.md` does not specify one, it will ask. Do not let it pick from the AI color palette defaults. +- **Running it without a brand hue.** Colorize needs a starting point. If `PRODUCT.md` does not specify one, it will ask. Do not let it pick from the AI color palette defaults. - **Expecting it to fix the AI color palette problem.** If your design already has purple gradients and cyan neon, you need `/impeccable quieter` first, then colorize can rebuild. - **Using it on already-colorful interfaces.** That is a `/impeccable quieter` job. Colorize adds, it does not subtract. diff --git a/content/site/skills/delight.md b/content/site/skills/delight.md index 8d7d913c4..ba982ea1e 100644 --- a/content/site/skills/delight.md +++ b/content/site/skills/delight.md @@ -18,7 +18,7 @@ The skill hunts for delight opportunities in the places most designers skip: 4. **Microcopy**: button labels, tooltips, error messages, placeholder text. Tiny copy with taste. 5. **Easter eggs and secondary states**: things users discover that reward paying attention. -The skill reads the brand tone from `.impeccable.md`. A serious analytics tool gets serious delight (dry, precise, a little clever). A playful consumer app gets more overt personality. It does not force humor where humor is wrong for the audience. +The skill reads the brand tone from `PRODUCT.md`. A serious analytics tool gets serious delight (dry, precise, a little clever). A playful consumer app gets more overt personality. It does not force humor where humor is wrong for the audience. The rule is: every delight moment must still work perfectly if you delete the delight. Nothing depends on the smile. @@ -37,6 +37,6 @@ Expected additions: ## Pitfalls -- **Forcing humor.** Not every brand is playful. If the brand voice in `.impeccable.md` is "clinical and precise", delight adds clever restraint, not jokes. +- **Forcing humor.** Not every brand is playful. If the brand voice in `PRODUCT.md` is "clinical and precise", delight adds clever restraint, not jokes. - **Over-decorating.** One moment of delight is memorable. Twenty becomes noise. The skill is conservative on purpose. - **Running delight before polish.** Polish fixes what is wrong. Delight adds what is missing. In that order. diff --git a/content/site/skills/impeccable.md b/content/site/skills/impeccable.md index 94e97cbae..d8f3474a8 100644 --- a/content/site/skills/impeccable.md +++ b/content/site/skills/impeccable.md @@ -18,7 +18,7 @@ For more structured flows, reach for the specialized commands in the sidebar. `/ Most AI-generated UIs fail the same way: generic fonts, purple gradients, card grids on card grids, glassmorphism everywhere. `/impeccable` gives your AI a strong point of view. It loads an opinionated design handbook plus a long list of anti-patterns, then pushes the model to commit to a specific aesthetic direction before writing a single line of code. -The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. On first use in a project, it runs the `teach` flow automatically: a short interview about your brand, audience, and aesthetic direction, saved to `.impeccable.md` so every future command reads it without asking again. +The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. On first use in a project, it runs the `teach` flow automatically: a short interview about your brand, audience, and aesthetic direction, saved to `PRODUCT.md` so every future command reads it without asking again. ## Try it @@ -32,6 +32,25 @@ The skill has a **Context Gathering Protocol** built in. It will not design anyt Both prompts are vague on purpose. `/impeccable` will pick a strong aesthetic direction, commit to non-default fonts, avoid the AI color palette, and make the kind of specific choices that a designer would make. No command name to pick first, no step-by-step workflow to follow. +## Pin commands back as shortcuts + +v3.0 consolidated 18 standalone skills into a single `/impeccable` with sub-commands. If you miss the short form of a specific command, pin it back: + +``` +/impeccable pin critique +``` + +From now on, `/critique` invokes `/impeccable critique` directly. It writes a lightweight redirect skill that delegates to the parent, so updates to the skill flow through without re-pinning. + +Useful pins to try: + +- `/impeccable pin polish` for final-pass work +- `/impeccable pin audit` for deterministic a11y/perf checks +- `/impeccable pin live` for the browser iteration flow +- `/impeccable pin critique` for design review + +To remove: `/impeccable unpin critique`. Pins live as directories prefixed with `i-` in your harness skills folder (`.claude/skills/i-critique/`, `.cursor/skills/i-critique/`, etc.), so you can also delete them manually. + ## Pitfalls - **Treating it like a style guide.** It is an opinionated design partner, not a linter. The defaults exist to raise the floor, not to overrule your judgment. If you have a real reason to push back (brand guideline, accessibility constraint, user research that says otherwise), push back and explain why. The skill will work with you. What produces worse output is ignoring the opinion without a reason. diff --git a/content/site/skills/typeset.md b/content/site/skills/typeset.md index 0bfc1aad8..8c31a0864 100644 --- a/content/site/skills/typeset.md +++ b/content/site/skills/typeset.md @@ -37,6 +37,6 @@ Expected diff: ## Pitfalls -- **Asking for a new font without context.** Typeset will pick based on the `.impeccable.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic. +- **Asking for a new font without context.** Typeset will pick based on the `PRODUCT.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic. - **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/impeccable layout`. - **Expecting fluid clamp scales on app UIs.** Typeset uses fixed rem scales for app interfaces. Fluid typography is for marketing and content pages where line length varies dramatically. diff --git a/content/site/tutorials/critique-with-overlay.md b/content/site/tutorials/critique-with-overlay.md index e370d14ca..7bb71304f 100644 --- a/content/site/tutorials/critique-with-overlay.md +++ b/content/site/tutorials/critique-with-overlay.md @@ -29,7 +29,7 @@ The skill kicks off two independent assessments in parallel. They run in separat ### What the LLM assessment does -The first assessment reads your source code and, if browser automation is available, opens the live page in a new tab. It walks the full impeccable skill DO/DON'T catalog and scores the page against Nielsen's 10 heuristics, the 8-item cognitive load checklist, and the brand fit from your `.impeccable.md`. +The first assessment reads your source code and, if browser automation is available, opens the live page in a new tab. It walks the full impeccable skill DO/DON'T catalog and scores the page against Nielsen's 10 heuristics, the 8-item cognitive load checklist, and the brand fit from your `PRODUCT.md`. It labels the tab it opens with `[LLM]` in the title so you can tell which one is which. @@ -55,11 +55,10 @@ Impeccable ships with a visual mode that highlights every detected anti-pattern Every outlined element has a floating label naming the rule that fired. Hover an outline to see the full finding. This is exactly what you will see on your own page. -You have three ways to open it: +You have two ways to open it: 1. **[Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf)**: one-click activation on any page. Click the Impeccable icon in the toolbar and every anti-pattern gets highlighted instantly. 2. **Inside `/impeccable critique`**: the skill opens a browser tab labeled `[Human]` with the detector active during the browser portion of the assessment. You do not need to do anything extra. -3. **Standalone CLI**: `npx impeccable live` starts a local server that serves the detector script. You inject it into any page by adding a ` - - - diff --git a/public/js/demo-renderer.js b/public/js/demo-renderer.js index 8d6121489..bd7061118 100644 --- a/public/js/demo-renderer.js +++ b/public/js/demo-renderer.js @@ -124,7 +124,7 @@ export function renderCommandDemo(commandId) {
3. Save
- Writes a .impeccable.md file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically. + Writes a PRODUCT.md file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically.
Run once per project. Then forget it exists.
diff --git a/public/privacy.html b/public/privacy.html index 4139e711e..3a41097f0 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -77,8 +77,5 @@

Contact

Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.

- - -