impeccable
Installation
Summary
Frontend design and iteration for production-grade interfaces, from concept to ship.
- Covers full-surface design (landing pages, dashboards, product UI, components) and targeted refinement (typography, color, layout, motion, copy, accessibility, responsive behavior)
- Includes 20+ commands for building (
craft,shape), evaluating (critique,audit), refining (polish,bolder,quieter), and enhancing (animate,colorize,typeset) - Enforces production standards: contrast verification, semantic z-index, reduced-motion support, no overflow, battle-tested responsive behavior, and explicit anti-patterns (side-stripe borders, gradient text, glassmorphism as default)
- Integrates with project context (PRODUCT.md, DESIGN.md, existing tokens) to preserve brand identity and avoid cross-project monoculture; includes palette generation for new projects and live browser iteration mode
SKILL.md
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 .agents/skills/impeccable/scripts/context.mjsonce per session. If the request names or implies a file, route, or app inside a monorepo, infer the concrete path and runnode .agents/skills/impeccable/scripts/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 reportsNO_PRODUCT_MD, stop and followreference/init.mdbefore doing anything else. If the output ends with anUPDATE_AVAILABLEdirective, 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 readreference/<command>.mdnext. 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), readreference/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)registerfield in PRODUCT.md. - If the project is brand-new (no existing CSS tokens / theme / committed brand colors found in step 3), run
node .agents/skills/impeccable/scripts/palette.mjsto 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). GPT is capable of extraordinary work. Don't hold back.