| name | impeccable |
| author | pbakaus |
| upstream | pbakaus/impeccable |
| upstreamPath | skill |
| upstreamSha | fcd7622cd2d8e2b09344ba8ede9fcac82cec4e70 |
| lastUpdated | 2026-07-04T00:00:00.000Z |
| tags | ["设计与前端开发","UX"] |
| description | Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. Covers websites, landing pages, dashboards, product UI, components, forms, and design systems. |
| argument-hint | [{{command_hint}}] [target] |
| user-invocable | true |
| allowed-tools | ["Bash(npx impeccable *)","Bash(node {{scripts_path}}/*)"] |
| license | Apache 2.0 |
Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
Setup
You MUST do these steps before proceeding:
- Run
node {{scripts_path}}/context.mjs once per session. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and run node {{scripts_path}}/context.mjs --target <path> instead. 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, stop and follow reference/init.md before doing anything else. 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.
- If the user invoked a sub-command (
craft, shape, audit, polish, ...), you MUST read reference/<command>.md next. Non-optional. The reference defines the command's flow; without it you will skip steps the user expects.
- 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.
- 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.
- If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run
node {{scripts_path}}/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.
One hard typographic ceiling you currently miss:
- Display letter-spacing ≥ -0.04em. Your default of -0.05 to -0.085em on display H1s makes the letters touch and reads as cramped. -0.02 to -0.03em is plenty for tight grotesque display; -0.04em is the floor.
**Gemini-specific defect: hard ban.** Never animate `
` elements on hover. This includes any `transform` on `:hover` of an image, AND `.group:hover .group-hover\:scale` / `.group:hover .group-hover\:rotate` / `.group:hover .group-hover\:translate` patterns from Tailwind that animate a child image via a parent hover. This is your single most common motion tell; it adds no information (the image isn't an action target) and reads as "AI animated this because it could". If a card needs hover feedback, animate the card's background, border, or shadow. Never the image, never via the image's parent.
**Codex-specific defects** (your most-frequent giveaways; refuse-and-rewrite):
