only pull questions with valid multiple choice answers. also, there are some formatting issues with some questions and answers: some characters are not displayed or formatted correctly on the webpage

add a 2nd paragraph beneath the intro paragraph in index.html and make the text smaller. it should say: App built w/ Opus 4.8 and <a href="https://entire.io" target="_blank" rel="noopener">Entire</a>, the next developer platform capturing prompts, decisions, and reasoning behind AI-generated code and attaching it to your commits in git so the "why" behind your code never gets lost. Get on the waitlist now!

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 ──────────────────── 🌀 Building list of assets... ✨ Read 3 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 3 new or modified static assets to upload. Proceeding with upload...

• /index.html
• /styles.css
• /app.js Uploaded 1 of 3 assets Uploaded 2 of 3 assets Uploaded 3 of 3 assets ✨ Success! Uploaded 3 files (0.74 sec)

Total Upload: 2203.49 KiB / gzip: 754.06 KiB Worker Startup Time: 22 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (5.54 sec) Deployed humans-vs-hle triggers (1.16 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: 396471e2-cdfd-4630-bf2c-37729b6f0d3e</bash-stdout><bash-stderr></bash-stderr>

<bash-input>entire trail resume 1 --repo elizabethsiegle/humans-vs-hle --branch change-quiz-format-to-be-1-question-at-a-time</bash-input>

<bash-stdout>Warning: could not load trail checkpoint sessions: branch 'change-quiz-format-to-be-1-question-at-a-time' not found locally or on origin Trail #1 change quiz format to be 1 question at a time Status: open · Phase: planning · Branch: change-quiz-format-to-be-1-question-at-a-time Base: main URL: https://entire.io/gh/elizabethsiegle/humans-vs-hle/trails/1

Checkpoint sessions: unavailable before restore: branch 'change-quiz-format-to-be-1-question-at-a-time' not found locally or on origin

Findings: open 0 high 0 medium 0 low 0 resolved 0 dismissed 0 stale 0 no current high/medium open findings

Commands: entire trail finding 1 --json entire trail resume 1 --repo elizabethsiegle/humans-vs-hle --branch change-quiz-format-to-be-1-question-at-a-time

Fetching branch 'change-quiz-format-to-be-1-question-at-a-time' from origin... ✓ Switched to branch change-quiz-format-to-be-1-question-at-a-time Keeping existing local session log ✓ Restored checkpoint 9243c1562b9c (1 session).

To continue this checkpoint session: claude -r 739a3716-a9fd-47f2-8ce1-054527e0254b # please explain how the leaderboard maintains state. is it...</bash-stdout><bash-stderr></bash-stderr>

the user answers 1 question at a time and after submitting their answer, they see if they got it right or incorrect. keep track of how many questions each player gets correct and incorrect. once they get 5 incorrect, the quiz ends and they can add their nickname/name to the leaderboard

Base directory for this skill: /private/tmp/claude-501/bundled-skills/2.1.210/48a5628ef8c0b4c0dcb00d0230227402/run

Running means launching the actual app and interacting with it — not the test suite, not an import of an internal function and a console.log. The app as a user (human or programmatic) would meet it: the CLI at its command, the server at its socket, the GUI at its window.

First: does a project skill already cover this?

A project skill that launches this app is the repo's verified path — its author already cold-started from a Linux container and committed what worked: the exact apt-get line, the env vars, the patches, the driver. Use it instead of rediscovering.

• One describes launching/driving this app → read that SKILL.md and follow it verbatim. Don't paraphrase; don't skip the patches.
• Mega-repo, several plausible, no clear match → ask the user which unit to run.
• Stale (fails on mechanics unrelated to your task) → tell the user; offer to refresh it via /run-skill-generator.
• Nothing about running → fall back to the patterns below.

Otherwise: match the shape, use the pattern

Pick the row closest to your project. Each example walks through launch + first interaction; ignore any trailing "write the skill" section — you're using the recipe, not authoring one.

If nothing fits, start from the closest match and adapt. For a web app, examples/playwright.md — drive it with chromium-cli, no custom driver needed. For a desktop app, examples/electron.md — it has the _electron REPL driver skeleton and the tmux wrapping.

Drive it, don't just launch it

Launching with no interaction proves the entrypoint resolves. That's not running the app — it's typechecking with extra steps. Drive it to a point where a user would see something:

• CLI → type a representative command, check the exit code and output.
• Server → hit the route the diff touches with curl, read the body.
• TUI → send-keys a navigation, capture-pane the result.
• GUI → click the button, screenshot the window. Look at the screenshot. A blank frame is a failure to launch.

If the fallback pattern didn't work out of the box — you had to install packages, set env vars, patch config, or write a driver — recommend /run-skill-generator in your report so that work gets captured as a project skill. If it just worked, don't.

<bash-input>git add .</bash-input>

<bash-stdout>warning: adding embedded git repository: .claude/worktrees/readme hint: You've added another git repository inside your current repository. hint: Clones of the outer repository will not contain the contents of hint: the embedded repository and will not know how to obtain it. hint: If you meant to add a submodule, use: hint: hint: git submodule add <url> .claude/worktrees/readme hint: hint: If you added this path by mistake, you can remove it from the hint: index with: hint: hint: git rm --cached .claude/worktrees/readme hint: hint: See "git help submodule" for more information. hint: Disable this message with "git config set advice.addEmbeddedRepo false"</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git commit -m '1 q at a time'</bash-input>

<bash-stdout>[change-quiz-format-to-be-1-question-at-a-time 3baee6b] 1 q at a time 11 files changed, 361 insertions(+), 638 deletions(-)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git push -u origin change-quiz-format-to-be-1-question-at-a-time</bash-input>

<bash-stdout>[entire] Pushing entire/checkpoints/v1 to origin.... done To https://github.com/elizabethsiegle/humans-vs-hle.git ae6ffde..3baee6b change-quiz-format-to-be-1-question-at-a-time -> change-quiz-format-to-be-1-question-at-a-time branch 'change-quiz-format-to-be-1-question-at-a-time' set up to track 'origin/change-quiz-format-to-be-1-question-at-a-time'.</bash-stdout><bash-stderr></bash-stderr>

<bash-input>npm run dev</bash-input>

<bash-stdout>Command did not complete within its 120s timeout and was moved to the background (ID: bbsa8u804). Output is being written to: /private/tmp/claude-501/-Users-lizziesiegle-Desktop-demos-2-idk-humans-vs-hle/b9784efd-1482-491e-b241-64f40d77bbc5/tasks/bbsa8u804.output. You will be notified when it completes. To check interim output, use Read on that file path.</bash-stdout><bash-stderr></bash-stderr>

<bash-input>npm run dev</bash-input>

<bash-stdout>Command did not complete within its 120s timeout and was moved to the background (ID: b77i9n5i3). Output is being written to: /private/tmp/claude-501/-Users-lizziesiegle-Desktop-demos-2-idk-humans-vs-hle/b9784efd-1482-491e-b241-64f40d77bbc5/tasks/b77i9n5i3.output. You will be notified when it completes. To check interim output, use Read on that file path.</bash-stdout><bash-stderr></bash-stderr>

after i click submit on a question, the submit answer button does not go away. it should go away temporarily after it is revealed whether the answer was correct or not. also, next question should be hidden on a question until the answer for the current question was submitted. this means only 1 of those buttons is shown at a time

ok now after i click next question, the total score says 0/5 even though i got the first question correct so it should say 1/5

no. so i got 1/5 and then it kept going past 5, but the score did not update. the score should update past 5 if the user keeps going (aka if they dont miss 5) but then once they miss 5, do not show next question button and then show the textbox to get their username to add to the leaderboard and show the leaderboard

restart the leaderboard. make it empty

<bash-input>npm run dev</bash-input>

<bash-stdout>Command did not complete within its 120s timeout and was moved to the background (ID: bhvjh645j). Output is being written to: /private/tmp/claude-501/-Users-lizziesiegle-Desktop-demos-2-idk-humans-vs-hle/b9784efd-1482-491e-b241-64f40d77bbc5/tasks/bhvjh645j.output. You will be notified when it completes. To check interim output, use Read on that file path.</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git add .</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git commit -m '1 q at a time and better adding'</bash-input>

<bash-stdout>[change-quiz-format-to-be-1-question-at-a-time a185166] 1 q at a time and better adding 7 files changed, 101 insertions(+), 52 deletions(-)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git push -u origin change-quiz-format-to-be-1-question-at-a-time</bash-input>

<bash-stdout>[entire] Pushing entire/checkpoints/v1 to origin.... done To https://github.com/elizabethsiegle/humans-vs-hle.git 3baee6b..a185166 change-quiz-format-to-be-1-question-at-a-time -> change-quiz-format-to-be-1-question-at-a-time branch 'change-quiz-format-to-be-1-question-at-a-time' set up to track 'origin/change-quiz-format-to-be-1-question-at-a-time'.</bash-stdout><bash-stderr></bash-stderr>

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 3 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 3 new or modified static assets to upload. Proceeding with upload...

• /index.html
• /styles.css
• /app.js Uploaded 1 of 3 assets Uploaded 2 of 3 assets Uploaded 3 of 3 assets ✨ Success! Uploaded 3 files (1.07 sec)

Total Upload: 2204.18 KiB / gzip: 754.20 KiB Worker Startup Time: 21 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (6.07 sec) Deployed humans-vs-hle triggers (0.68 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: a2460c62-339e-4c5a-98a1-1da5c1cc915d</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git status</bash-input>

<bash-stdout>On branch change-quiz-format-to-be-1-question-at-a-time Your branch is up to date with 'origin/change-quiz-format-to-be-1-question-at-a-time'.

Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: public/index.html

no changes added to commit (use "git add" and/or "git commit -a")</bash-stdout><bash-stderr></bash-stderr>

yes

<bash-input>entire trail resume 2 --repo elizabethsiegle/humans-vs-hle --branch display-quiz-questions-and-also-benchmark-questi</bash-input>

<bash-stdout></bash-stdout><bash-stderr>Warning: could not load trail checkpoint sessions: branch 'display-quiz-questions-and-also-benchmark-questi' not found locally or on origin Trail #2 display quiz questions and also benchmark questions Status: open · Phase: planning · Branch: display-quiz-questions-and-also-benchmark-questi Base: main URL: https://entire.io/gh/elizabethsiegle/humans-vs-hle/trails/2

Checkpoint sessions: unavailable before restore: branch 'display-quiz-questions-and-also-benchmark-questi' not found locally or on origin

Findings: open 0 high 0 medium 0 low 0 resolved 0 dismissed 0 stale 0 no current high/medium open findings

Commands: entire trail finding 2 --json entire trail resume 2 --repo elizabethsiegle/humans-vs-hle --branch display-quiz-questions-and-also-benchmark-questi

Fetching branch 'display-quiz-questions-and-also-benchmark-questi' from origin... Error: failed to checkout branch: checkout failed: error: Your local changes to the following files would be overwritten by checkout: public/index.html Please commit your changes or stash them before you switch branches. Aborting: exit status 1 </bash-stderr>

push this branch

i thought we merged already

yes please

begin working on trail #2: on a separate page, please display all the possible quiz questions and benchmark questions. distinguish between the two and make them searchable in a chart on a webpage

140 quiz questions in the repo and then link to where they can view the rest of them.

<bash-input>(git push -u origin display-quiz-questions-and-also-benchmark-questi</bash-input>

<bash-stdout></bash-stdout><bash-stderr>(eval):1: parse error near `display-quiz-questio...' </bash-stderr>

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 ──────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 4 new or modified static assets to upload. Proceeding with upload...

• /questions.html
• /styles.css
• /questions.js
• /index.html Uploaded 1 of 4 assets Uploaded 2 of 4 assets Uploaded 4 of 4 assets ✨ Success! Uploaded 4 files (1 already uploaded) (1.43 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 29 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (10.38 sec) Deployed humans-vs-hle triggers (1.79 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: ce12e7a2-6dd3-43bc-a0f6-3827cb85ee20</bash-stdout><bash-stderr></bash-stderr>

the links from the questions do not work, they return 404 error like https://huggingface.co/datasets/cais/hle

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 4 new or modified static assets to upload. Proceeding with upload...

• /questions.html
• /app.js
• /questions.js
• /index.html Uploaded 1 of 4 assets Uploaded 3 of 4 assets Uploaded 4 of 4 assets ✨ Success! Uploaded 4 files (1 already uploaded) (0.82 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 32 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (10.93 sec) Deployed humans-vs-hle triggers (1.16 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: 82cf47b8-24cb-4969-8dca-f1304b8e8fb8</bash-stdout><bash-stderr></bash-stderr>

links still return 404 https://huggingface.co/datasets/cais/hle

amazing it is good. can you make the chart prettier? easier to search by category

<bash-input>git add .</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git commit -m 'display qs and better links'</bash-input>

<bash-stdout>[display-quiz-questions-and-also-benchmark-questi c0497d6] display qs and better links 3 files changed, 243 insertions(+), 104 deletions(-)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git push</bash-input>

<bash-stdout>[entire] Pushing entire/checkpoints/v1 to origin.... done To https://github.com/elizabethsiegle/humans-vs-hle.git 7d01804..c0497d6 display-quiz-questions-and-also-benchmark-questi -> display-quiz-questions-and-also-benchmark-questi</bash-stdout><bash-stderr></bash-stderr>

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 3 new or modified static assets to upload. Proceeding with upload...

• /questions.html
• /questions.js
• /styles.css Uploaded 1 of 3 assets Uploaded 2 of 3 assets Uploaded 3 of 3 assets ✨ Success! Uploaded 3 files (2 already uploaded) (1.22 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 22 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (7.04 sec) Deployed humans-vs-hle triggers (0.95 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: 0d757518-18bc-47ae-94bb-cb719e8c87cc</bash-stdout><bash-stderr></bash-stderr>

yes please

yes please

make the page more obvious that this is a meme/joke. These questions are very difficult. call it the adult SAT

on /questions, the 140 quiz questions and 2,500 in the benchmark buttons are not clickable. remove them please.

I moved the intro-credit to beneath the leaderboard button but it needs more padding as it's encroaching on the view leaderboard button

<bash-input>git add .</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git commit -m 'css, change prose'</bash-input>

<bash-stdout>[display-quiz-questions-and-also-benchmark-questi c84f5b9] css, change prose 4 files changed, 40 insertions(+), 55 deletions(-)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git push</bash-input>

<bash-stdout>[entire] Pushing entire/checkpoints/v1 to origin..... done To https://github.com/elizabethsiegle/humans-vs-hle.git c0497d6..c84f5b9 display-quiz-questions-and-also-benchmark-questi -> display-quiz-questions-and-also-benchmark-questi</bash-stdout><bash-stderr></bash-stderr>

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 ──────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 4 new or modified static assets to upload. Proceeding with upload...

• /questions.html
• /styles.css
• /index.html
• /questions.js Uploaded 1 of 4 assets Uploaded 2 of 4 assets Uploaded 4 of 4 assets ✨ Success! Uploaded 4 files (1 already uploaded) (1.83 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 24 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (6.92 sec) Deployed humans-vs-hle triggers (1.53 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: 8f747d67-b58b-4a8e-a31e-90b7dae56a02</bash-stdout><bash-stderr></bash-stderr>

yes

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 1 new or modified static asset to upload. Proceeding with upload...

• /index.html Uploaded 1 of 1 asset ✨ Success! Uploaded 1 file (4 already uploaded) (0.93 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 28 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (7.17 sec) Deployed humans-vs-hle triggers (0.92 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: 2b4cacd6-7651-4a2d-86c3-b80a2f788345</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git add public/index.html && git commit -m 'tweak home copy' && git push</bash-input>

<bash-stdout>[display-quiz-questions-and-also-benchmark-questi a928ee6] tweak home copy 1 file changed, 3 insertions(+), 4 deletions(-) [entire] Pushing entire/checkpoints/v1 to origin.... done To https://github.com/elizabethsiegle/humans-vs-hle.git c84f5b9..a928ee6 display-quiz-questions-and-also-benchmark-questi -> display-quiz-questions-and-also-benchmark-questi</bash-stdout><bash-stderr></bash-stderr>

<bash-input>/plugin marketplace add pbakaus/impeccable</bash-input>

<bash-stdout></bash-stdout><bash-stderr>(eval):1: no such file or directory: /plugin </bash-stderr>

Base directory for this skill: /Users/lizziesiegle/.claude/plugins/cache/impeccable/impeccable/3.9.1/skills/impeccable

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Setup

You MUST do these steps before proceeding:

1. Run node .claude/skills/impeccable/scripts/context.mjs once per session; if the runtime shows this skill's loaded base directory, run node <skill-base-dir>/scripts/context.mjs instead. Keep cwd/workdir at the user's project, not the skill directory. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and append --target <path> to the same command. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD: divert into reference/init.md first when the user invoked init, teach, craft, or shape, or when their wording clearly maps to one of those from-scratch build flows (for example: "build/create/make a landing page", "design a new app", or "shape a feature"). Captured product context is the point of those flows. For any other command, a scoped evaluate / refine / enhance / fix / iterate request against existing code, do not divert into init. The existing code is the context: proceed with the requested command, infer the register from the surface in focus (step 4), and offer /impeccable init once as a suggestion the user can take later. A missing PRODUCT.md must never block a scoped request. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
2. If the user invoked a sub-command (craft, shape, audit, polish, ...), you MUST read the command's reference next: reference/<command>.md, or the native variant from the Commands table (e.g. reference/audit.native.md) when the project platform is native (ios / android / adaptive, per the context.mjs directive). One file, not both. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read reference/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read reference/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.
5. If PRODUCT.md's ## Platform is ios or android, also read reference/<platform>.md (HIG / Material 3 conventions). adaptive (cross-platform, ships both) reads both files. web, absent, or unrecognized: nothing extra to read. context.mjs prints the directive when one applies.
6. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run node .claude/skills/impeccable/scripts/palette.mjs to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.

Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). Claude is capable of extraordinary work. Don't hold back.

General rules

Color

• Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
• Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

Typography

• Cap body line length at 65–75ch.
• Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
• Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
• Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
• Use text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans.

Layout

• Vary spacing for rhythm.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Flexbox for 1D, Grid for 2D. Don't default to Grid when flex-wrap would be simpler.
• For responsive grids without breakpoints: repeat(auto-fit, minmax(280px, 1fr)).
• Build a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip). Never arbitrary values like 999 or 9999.

Motion

• Motion should be intentional, and not be an afterthought. consider it as part of the build.
• Don't animate CSS layout properties unless truly needed.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
• Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc)
• Reduced motion is not optional. Every animation needs a @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition.
• Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
• Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
• Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.

Interaction

• Dropdowns rendered with position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context.

New projects only (when no prior work exists)

Color & Theme

• Use OKLCH.
• The cream / sand / beige body bg is the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
• Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
• When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe.".Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
• Pick a color strategy before picking colors. Four steps on the commitment axis:
  • Restrained: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
  • Drenched: the surface IS the color. Brand heroes, campaign pages.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

• Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
• Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
• Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
• The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Tiny uppercase tracked eyebrow above every section. The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold; it appears on 55-95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
• Numbered section markers as default scaffolding (01 / 02 / 03). Putting 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
• Text that overflows its container. Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes; the second one catches what the first one misses.

• First-order: if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
• Second-order: if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Commands

Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.

Routing rules

1. No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD the project has no captured context yet, so lead the menu with /impeccable init as the top recommendation (one line on why) and still show the rest below; don't silently jump into init. Otherwise run node .claude/skills/impeccable/scripts/context-signals.mjs once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Never auto-run a command; the recommendation is a suggestion the user confirms.

   Reason over the signals; there is no score to obey:

   • setup.hasDesign false while setup.hasCode true → document (capture the visual system).
   • critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /impeccable critique <surface> is a strong default.
   • critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.
   • git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.
   • devServer.running true → live is available for in-browser iteration; if false, don't lead with live. live and the bundled detect.mjs are web-only. If setup.platform is ios, android, or adaptive, don't lead with either; the browser overlay and the HTML rule engine don't apply to native app code.
   • Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to setup.register.

   If scan.targets is non-empty and setup.platform is not ios/android/adaptive, run node .claude/skills/impeccable/scripts/detect.mjs --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx; it reads HTML/CSS, so skip it for native projects). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; never block the suggestion on it.

   Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.

2. First word matches a command (table above OR pin / unpin / hooks): load its reference file (on native platforms, the table's native variant; Setup step 2's one-file rule) and follow its instructions. Everything after the command name is the target.

3. First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "the colors feel flat" → colorize): load that command's reference (same native-variant rule) and proceed as if invoked. If two commands could fit, ask once which.

4. No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke /impeccable.

If the first word is craft or shape, or routing rule 3 clearly maps the user's intent to either command, setup still runs first, but the matching reference (reference/craft.md or reference/shape.md) owns the rest of the flow. Both are from-scratch build flows: if setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.

teach is a deprecated alias for init: if the user types it, load reference/init.md and proceed as if they ran init.

Pin / Unpin

Pin creates a standalone shortcut so /<command> invokes /impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.

Hooks

/impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in reference/hooks.md; load it when the user invokes /impeccable hooks with any argument.

ARGUMENTS: init

<bash-input>git add .impeccable</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git add PRODUCT.md CLAUDE.md DESIGN.md</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

Base directory for this skill: /Users/lizziesiegle/.claude/plugins/cache/impeccable/impeccable/3.9.1/skills/impeccable

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Setup

You MUST do these steps before proceeding:

1. Run node .claude/skills/impeccable/scripts/context.mjs once per session; if the runtime shows this skill's loaded base directory, run node <skill-base-dir>/scripts/context.mjs instead. Keep cwd/workdir at the user's project, not the skill directory. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and append --target <path> to the same command. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD: divert into reference/init.md first when the user invoked init, teach, craft, or shape, or when their wording clearly maps to one of those from-scratch build flows (for example: "build/create/make a landing page", "design a new app", or "shape a feature"). Captured product context is the point of those flows. For any other command, a scoped evaluate / refine / enhance / fix / iterate request against existing code, do not divert into init. The existing code is the context: proceed with the requested command, infer the register from the surface in focus (step 4), and offer /impeccable init once as a suggestion the user can take later. A missing PRODUCT.md must never block a scoped request. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
2. If the user invoked a sub-command (craft, shape, audit, polish, ...), you MUST read the command's reference next: reference/<command>.md, or the native variant from the Commands table (e.g. reference/audit.native.md) when the project platform is native (ios / android / adaptive, per the context.mjs directive). One file, not both. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read reference/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read reference/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.
5. If PRODUCT.md's ## Platform is ios or android, also read reference/<platform>.md (HIG / Material 3 conventions). adaptive (cross-platform, ships both) reads both files. web, absent, or unrecognized: nothing extra to read. context.mjs prints the directive when one applies.
6. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run node .claude/skills/impeccable/scripts/palette.mjs to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.

Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). Claude is capable of extraordinary work. Don't hold back.

General rules

Color

• Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
• Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

Typography

• Cap body line length at 65–75ch.
• Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
• Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
• Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
• Use text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans.

Layout

• Vary spacing for rhythm.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Flexbox for 1D, Grid for 2D. Don't default to Grid when flex-wrap would be simpler.
• For responsive grids without breakpoints: repeat(auto-fit, minmax(280px, 1fr)).
• Build a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip). Never arbitrary values like 999 or 9999.

Motion

• Motion should be intentional, and not be an afterthought. consider it as part of the build.
• Don't animate CSS layout properties unless truly needed.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
• Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc)
• Reduced motion is not optional. Every animation needs a @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition.
• Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
• Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
• Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.

Interaction

• Dropdowns rendered with position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context.

New projects only (when no prior work exists)

Color & Theme

• Use OKLCH.
• The cream / sand / beige body bg is the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
• Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
• When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe.".Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
• Pick a color strategy before picking colors. Four steps on the commitment axis:
  • Restrained: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
  • Drenched: the surface IS the color. Brand heroes, campaign pages.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

• Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
• Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
• Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
• The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Tiny uppercase tracked eyebrow above every section. The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold; it appears on 55-95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
• Numbered section markers as default scaffolding (01 / 02 / 03). Putting 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
• Text that overflows its container. Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes; the second one catches what the first one misses.

• First-order: if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
• Second-order: if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Commands

Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.

Routing rules

1. No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD the project has no captured context yet, so lead the menu with /impeccable init as the top recommendation (one line on why) and still show the rest below; don't silently jump into init. Otherwise run node .claude/skills/impeccable/scripts/context-signals.mjs once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Never auto-run a command; the recommendation is a suggestion the user confirms.

   Reason over the signals; there is no score to obey:

   • setup.hasDesign false while setup.hasCode true → document (capture the visual system).
   • critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /impeccable critique <surface> is a strong default.
   • critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.
   • git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.
   • devServer.running true → live is available for in-browser iteration; if false, don't lead with live. live and the bundled detect.mjs are web-only. If setup.platform is ios, android, or adaptive, don't lead with either; the browser overlay and the HTML rule engine don't apply to native app code.
   • Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to setup.register.

   If scan.targets is non-empty and setup.platform is not ios/android/adaptive, run node .claude/skills/impeccable/scripts/detect.mjs --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx; it reads HTML/CSS, so skip it for native projects). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; never block the suggestion on it.

   Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.

2. First word matches a command (table above OR pin / unpin / hooks): load its reference file (on native platforms, the table's native variant; Setup step 2's one-file rule) and follow its instructions. Everything after the command name is the target.

3. First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "the colors feel flat" → colorize): load that command's reference (same native-variant rule) and proceed as if invoked. If two commands could fit, ask once which.

4. No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke /impeccable.

If the first word is craft or shape, or routing rule 3 clearly maps the user's intent to either command, setup still runs first, but the matching reference (reference/craft.md or reference/shape.md) owns the rest of the flow. Both are from-scratch build flows: if setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.

teach is a deprecated alias for init: if the user types it, load reference/init.md and proceed as if they ran init.

Pin / Unpin

Pin creates a standalone shortcut so /<command> invokes /impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.

Hooks

/impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in reference/hooks.md; load it when the user invokes /impeccable hooks with any argument.

ARGUMENTS: polish the main page

Base directory for this skill: /Users/lizziesiegle/.claude/plugins/cache/impeccable/impeccable/3.9.1/skills/impeccable

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Setup

You MUST do these steps before proceeding:

1. Run node .claude/skills/impeccable/scripts/context.mjs once per session; if the runtime shows this skill's loaded base directory, run node <skill-base-dir>/scripts/context.mjs instead. Keep cwd/workdir at the user's project, not the skill directory. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and append --target <path> to the same command. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD: divert into reference/init.md first when the user invoked init, teach, craft, or shape, or when their wording clearly maps to one of those from-scratch build flows (for example: "build/create/make a landing page", "design a new app", or "shape a feature"). Captured product context is the point of those flows. For any other command, a scoped evaluate / refine / enhance / fix / iterate request against existing code, do not divert into init. The existing code is the context: proceed with the requested command, infer the register from the surface in focus (step 4), and offer /impeccable init once as a suggestion the user can take later. A missing PRODUCT.md must never block a scoped request. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
2. If the user invoked a sub-command (craft, shape, audit, polish, ...), you MUST read the command's reference next: reference/<command>.md, or the native variant from the Commands table (e.g. reference/audit.native.md) when the project platform is native (ios / android / adaptive, per the context.mjs directive). One file, not both. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read reference/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read reference/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.
5. If PRODUCT.md's ## Platform is ios or android, also read reference/<platform>.md (HIG / Material 3 conventions). adaptive (cross-platform, ships both) reads both files. web, absent, or unrecognized: nothing extra to read. context.mjs prints the directive when one applies.
6. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run node .claude/skills/impeccable/scripts/palette.mjs to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.

Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). Claude is capable of extraordinary work. Don't hold back.

General rules

Color

• Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
• Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

Typography

• Cap body line length at 65–75ch.
• Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
• Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
• Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
• Use text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans.

Layout

• Vary spacing for rhythm.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Flexbox for 1D, Grid for 2D. Don't default to Grid when flex-wrap would be simpler.
• For responsive grids without breakpoints: repeat(auto-fit, minmax(280px, 1fr)).
• Build a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip). Never arbitrary values like 999 or 9999.

Motion

• Motion should be intentional, and not be an afterthought. consider it as part of the build.
• Don't animate CSS layout properties unless truly needed.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
• Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc)
• Reduced motion is not optional. Every animation needs a @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition.
• Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
• Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
• Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.

Interaction

• Dropdowns rendered with position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context.

New projects only (when no prior work exists)

Color & Theme

• Use OKLCH.
• The cream / sand / beige body bg is the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
• Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
• When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe.".Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
• Pick a color strategy before picking colors. Four steps on the commitment axis:
  • Restrained: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
  • Drenched: the surface IS the color. Brand heroes, campaign pages.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

• Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
• Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
• Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
• The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Tiny uppercase tracked eyebrow above every section. The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold; it appears on 55-95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
• Numbered section markers as default scaffolding (01 / 02 / 03). Putting 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
• Text that overflows its container. Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes; the second one catches what the first one misses.

• First-order: if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
• Second-order: if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Commands

Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.

Routing rules

1. No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD the project has no captured context yet, so lead the menu with /impeccable init as the top recommendation (one line on why) and still show the rest below; don't silently jump into init. Otherwise run node .claude/skills/impeccable/scripts/context-signals.mjs once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Never auto-run a command; the recommendation is a suggestion the user confirms.

   Reason over the signals; there is no score to obey:

   • setup.hasDesign false while setup.hasCode true → document (capture the visual system).
   • critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /impeccable critique <surface> is a strong default.
   • critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.
   • git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.
   • devServer.running true → live is available for in-browser iteration; if false, don't lead with live. live and the bundled detect.mjs are web-only. If setup.platform is ios, android, or adaptive, don't lead with either; the browser overlay and the HTML rule engine don't apply to native app code.
   • Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to setup.register.

   If scan.targets is non-empty and setup.platform is not ios/android/adaptive, run node .claude/skills/impeccable/scripts/detect.mjs --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx; it reads HTML/CSS, so skip it for native projects). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; never block the suggestion on it.

   Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.

2. First word matches a command (table above OR pin / unpin / hooks): load its reference file (on native platforms, the table's native variant; Setup step 2's one-file rule) and follow its instructions. Everything after the command name is the target.

3. First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "the colors feel flat" → colorize): load that command's reference (same native-variant rule) and proceed as if invoked. If two commands could fit, ask once which.

4. No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke /impeccable.

If the first word is craft or shape, or routing rule 3 clearly maps the user's intent to either command, setup still runs first, but the matching reference (reference/craft.md or reference/shape.md) owns the rest of the flow. Both are from-scratch build flows: if setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.

teach is a deprecated alias for init: if the user types it, load reference/init.md and proceed as if they ran init.

Pin / Unpin

Pin creates a standalone shortcut so /<command> invokes /impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.

Hooks

/impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in reference/hooks.md; load it when the user invokes /impeccable hooks with any argument.

ARGUMENTS: audit

Base directory for this skill: /Users/lizziesiegle/.claude/plugins/cache/impeccable/impeccable/3.9.1/skills/impeccable

Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.

Setup

You MUST do these steps before proceeding:

1. Run node .claude/skills/impeccable/scripts/context.mjs once per session; if the runtime shows this skill's loaded base directory, run node <skill-base-dir>/scripts/context.mjs instead. Keep cwd/workdir at the user's project, not the skill directory. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and append --target <path> to the same command. If you've already seen its output in this conversation, do not re-run it. The script either prints the project's PRODUCT.md (and DESIGN.md when present) as a markdown block, or tells you it's missing. Follow whatever it prints. If it reports NO_PRODUCT_MD: divert into reference/init.md first when the user invoked init, teach, craft, or shape, or when their wording clearly maps to one of those from-scratch build flows (for example: "build/create/make a landing page", "design a new app", or "shape a feature"). Captured product context is the point of those flows. For any other command, a scoped evaluate / refine / enhance / fix / iterate request against existing code, do not divert into init. The existing code is the context: proceed with the requested command, infer the register from the surface in focus (step 4), and offer /impeccable init once as a suggestion the user can take later. A missing PRODUCT.md must never block a scoped request. If the output ends with an UPDATE_AVAILABLE directive, follow it (ask the user once about updating, then continue). It never blocks the current task.
2. If the user invoked a sub-command (craft, shape, audit, polish, ...), you MUST read the command's reference next: reference/<command>.md, or the native variant from the Commands table (e.g. reference/audit.native.md) when the project platform is native (ios / android / adaptive, per the context.mjs directive). One file, not both. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
3. Familiarize yourself with any existing design system, conventions, and components in the code. Read at least one project file (CSS / tokens / theme / a representative component or page). Required even when you've loaded a sub-command reference in step 2. Don't reinvent the wheel; use what's there when it works, branch out when the UX wins.
4. Read the matching register reference. This is non-optional; skipping it produces generic output. If the project is marketing, a landing page, a campaign, long-form content, or a portfolio (design IS the product), read reference/brand.md. If it is app UI, admin, a dashboard, or a tool (design SERVES the product), read reference/product.md. Pick by first match: (1) task cue ("landing page" vs "dashboard"); (2) surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md.
5. If PRODUCT.md's ## Platform is ios or android, also read reference/<platform>.md (HIG / Material 3 conventions). adaptive (cross-platform, ships both) reads both files. web, absent, or unrecognized: nothing extra to read. context.mjs prints the directive when one applies.
6. If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run node .claude/skills/impeccable/scripts/palette.mjs to receive a brand seed color and composition guidance. This is the anchor for your primary brand color. Compose the rest of the palette (bg, surface, ink, accent, muted) around it per the script's instructions. Use OKLCH throughout. Skip this step only if step 3 found committed brand colors in existing tokens; in that case identity-preservation wins.

Design guidance

Produce ready-to-ship, production-grade code, not prototypes or starting points. Take no shortcuts unless the user asks for them (when in doubt, ask). Don't stop until arriving at a complete implementation (beautiful, responsive, fast, precise, bug-free, on brand). You take attention to detail seriously: every page, section or component crafted is battle tested using the tools available to you (browser screenshotting, computer use, etc). Claude is capable of extraordinary work. Don't hold back.

General rules

Color

• Verify contrast. Body text must hit ≥4.5:1 against its background; large text (≥18px or bold ≥14px) needs ≥3:1. Placeholder text needs the same 4.5:1, not the muted-gray default. The most common failure: muted gray body text on a tinted near-white. If the contrast is even close, bump the body color toward the ink end of the ramp; light gray "for elegance" is the single biggest reason AI designs feel hard to read.
• Gray text on a colored background looks washed out. Use a darker shade of the background's own hue, or a transparency of the text color.

Typography

• Cap body line length at 65–75ch.
• Don't pair fonts that are similar but not identical (two geometric sans-serifs, two humanist sans-serifs). Pair on a contrast axis (serif + sans, geometric + humanist) or use one family in multiple weights.
• Hero / display heading ceiling: clamp() max ≤ 6rem (~96px). Above that the page is shouting, not designing.
• Display heading letter-spacing floor: ≥ -0.04em. Anything tighter and letters touch; cramped, not "designed".
• Use text-wrap: balance on h1–h3 for even line lengths; text-wrap: pretty on long prose to reduce orphans.

Layout

• Vary spacing for rhythm.
• Cards are the lazy answer. Use them only when they're truly the best affordance. Nested cards are always wrong.
• Flexbox for 1D, Grid for 2D. Don't default to Grid when flex-wrap would be simpler.
• For responsive grids without breakpoints: repeat(auto-fit, minmax(280px, 1fr)).
• Build a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip). Never arbitrary values like 999 or 9999.

Motion

• Motion should be intentional, and not be an afterthought. consider it as part of the build.
• Don't animate CSS layout properties unless truly needed.
• Ease out with exponential curves (ease-out-quart / quint / expo). No bounce, no elastic.
• Use libraries for more advanced motion needs (e.g. motion, gsap, anime.js, lenis etc)
• Reduced motion is not optional. Every animation needs a @media (prefers-reduced-motion: reduce) alternative: typically a crossfade or instant transition.
• Staggering the items within one list is legitimate. The tell is the uniform reflex (one identical entrance applied to every section), not motion itself; each reveal should fit what it reveals. Suppressing the reflex is never a reason to ship a page with no motion at all.
• Reveal animations must enhance an already-visible default. Don't gate content visibility on a class-triggered transition; transitions pause on hidden tabs and headless renderers, so the reveal never fires and the section ships blank.
• Premium motion materials are not just transform/opacity. Blur, backdrop-filter, clip-path, mask, and shadow/glow are part of the palette when they materially improve the effect and stay smooth.

Interaction

• Dropdowns rendered with position: absolute inside an overflow: hidden or overflow: auto container will be clipped. Use the native <dialog> / popover API, position: fixed, or a portal to escape the stacking context.

New projects only (when no prior work exists)

Color & Theme

• Use OKLCH.
• The cream / sand / beige body bg is the saturated AI default of 2026. The whole warm-neutral band (OKLCH L 0.84-0.97, C < 0.06, hue 40-100) reads as cream/sand/paper/parchment regardless of what you call it. Token names like --paper, --cream, --sand, --bone, --flour, --linen, --parchment, --wheat, --biscuit, --ivory are tells in themselves. If the brief is "warm, traditional, family-coastal-Italian" or "magazine-warm" or "editorial-restraint", DO NOT translate that into a near-white warm-tinted bg; that's the AI move. Pick: (a) a saturated brand color as the body (terracotta, oxblood, deep ochre, near-black), (b) a true off-white at chroma 0 (or chroma toward the brand's own hue, not toward warmth-by-default), or (c) a darker mid-tone tinted neutral that's clearly the brand's own. "Warmth" in the brand is carried by accent + typography + imagery, not by body bg.
• Tinted neutrals: add 0.005–0.015 chroma toward the brand's hue. Don't default-tint toward warm or cool "because the brand feels that way"; that's the cross-project monoculture move.
• When picking a theme: Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe.".Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.
• Pick a color strategy before picking colors. Four steps on the commitment axis:
  • Restrained: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
  • Committed: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
  • Full palette: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
  • Drenched: the surface IS the color. Brand heroes, campaign pages.

Absolute bans

Match-and-refuse. If you're about to write any of these, rewrite the element with different structure.

• Side-stripe borders. border-left or border-right greater than 1px as a colored accent on cards, list items, callouts, or alerts. Never intentional. Rewrite with full borders, background tints, leading numbers/icons, or nothing.
• Gradient text. background-clip: text combined with a gradient background. Decorative, never meaningful. Use a single solid color. Emphasis via weight or size.
• Glassmorphism as default. Blurs and glass cards used decoratively. Rare and purposeful, or nothing.
• The hero-metric template. Big number, small label, supporting stats, gradient accent. SaaS cliché.
• Identical card grids. Same-sized cards with icon + heading + text, repeated endlessly.
• Tiny uppercase tracked eyebrow above every section. The 2023-era kicker (small all-caps text with wide tracking, "ABOUT" "PROCESS" "PRICING" above each heading) is now the saturated AI scaffold; it appears on 55-95% of generations regardless of brief, which is the definition of a tell. One named kicker as a deliberate brand system is voice; an eyebrow on every section is AI grammar. Choose a different cadence.
• Numbered section markers as default scaffolding (01 / 02 / 03). Putting 01 · About / 02 · Process / 03 · Pricing above every section is the eyebrow trope one tier deeper: reach for it because "landing pages do this" and you're scaffolding by reflex. Numbers earn their place when the section actually IS a sequence (a real 3-step process, an ordered flow, a typed timeline) and the order carries information the reader needs. One deliberate numbered sequence on one page is voice; numbered eyebrows on every section across the site is AI grammar.
• Text that overflows its container. Long heading words plus large clamp scales plus narrow grids cause headline overflow on tablet/mobile. Test the heading copy at every breakpoint; if it overflows, reduce the clamp max or rewrite the copy. The viewport is part of the design.

The AI slop test

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

Category-reflex check. Run at two altitudes; the second one catches what the first one misses.

• First-order: if someone could guess the theme + palette from the category alone, it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
• Second-order: if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's reflex-reject aesthetic lanes list catches the currently-saturated families.

Commands

Plus three management commands: pin <command>, unpin <command>, and hooks <on|off|status|...>, detailed below.

Routing rules

1. No argument: the user is asking "what should I do?" Make the menu context-aware instead of static. Setup has already run context.mjs; if that reported NO_PRODUCT_MD the project has no captured context yet, so lead the menu with /impeccable init as the top recommendation (one line on why) and still show the rest below; don't silently jump into init. Otherwise run node .claude/skills/impeccable/scripts/context-signals.mjs once and read its JSON, then lead with the 2-3 highest-value next commands, each with a one-line reason pulled from the signals, followed by the full menu (the table above, grouped by category). Never auto-run a command; the recommendation is a suggestion the user confirms.

   Reason over the signals; there is no score to obey:

   • setup.hasDesign false while setup.hasCode true → document (capture the visual system).
   • critique.latest is null → the project has never been critiqued; for a set-up project with a real surface, offering /impeccable critique <surface> is a strong default.
   • critique.latest with a low score or non-zero p0 / p1 → polish (it reads that snapshot as its backlog), or re-run critique if the snapshot looks stale.
   • git.changedFiles pointing at one surface → scope audit or polish to those files specifically, naming them.
   • devServer.running true → live is available for in-browser iteration; if false, don't lead with live. live and the bundled detect.mjs are web-only. If setup.platform is ios, android, or adaptive, don't lead with either; the browser overlay and the HTML rule engine don't apply to native app code.
   • Otherwise group by intent exactly as init's "Recommend starting points" step does (build new / improve what's there / iterate visually), tailored to setup.register.

   If scan.targets is non-empty and setup.platform is not ios/android/adaptive, run node .claude/skills/impeccable/scripts/detect.mjs --json <scan.targets joined by spaces> once (the bundled detector over local files: no network, no npx; it reads HTML/CSS, so skip it for native projects). scan.via tells you what they are: git-changes (the markup/style files in your dirty tree, the most relevant set), source-dir (e.g. src, app), html, or root. Fold the hits into your picks: many quality / contrast hits → audit or polish; a specific slop family → the matching command (gradient text or eyebrows → quieter / typeset, flat or gray palette → colorize, and so on). It's a real, current signal that beats guessing. If detect errors or the tree is large and slow, skip it and recommend the user run audit themselves; never block the suggestion on it.

   Keep it to 2-3 pointed picks with the exact command to type. The menu stays the fallback; the recommendation is the lede.

2. First word matches a command (table above OR pin / unpin / hooks): load its reference file (on native platforms, the table's native variant; Setup step 2's one-file rule) and follow its instructions. Everything after the command name is the target.

3. First word doesn't match, but the intent clearly maps to one command (e.g. "fix the spacing" → layout, "rewrite this error message" → clarify, "the colors feel flat" → colorize): load that command's reference (same native-variant rule) and proceed as if invoked. If two commands could fit, ask once which.

4. No clear command match: general design invocation. Apply the setup steps, the General rules, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke /impeccable.

If the first word is craft or shape, or routing rule 3 clearly maps the user's intent to either command, setup still runs first, but the matching reference (reference/craft.md or reference/shape.md) owns the rest of the flow. Both are from-scratch build flows: if setup invokes init as a blocker, finish init, refresh context, then resume the original command and target.

teach is a deprecated alias for init: if the user types it, load reference/init.md and proceed as if they ran init.

Pin / Unpin

Pin creates a standalone shortcut so /<command> invokes /impeccable <command> directly. Unpin removes it. The script writes to every harness directory present in the project.

Valid <command> is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.

Hooks

/impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> manages the design detector hook for this project. The hook auto-runs the detector after direct UI file edits and surfaces findings as system reminders. Full flow is in reference/hooks.md; load it when the user invokes /impeccable hooks with any argument.

ARGUMENTS: document

/impeccable

a and b

push and deploy

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... No updated asset files to upload. Proceeding with deployment... Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 26 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (12.46 sec) Deployed humans-vs-hle triggers (0.98 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: f1c4f0e5-9c6e-4546-81d1-8f7a16808ead</bash-stdout><bash-stderr></bash-stderr>

how are the questions received? include that in the readme

<bash-input>git add README.md</bash-input>

<bash-stdout>(Bash completed with no output)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git commit -m 'readme with how questions were gotten'</bash-input>

<bash-stdout>[display-quiz-questions-and-also-benchmark-questi fd743c2] readme with how questions were gotten 1 file changed, 27 insertions(+), 1 deletion(-)</bash-stdout><bash-stderr></bash-stderr>

<bash-input>git push</bash-input>

<bash-stdout>[entire] Pushing entire/checkpoints/v1 to origin.... done To https://github.com/elizabethsiegle/humans-vs-hle.git bb07e44..fd743c2 display-quiz-questions-and-also-benchmark-questi -> display-quiz-questions-and-also-benchmark-questi</bash-stdout><bash-stderr></bash-stderr>

merge pls

do that cleanup please

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... No updated asset files to upload. Proceeding with deployment... Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 29 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (5.91 sec) Deployed humans-vs-hle triggers (1.22 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: e5b826ed-2d3d-4063-ae30-d51108c10957</bash-stdout><bash-stderr></bash-stderr>

add a warning somewhere on the homepage that says "google and llm usage allowed bc like my comp graphics textbook, it won't help on an open-book exam"

<bash-input>npx wrangler deploy</bash-input>

<bash-stdout> ⛅️ wrangler 4.110.0 (update available 4.111.0) ─────────────────────────────────────────────── 🌀 Building list of assets... ✨ Read 5 files from the assets directory /Users/lizziesiegle/Desktop/demos-2-idk/humans-vs-hle/public 🌀 Starting asset upload... 🌀 Found 1 new or modified static asset to upload. Proceeding with upload...

• /index.html Uploaded 1 of 1 asset ✨ Success! Uploaded 1 file (4 already uploaded) (0.72 sec)

Total Upload: 2204.55 KiB / gzip: 754.33 KiB Worker Startup Time: 30 ms Your Worker has access to the following bindings: Binding Resource
env.LEADERBOARD (LeaderboardDO) Durable Object
env.ASSETS Assets

Uploaded humans-vs-hle (6.58 sec) Deployed humans-vs-hle triggers (0.69 sec) https://humans-vs-hle.lizzie-siegle5086.workers.dev Current Version ID: b6ceb85b-1deb-4d76-8bf4-0e2ba406137b</bash-stdout><bash-stderr></bash-stderr>