Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
38 changes: 19 additions & 19 deletions .agents/skills/impeccable/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@ Other harnesses should follow the same checklist when they can expose this state

Two files, case-insensitive. The loader looks at the project root by default and falls back to `.agents/context/` and `docs/` if the root is clean. Override with `IMPECCABLE_CONTEXT_DIR=path/to/dir` (absolute or relative to cwd).

- **PRODUCT.md** required. Users, brand, tone, anti-references, strategic principles.
- **DESIGN.md** optional, strongly recommended. Colors, typography, elevation, components.
- **PRODUCT.md**: required. Users, brand, tone, anti-references, strategic principles.
- **DESIGN.md**: optional, strongly recommended. Colors, typography, elevation, components.

Load both in one call:

Expand All @@ -45,15 +45,15 @@ 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 `$impeccable teach` or `$impeccable document` (they rewrite the files), or the user manually edited one.

`$impeccable live` already warms context via `live.mjs` — if you've run `live.mjs`, don't also run `load-context.mjs` this session.
`$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 `$impeccable teach`, then resume the user's original task with the fresh context. If the original task was `$impeccable craft`, resume into `$impeccable shape` before any implementation work.

If DESIGN.md is missing: nudge once per session (*"Run `$impeccable document` for more on-brand output"*), then proceed.

### 2. Register

Every design task is **brand** (marketing, landing, campaign, long-form content, portfoliodesign IS the product) or **product** (app UI, admin, dashboard, tool design SERVES the product).
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.

Expand All @@ -63,24 +63,24 @@ Load the matching reference: [reference/brand.md](reference/brand.md) or [refere

## Shared design laws

Apply to every design, both registers. Match implementation complexity to the aesthetic visionmaximalism needs elaborate code, minimalism needs precision. Interpret creatively. Vary across projects; never converge on the same choices. GPT is capable of extraordinary work — don't hold back.
Apply to every design, both registers. Match implementation complexity to the aesthetic vision: maximalism needs elaborate code, minimalism needs precision. Interpret creatively. Vary across projects; never converge on the same choices. GPT is capable of extraordinary work. Don't hold back.

### Color

- Use OKLCH. Reduce chroma as lightness approaches 0 or 100 high chroma at extremes looks garish.
- Use OKLCH. Reduce chroma as lightness approaches 0 or 100; high chroma at extremes looks garish.
- Never use `#000` or `#fff`. Tint every neutral toward the brand hue (chroma 0.005–0.01 is enough).
- Pick a **color strategy** before picking colors. Four steps on the commitment axis:
- **Restrained** tinted neutrals + one accent ≤10%. Product default; brand minimalism.
- **Committed** one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
- **Full palette** 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
- **Drenched** the surface IS the color. Brand heroes, campaign pages.
- **Restrained**: tinted neutrals + one accent ≤10%. Product default; brand minimalism.
- **Committed**: one saturated color carries 30–60% of the surface. Brand default for identity-driven pages.
- **Full palette**: 3–4 named roles, each used deliberately. Brand campaigns; product data viz.
- **Drenched**: the surface IS the color. Brand heroes, campaign pages.
- The "one accent ≤10%" rule is Restrained only. Committed / Full palette / Drenched exceed it on purpose. Don't collapse every design to Restrained by reflex.

### Theme

Dark vs. light is never a default. Not dark "because tools look cool dark." Not light "to be safe."

Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough — add detail until it does.
Before choosing, write one sentence of physical scene: who uses this, where, under what ambient light, in what mood. If the sentence doesn't force the answer, it's not concrete enough. Add detail until it does.

"Observability dashboard" does not force an answer. "SRE glancing at incident severity on a 27-inch monitor at 2am in a dim room" does. Run the sentence, not the category.

Expand Down Expand Up @@ -120,10 +120,10 @@ Match-and-refuse. If you're about to write any of these, rewrite the element wit

If someone could look at this interface and say "AI made that" without doubt, it's failed. Cross-register failures are the absolute bans above. Register-specific failures live in each reference.

**Category-reflex check.** Run at two altitudes the second one catches what the first one misses.
**Category-reflex check.** Run at two altitudes; the second one catches what the first one misses.

- **First-order:** if someone could guess the theme + palette from the category alone "observability → dark blue", "healthcare → white + teal", "finance → navy + gold", "crypto → neon on black" it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
- **Second-order:** if someone could guess the aesthetic family from category-plus-anti-references "AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode" it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's [reflex-reject aesthetic lanes](reference/brand.md) list catches the currently-saturated families.
- **First-order:** if someone could guess the theme + palette from the category alone ("observability → dark blue", "healthcare → white + teal", "finance → navy + gold", "crypto → neon on black"), it's the first training-data reflex. Rework the scene sentence and color strategy until the answer isn't obvious from the domain.
- **Second-order:** if someone could guess the aesthetic family from category-plus-anti-references ("AI workflow tool that's not SaaS-cream → editorial-typographic", "fintech that's not navy-and-gold → terminal-native dark mode"), it's the trap one tier deeper. The first reflex was avoided; the second wasn't. Rework until both answers are not obvious. The brand register's [reflex-reject aesthetic lanes](reference/brand.md) list catches the currently-saturated families.

## Commands

Expand Down Expand Up @@ -153,13 +153,13 @@ If someone could look at this interface and say "AI made that" without doubt, it
| `optimize [target]` | Fix | Diagnose and fix UI performance | [reference/optimize.md](reference/optimize.md) |
| `live` | Iterate | Visual variant mode: pick elements in the browser, generate alternatives | [reference/live.md](reference/live.md) |

Plus two management commands `pin <command>` and `unpin <command>`, detailed below.
Plus two management commands: `pin <command>` and `unpin <command>`, detailed below.

### Routing rules

1. **No argument** render the table above as the user-facing command menu, grouped by category. Ask what they'd like to do.
2. **First word matches a command** load its reference file and follow its instructions. Everything after the command name is the target.
3. **First word doesn't match** general design invocation. Apply the setup steps, shared design laws, and the loaded register reference, using the full argument as context.
1. **No argument**: render the table above as the user-facing command menu, grouped by category. Ask what they'd like to do.
2. **First word matches a command**: load its reference file and follow its instructions. Everything after the command name is the target.
3. **First word doesn't match**: general design invocation. Apply the setup steps, shared design laws, and the loaded register reference, using the full argument as context.

Setup (context gathering, register) is already loaded by then; sub-commands don't re-invoke `$impeccable`.

Expand All @@ -173,4 +173,4 @@ If the first word is `craft`, setup still runs first, but [reference/craft.md](r
node .agents/skills/impeccable/scripts/pin.mjs <pin|unpin> <command>
```

Valid `<command>` is any command from the table above. Report the script's result concisely — confirm the new shortcut on success, relay stderr verbatim on error.
Valid `<command>` is any command from the table above. Report the script's result concisely. Confirm the new shortcut on success, relay stderr verbatim on error.
8 changes: 4 additions & 4 deletions .agents/skills/impeccable/reference/adapt.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
> **Additional context needed**: target platforms/devices and usage contexts.

Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases.
Adapt an existing design to a different context: another screen size, device, platform, or use case. The trap is treating adaptation as scaling. The job is rethinking the experience for the new context.


---
Expand All @@ -27,7 +27,7 @@ Understand what needs adaptation and why:
- What won't work? (Hover states on touch, tiny touch targets)
- What's inappropriate? (Desktop patterns on mobile, mobile patterns on desktop)

**CRITICAL**: Adaptation is not just scaling - it's rethinking the experience for the new context.
**CRITICAL**: Adaptation is rethinking the experience for the new context, not scaling pixels.

## Plan Adaptation Strategy

Expand Down Expand Up @@ -164,7 +164,7 @@ Choose appropriate breakpoints:
- Persistent side navigation on desktop
- Breadcrumbs on smaller screens for context

**IMPORTANT**: Test on real devices, not just browser DevTools. Device emulation is helpful but not perfect.
**IMPORTANT**: Test on real devices. Device emulation in DevTools is helpful but not perfect.

**NEVER**:
- Hide core functionality on mobile (if it matters, make it work)
Expand All @@ -187,4 +187,4 @@ Test thoroughly across contexts:
- **Edge cases**: Very small screens (320px), very large screens (4K)
- **Slow connections**: Test on throttled network

Remember: You're a cross-platform design expert. Make experiences that feel native to each context while maintaining brand and functionality consistency. Adapt intentionally, test thoroughly.
When the adaptation feels native to each context, hand off to `$impeccable polish` for the final pass.
22 changes: 11 additions & 11 deletions .agents/skills/impeccable/reference/animate.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
> **Additional context needed**: performance constraints.

Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight.
Add motion that conveys state, gives feedback, and clarifies hierarchy. Cut motion that exists only for decoration. Animation fatigue is a real cost; spend the budget on the moments that need it.

---

## Register

Brand: orchestrated page-load sequences, staggered reveals, scroll-driven animation. Motion is part of the voice; one well-rehearsed entrance beats scattered micro-interactions.

Product: 150–250 ms on most transitions. Motion conveys state feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.
Product: 150–250 ms on most transitions. Motion conveys state: feedback, reveal, loading, transitions between views. No page-load choreography; users are in a task and won't wait for it.

---

Expand Down Expand Up @@ -105,12 +105,12 @@ Use appropriate techniques for each animation:

**Easing curves (use these, not CSS defaults):**
```css
/* Recommended - natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */
/* Recommended: natural deceleration */
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); /* Slightly snappier */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* Confident, decisive */

/* AVOID - feel dated and tacky */
/* AVOID: feel dated and tacky */
/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */
/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */
```
Expand Down Expand Up @@ -153,12 +153,12 @@ Use appropriate techniques for each animation:
```

**NEVER**:
- Use bounce or elastic easing curvesthey feel dated and draw attention to the animation itself
- Use bounce or elastic easing curves; they feel dated and draw attention to the animation itself
- Animate layout properties casually (`width`, `height`, `top`, `left`, margins) when transform, FLIP, or grid-based techniques would work
- Use durations over 500ms for feedbackit feels laggy
- Animate without purposeevery animation needs a reason
- Ignore `prefers-reduced-motion`this is an accessibility violation
- Animate everythinganimation fatigue makes interfaces feel exhausting
- Use durations over 500ms for feedback (it feels laggy)
- Animate without purpose (every animation needs a reason)
- Ignore `prefers-reduced-motion` (this is an accessibility violation)
- Animate everything (animation fatigue makes interfaces feel exhausting)
- Block interaction during animations unless intentional

## Verify Quality
Expand All @@ -172,4 +172,4 @@ Test animations thoroughly:
- **Doesn't block**: Users can interact during/after animations
- **Adds value**: Makes interface clearer or more delightful

Remember: Motion should enhance understanding and provide feedback, not just add decoration. Animate with purpose, respect performance constraints, and always consider accessibility. Great animation is invisible - it just makes everything feel right.
When the motion clarifies state instead of decorating it, hand off to `$impeccable polish` for the final pass.
17 changes: 8 additions & 9 deletions .agents/skills/impeccable/reference/audit.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues document them for other commands to address.
Run systematic **technical** quality checks and generate a comprehensive report. Don't fix issues; document them for other commands to address.

This is a code-level audit, not a design critique. Check what's measurable and verifiable in the implementation.

Expand Down Expand Up @@ -83,10 +83,10 @@ Check against ALL the **DON'T** guidelines from the parent impeccable skill (alr
### Detailed Findings by Severity

Tag every issue with **P0-P3 severity**:
- **P0 Blocking**: Prevents task completion — fix immediately
- **P1 Major**: Significant difficulty or WCAG AA violation — fix before release
- **P2 Minor**: Annoyance, workaround exists — fix in next pass
- **P3 Polish**: Nice-to-fix, no real user impact — fix if time permits
- **P0 Blocking**: Prevents task completion. Fix immediately
- **P1 Major**: Significant difficulty or WCAG AA violation. Fix before release
- **P2 Minor**: Annoyance, workaround exists. Fix in next pass
- **P3 Polish**: Nice-to-fix, no real user impact. Fix if time permits

For each issue, document:
- **[P?] Issue name**
Expand All @@ -105,14 +105,14 @@ Identify recurring problems that indicate systemic gaps rather than one-off mist

### Positive Findings

Note what's working well good practices to maintain and replicate.
Note what's working well: good practices to maintain and replicate.

## Recommended Actions

List recommended commands in priority order (P0 first, then P1, then P2):

1. **[P?] `$command-name`** Brief description (specific context from audit findings)
2. **[P?] `$command-name`** Brief description (specific context)
1. **[P?] `$command-name`**: Brief description (specific context from audit findings)
2. **[P?] `$command-name`**: Brief description (specific context)

**Rules**: Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable document, $impeccable harden, $impeccable layout, $impeccable onboard, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset. Map findings to the most appropriate command. End with `$impeccable polish` as the final step if any fixes were recommended.

Expand All @@ -131,4 +131,3 @@ After presenting the summary, tell the user:
- Forget to prioritize (everything can't be P0)
- Report false positives without verification

Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement.
Loading
Loading