| name | impeccable |
| description | Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks. |
| argument-hint | [{{command_hint}}] [target] |
| user-invocable | true |
| allowed-tools | ["Bash(npx impeccable *)"] |
| license | Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. |
Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft.
Setup (non-optional)
Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project.
1. Context gathering
Two files at the project root, case-insensitive:
- PRODUCT.md — required. Users, brand, tone, anti-references, strategic principles.
- DESIGN.md — optional, strongly recommended. Colors, typography, elevation, components.
Load both in one call:
node {{scripts_path}}/load-context.mjs
Consume the full JSON output. Never pipe through head, tail, grep, or jq.
If the output is already in this session's conversation history, don't re-run. Exceptions requiring a fresh load: you just ran {{command_prefix}}impeccable teach or {{command_prefix}}impeccable document (they rewrite the files), or the user manually edited one.
{{command_prefix}}impeccable live already warms context via live.mjs — if you've run live.mjs, don't also run load-context.mjs this session.
If PRODUCT.md is missing, empty, or placeholder ([TODO] markers, <200 chars): run {{command_prefix}}impeccable teach, then resume the user's original task with the fresh context.
If DESIGN.md is missing: nudge once per session ("Run {{command_prefix}}impeccable document for more on-brand output"), then proceed.
2. Register
Every design task is brand (marketing, landing, campaign, long-form content, portfolio — design IS the product) or product (app UI, admin, dashboard, tool — design SERVES the product).
Identify before designing. Priority: (1) cue in the task itself ("landing page" vs "dashboard"); (2) the surface in focus (the page, file, or route being worked on); (3) register field in PRODUCT.md. First match wins.
If PRODUCT.md lacks the register field (legacy), infer it once from its "Users" and "Product Purpose" sections, then cache the inferred value for the session. Suggest the user run {{command_prefix}}impeccable teach to add the field explicitly.
Load the matching reference: reference/brand.md or . The shared design laws below apply to both.
