diff --git a/content/site/skills/impeccable.md b/content/site/skills/impeccable.md index 8a87487f1..f139a173e 100644 --- a/content/site/skills/impeccable.md +++ b/content/site/skills/impeccable.md @@ -6,7 +6,11 @@ tagline: "The design intelligence behind every other skill." `/impeccable` is the foundation. It teaches your AI harness how to design, period. Every other command in this pack leans on it for design principles, anti-patterns, typography, color, and layout guidance. -Call `/impeccable` directly when you want freeform design with the full guidebook loaded. Call `/impeccable craft` for a shape-then-build flow with visual iteration. Call `/impeccable teach` once per project to set up design context. +There are three ways to use it: + +- **`/impeccable` (freeform)** -- Design with the full guidebook loaded. You describe what you want, and the model builds it with strong aesthetic opinions, anti-pattern awareness, and your project's design context. Best for when you already know what you want and just need it built well. +- **`/impeccable craft`** -- The full shape-then-build flow. It starts by running `/shape` internally (a structured discovery interview about purpose, audience, and goals), then moves into implementation with visual iteration, checking the result in the browser until the polish is high. Best for brand-new features where you want to think before you build, without managing the steps yourself. +- **`/impeccable teach`** -- One-time project setup. Runs a short discovery interview about your brand, audience, and aesthetic direction, then writes a `.impeccable.md` file that every future skill call reads automatically. Run this once per project before doing any design work. ## How it works diff --git a/content/site/skills/shape.md b/content/site/skills/shape.md index 2d5ff05b8..e4a687d76 100644 --- a/content/site/skills/shape.md +++ b/content/site/skills/shape.md @@ -19,7 +19,9 @@ The skill runs a structured discovery interview in conversation. It will not wri - **Design goals**: the single most important thing, the intended feeling, reference examples - **Constraints**: technical, content, accessibility, localization -You answer naturally. The skill asks follow-ups, not a form. At the end it produces a design brief: a structured artifact you can hand to `/impeccable craft`, `/impeccable`, or any other implementation skill. +You answer naturally. The skill asks follow-ups, not a form. At the end it produces a design brief: a structured artifact you can hand to `/impeccable` or any other implementation skill. + +Note: if you want the full flow -- discovery interview, then straight into building -- use `/impeccable craft` instead. It runs `/shape` internally, then continues into implementation with visual iteration. `/shape` standalone is for when you want just the brief, so you can take it to whatever implementation approach you prefer. ## Try it @@ -29,13 +31,7 @@ You answer naturally. The skill asks follow-ups, not a form. At the end it produ Expect a 5 to 10 question conversation. The skill asks things like "who is the person opening this, and are they already committed or still curious" and "what happens when the user has unsubscribed from everything, do we hide the feature or show something". You answer, and a brief materializes. -Then: - -``` -/impeccable craft using the brief above -``` - -The craft run will reference the brief at every decision. You should feel the difference compared to building without it. +From there you can hand the brief to `/impeccable`, `/polish`, or any other skill. Or just use it as a reference while you build by hand. ## Pitfalls diff --git a/content/site/tutorials/critique-with-overlay.md b/content/site/tutorials/critique-with-overlay.md index 4eeafebd1..5ba0a1b98 100644 --- a/content/site/tutorials/critique-with-overlay.md +++ b/content/site/tutorials/critique-with-overlay.md @@ -25,7 +25,7 @@ From your harness, run: /critique the pricing page at localhost:3000/pricing ``` -The skill kicks off two independent assessments in parallel. Do not skip the "independent" part. They are in separate sub-agents or separate tabs so one does not bias the other. +The skill kicks off two independent assessments in parallel. They run in separate sub-agents so one does not bias the other. ### What the LLM assessment does @@ -57,19 +57,11 @@ Every outlined element has a floating label naming the rule that fired. Hover an You have three ways to open it: -1. **[Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf)**: one-click activation on any page. -2. **Inside `/critique`**: the skill opens the overlay automatically during the browser portion of the assessment. -3. **Standalone CLI**: `npx impeccable live` starts a local overlay server, then you paste any URL. +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 `/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 `