impeccable

Files (105)

• SKILL.md
• impeccable_asset_producer.toml · agents/
• impeccable_manual_edit_applier.toml · agents/
• openai.yaml · agents/
• adapt.md · reference/
• adapt.native.md · reference/
• android.md · reference/
• animate.md · reference/
• audit.md · reference/
• audit.native.md · reference/
• bolder.md · reference/
• brand.md · reference/
• clarify.md · reference/
• codex.md · reference/
• colorize.md · reference/
• craft.md · reference/
• critique.md · reference/
• delight.md · reference/
• distill.md · reference/
• document.md · reference/
• extract.md · reference/
• harden.md · reference/
• hooks.md · reference/
• init.md · reference/
• interaction-design.md · reference/
• ios.md · reference/
• layout.md · reference/
• live.md · reference/
• onboard.md · reference/
• optimize.md · reference/
• overdrive.md · reference/
• polish.md · reference/
• product.md · reference/
• quieter.md · reference/
• shape.md · reference/
• typeset.md · reference/
• command-metadata.json · scripts/
• context-signals.mjs · scripts/
• context.mjs · scripts/
• critique-storage.mjs · scripts/
• detect-csp.mjs · scripts/
• detect.mjs · scripts/
• index.mjs · scripts/detector/browser/injected/
• main.mjs · scripts/detector/cli/
• design-system.mjs · scripts/detector/
• detect-antipatterns-browser.js · scripts/detector/
• detect-antipatterns.mjs · scripts/detector/
• detect-url.mjs · scripts/detector/engines/browser/
• detect-text.mjs · scripts/detector/engines/regex/
• css-cascade.mjs · scripts/detector/engines/static-html/
• detect-html.mjs · scripts/detector/engines/static-html/
• screenshot-contrast.mjs · scripts/detector/engines/visual/
• findings.mjs · scripts/detector/
• file-system.mjs · scripts/detector/node/
• profiler.mjs · scripts/detector/profile/
• antipatterns.mjs · scripts/detector/registry/
• checks.mjs · scripts/detector/rules/
• color.mjs · scripts/detector/shared/
• constants.mjs · scripts/detector/shared/
• fonts.mjs · scripts/detector/shared/
• …and 45 more

SKILL.md (first lines)

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 .agents/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 .agents/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). GPT 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.

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.

#### 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

From dotlas/skills, MIT.

More from dotlas/skills