getting-started.md

 1---
 2title: Getting started
 3tagline: "From zero to your first /polish pass in five minutes."
 4order: 1
 5description: "Install Impeccable, run /impeccable teach once to establish project context, and run /polish on something that already exists. The fastest path to seeing what Impeccable changes about AI-generated design."
 6---
 7
 8## What you'll build
 9
10You will end this tutorial with Impeccable installed in your project, a `.impeccable.md` file that captures your brand and audience, and one hand-polished page that went through a `/polish` pass. Total time: about five minutes.
11
12## Prerequisites
13
14- An AI coding harness: Claude Code, Cursor, Gemini CLI, Codex CLI, or any of the other supported tools.
15- A project with at least one HTML or component file you want to improve. A fresh scaffolded landing page works fine.
16
17## Step 1. Install
18
19From the root of your project, run:
20
21```
22npx skills add pbakaus/impeccable
23```
24
25This auto-detects your harness and writes the skill files to the right location (e.g., `.claude/skills/`, `.cursor/skills/`). Reload your harness and type `/`. You should see `/impeccable`, `/polish`, `/critique`, and the other commands in the autocomplete.
26
27## Step 2. Teach Impeccable about your project
28
29This is the most important step. Design without context produces generic output. The `/impeccable teach` command runs a short discovery interview and writes a `.impeccable.md` file at the root of your project.
30
31Run:
32
33```
34/impeccable teach
35```
36
37The skill will ask you a handful of questions:
38
39- **Who is this product for?** Be specific. Not "users" but "solo founders evaluating a new tool on their phone between meetings".
40- **What is the brand voice in three words?** Pick real words. "Warm and mechanical and opinionated" is better than "modern and clean".
41- **What should the interface feel like?** Concrete adjectives. "Calm, trustworthy, fast" or "playful, bold, a little chaotic".
42- **Any visual references?** Screenshots, sites, design systems you admire.
43- **Anti-references?** Things the product should explicitly not look like.
44
45Answer in your own words. The skill writes a `.impeccable.md` file with the answers. Every future skill call reads it automatically.
46
47Open `.impeccable.md` and read what it wrote. Edit anything that does not feel right. The file is yours.
48
49## Step 3. Polish something
50
51Pick a page that already exists. An about page, a settings screen, a pricing table, anything. Run:
52
53```
54/polish the pricing page
55```
56
57The skill will walk through alignment, spacing, typography, color, interaction states, transitions, and copy. It makes targeted fixes, not a rewrite. Expect a handful of small diffs that together lift the page from "done" to "done well".
58
59A typical polish pass looks like:
60
61```
62Visual alignment: fixed 3 off-grid elements
63Typography: tightened h1 kerning, fixed widow on feature list
64Color: replaced one hardcoded hex with --color-accent token
65Interaction: added missing hover state on FAQ items
66Motion: softened modal entrance to 220ms ease-out-quart
67Copy: removed stray 'Lorem' placeholder
68```
69
70Review the diff. If something does not feel right, ask the model to explain the change. If it still does not feel right, revert it. Impeccable is opinionated but not infallible.
71
72## What to try next
73
74- `/critique the landing page` runs a full design review with scoring, persona tests, and automated detection. It is the best way to find what to fix next.
75- `/audit the checkout` runs accessibility, performance, theming, responsive, and anti-pattern checks against the implementation. Useful before shipping.
76- `/impeccable craft a pricing page for enterprise customers` runs the full shape-then-build flow on a brand new feature.
77
78## Common issues
79
80- **The skill says "no design context found"**. You skipped step 2. Run `/impeccable teach` first.
81- **Commands do not appear in the harness**. Reload the harness after installing. If they still do not appear, check that the installer wrote files into the expected location (`.claude/skills/`, `.cursor/skills/`, etc.) and that your harness is picking up that directory.
82- **The polish pass rewrote something you liked**. Say so. Revert the change, tell the model which specific edit to undo, and continue from there.