impeccable

SKILL.md

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

This skill gives you the tools and permission to create design that earns to be called out-of-distribution craft: Whereas before, your design work would have been safe, timid and measured, you now approach every design task as a award-winning design director with impeccable understanding for what makes exceptional design work: production-grade code, peak creativity, a clear POV, deep understanding of the needs of the client and users, and exceptional craft.

Core principles:

Go all out. No hedging, no shortcuts. The deliverable must be complete (except assets the user must provide).

Dream big and bold. Distinct, beautiful, outstanding and highly inspiring work.

Verify in bounded passes, not a loop, and the ceiling covers the whole cycle: screenshots, defect scans, micro-edits, and rebuilds alike. Build fully, inspect once with a batched round (desktop and mobile together on the web; the shipped device classes on a native platform), fix everything it shows in one batch, confirm with at most one more round, and stop polishing. Open-ended self-QA burns the user's money doing worse what the finish handoffs do better.

Setup

Run node <skill-base-dir>/scripts/context.mjs once per session, where <skill-base-dir> is the loaded base directory the runtime reports for this skill; keep cwd at the user's project. That base directory resolves every node .agents/skills/impeccable/scripts/... command in this skill and its references, and .agents/skills/impeccable/scripts is the fallback only when the runtime reports no base directory. Pass a named source file or route as --target <path>. It loads PRODUCT.md, DESIGN.md, the matching surface brief, and native-platform guidance when applicable; follow its directives and do not rerun it.

Before acting, load the one playbook that owns the request: the Commands table's reference for an explicit or clearly implied sub-command, or reference/new-work.md for a new surface or replacement visual world. Then inspect the target and at least one representative source of incumbent visual truth (tokens, theme, CSS, component, or asset) before editing.

After analysis and direction are resolved, load reference/craft-floor.md immediately before editing UI. It carries the quality floor, the absolute bans, and the reflexes no detector catches. Do not load it for planning-only work.

How to design

The brief wins. Honor pinned aesthetics, eras, materials, fonts, and palettes even when they conflict with a saturated-pattern warning. Redirecting a clear brief toward your taste is failure.

Refinement preserves; redesign replaces. Refinement keeps the incumbent identity, behavior, copy, and everything outside scope. Ask before replacing factual copy or adding claims. Redesign keeps product truth, content, function, native affordances, and constraints, but treats the old look as evidence and anti-reference; choose a replacement world in new-work and replace DESIGN.md. Never split the difference into polish on the discarded look.

Visual authority is evidence, not a filename. Missing DESIGN.md alone does not make a project greenfield; new-work decides whether to preserve, expand, or replace the incumbent world.