pm-workflow-studio 0.1.0

package/.codex/bundled-skills/impeccable/reference/critique.md

@@ -0,0 +1,259 @@
+### Purpose
+
+Resolve one stable target, run two independent assessments, synthesize a design critique, persist a snapshot, and ask the user what to improve next. The chat response is the primary deliverable; the snapshot is an archive/backlog for future commands.
+
+### Hard Invariants
+
+- Assessment A (design review) and Assessment B (detector/browser evidence) are both required.
+- Assessment A must finish before detector findings enter the parent synthesis context. Detector output is deterministic, but it still anchors judgment.
+- If sub-agents are unavailable, fall back sequentially: finish and record Assessment A first, then run Assessment B, then synthesize.
+- A skipped detector is a failed critique run unless `detect.mjs` is missing or crashes after a real attempt.
+- Viewable targets require browser inspection when available.
+- Any local server started only for critique visualization must run in the background, have a recorded stop method, and be stopped before final reporting unless the user asks to keep it.
+- Do not claim a user-visible overlay exists unless script injection succeeded and the detector ran in the page.
+
+### Setup
+
+1. **Resolve the target** to a concrete file path or URL. Prefer a source path over a dev-server URL when both identify the same surface; ports drift, paths do not.
+   - "the homepage" -> `site/pages/index.astro` or `index.html`
+   - "the settings modal" -> the primary component file
+   - "this page" -> the current URL or source file
+2. **Compute the slug**:
+   ```bash
+   node .agents/skills/impeccable/scripts/critique-storage.mjs slug "<resolved-path-or-url>"
+   ```
+   Keep it. If the command exits non-zero, skip persistence and trend for this run, but continue the critique.
+3. **Read `.impeccable/critique/ignore.md`** if it exists. Drop matching findings silently; it is the only prior-run input critique consumes.
+
+### Assessment Orchestration
+
+Delegate Assessment A and Assessment B to separate sub-agents when possible. They must not see each other's output. Do not show findings to the user until synthesis.
+
+Codex sub-agent gate:
+- If `spawn_agent` is exposed and the user explicitly allowed sub-agents, delegation, or parallel agent work, spawn A and B immediately.
+- If `spawn_agent` is exposed but the user did not explicitly allow sub-agents, ask exactly once: "Impeccable critique is designed to run two independent sub-agents for an unanchored assessment. May I use sub-agents for this critique?" Then stop until the user answers.
+- If allowed, spawn A and B. If declined, run sequentially and report `Assessment independence: degraded (sub-agents declined by user)`.
+- If `spawn_agent` is not exposed, do not ask; run sequentially and report `Assessment independence: degraded (spawn_agent unavailable in this session)`.
+- If spawning fails after permission, run sequentially and report `Assessment independence: degraded (sub-agent spawn failed: <exact error>)`.
+Prefer `fork_context: false` with self-contained prompts containing cwd, target, live URL, references, product context, and output contract. If using `fork_context: true`, omit `agent_type`, `model`, and `reasoning_effort`.
+
+If browser automation is available, each assessment creates its own new tab. Never reuse an existing tab, even if it is already at the right URL.
+
+### Assessment A: Design Review
+
+Read relevant source files and visually inspect the live page when browser automation is available. Think like a design director.
+
+Evaluate:
+- **AI slop**: Would someone believe "AI made this" immediately? Check all DON'T guidance from the parent Impeccable skill.
+- **Holistic design**: hierarchy, IA, emotional fit, discoverability, composition, typography, color, accessibility, states, copy, and edge cases.
+- **Cognitive load**: consult [cognitive-load](cognitive-load.md); report checklist failures and decision points with >4 visible options.
+- **Emotional journey**: peak-end rule, emotional valleys, reassurance at high-stakes moments.
+- **Nielsen heuristics**: consult [heuristics-scoring](heuristics-scoring.md); score all 10 heuristics 0-4.
+
+Return: AI slop verdict, heuristic scores, cognitive load, emotional journey, 2-3 strengths, 3-5 priority issues, persona red flags, minor observations, and provocative questions.
+
+### Assessment B: Detector + Browser Evidence
+
+Run the bundled detector and browser visualization evidence. Assessment B is mandatory and must remain isolated from Assessment A until both are complete.
+
+CLI scan:
+```bash
+node .agents/skills/impeccable/scripts/detect.mjs --json [--fast] [target]
+```
+
+- Pass markup files/directories as `[target]`; do not pass CSS-only files.
+- For URLs, skip CLI scan and use browser visualization.
+- For 200+ scannable files, use `--fast`; for 500+, narrow scope or ask.
+- Exit code 0 = clean; 2 = findings.
+- If the detector entrypoint is missing or fails to load, report deterministic scan unavailable and continue with browser/manual review.
+
+Browser visualization is required for a viewable target when browser automation is available. Use a localhost dev/static URL for local files; avoid `file://` unless the available browser explicitly supports this workflow. Overlay flow:
+
+1. Create a fresh tab and navigate.
+2. Preflight mutable injection by setting `document.title` and appending a `<script>` tag. Read-only evaluate APIs do not count.
+3. If mutation is unavailable, skip live server, browser presentation, and injection; report fallback signal.
+4. If mutation is available, start `node .agents/skills/impeccable/scripts/live-server.mjs --background`, present the browser if supported, label `[Human]`, scroll top, inject `http://localhost:PORT/detect.js`, wait 2-3 seconds, read `impeccable` console messages, then stop the live server.
+5. For multi-view targets, inject on 3-5 representative pages.
+
+Codex Browser note: Use the Browser skill. Do not spend a Browser attempt on `file://`. Only call `visibility.set(true)` after mutable script injection is confirmed for the `[Human]` overlay path; verify with `get()`. Use `tab.dev.logs({ filter: "impeccable" })` for console results. Its Playwright `evaluate(...)` surface is read-only; do not rely on it for mutation.
+
+Return: CLI findings JSON/counts, browser console findings if applicable, false positives, and skipped/failed browser steps with concrete reasons.
+
+After Assessment B returns usable CLI findings, reuse them. Do not rerun `detect.mjs` in the parent unless Assessment B failed, was truncated, or omitted count, rule names, or file locations.
+
+Codex failure accounting: final Run Notes must include target slug, ignore list, assessment independence, CLI detector, browser visibility, overlay injection, live-server cleanup, temp-file cleanup, and any fallback signal used. Do not run repo status checks, late API spelunking, or unrelated verification after the report is assembled.
+
+### Generate Combined Critique Report
+
+Synthesize both assessments into a single report. Do NOT simply concatenate. Weave the findings together, noting where the LLM review and detector agree, where the detector caught issues the LLM missed, and where detector findings are false positives.
+
+The chat response is the primary user-facing deliverable. Present the full structured critique below in chat; do not replace it with a summary and a link. The persisted snapshot is only an archive/backlog for later commands.
+
+Codex final-answer note: `$impeccable critique` produces a report artifact, so the final chat response should intentionally exceed the usual concise close-out style. Do not title the final response "Critique Summary" unless the user explicitly asked for a summary.
+
+Structure your feedback as a design director would:
+
+#### Design Health Score
+> *Consult [heuristics-scoring](heuristics-scoring.md)*
+
+Present the Nielsen's 10 heuristics scores as a table:
+
+| # | Heuristic | Score | Key Issue |
+|---|-----------|-------|-----------|
+| 1 | Visibility of System Status | ? | [specific finding or "n/a" if solid] |
+| 2 | Match System / Real World | ? | |
+| 3 | User Control and Freedom | ? | |
+| 4 | Consistency and Standards | ? | |
+| 5 | Error Prevention | ? | |
+| 6 | Recognition Rather Than Recall | ? | |
+| 7 | Flexibility and Efficiency | ? | |
+| 8 | Aesthetic and Minimalist Design | ? | |
+| 9 | Error Recovery | ? | |
+| 10 | Help and Documentation | ? | |
+| **Total** | | **??/40** | **[Rating band]** |
+
+Be honest with scores. A 4 means genuinely excellent. Most real interfaces score 20-32.
+
+#### Anti-Patterns Verdict
+
+**Start here.** Does this look AI-generated?
+
+**LLM assessment**: Your own evaluation of AI slop tells. Cover overall aesthetic feel, layout sameness, generic composition, missed opportunities for personality.
+
+**Deterministic scan**: Summarize what the automated detector found, with counts and file locations. Note any additional issues the detector caught that you missed, and flag any false positives.
+
+**Visual overlays** (if injection succeeded): Tell the user that overlays are now visible in the **[Human]** tab in their browser, highlighting the detected issues. Summarize what the console output reported. If browser visualization was attempted but injection failed, say that no reliable user-visible overlay is available and report the fallback signal instead.
+
+#### Overall Impression
+A brief gut reaction: what works, what doesn't, and the single biggest opportunity.
+
+#### What's Working
+Highlight 2-3 things done well. Be specific about why they work.
+
+#### Priority Issues
+The 3-5 most impactful design problems, ordered by importance.
+
+For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuristics-scoring.md) for severity definitions):
+- **[P?] What**: Name the problem clearly
+- **Why it matters**: How this hurts users or undermines goals
+- **Fix**: What to do about it (be concrete)
+- **Suggested command**: Which command could address this (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)
+
+#### Persona Red Flags
+> *Consult [personas](personas.md)*
+
+Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `AGENTS.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info.
+
+For each selected persona, walk through the primary user action and list specific red flags found:
+
+**Alex (Power User)**: No keyboard shortcuts detected. Form requires 8 clicks for primary action. Forced modal onboarding. High abandonment risk.
+
+**Jordan (First-Timer)**: Icon-only nav in sidebar. Technical jargon in error messages ("404 Not Found"). No visible help. Will abandon at step 2.
+
+Be specific. Name the exact elements and interactions that fail each persona. Don't write generic persona descriptions; write what broke for them.
+
+#### Minor Observations
+Quick notes on smaller issues worth addressing.
+
+#### Questions to Consider
+Provocative questions that might unlock better solutions:
+- "What if the primary action were more prominent?"
+- "Does this need to feel this complex?"
+- "What would a confident version of this look like?"
+
+#### Run Notes
+Keep this compact. Include status for target slug, ignore list, assessment independence, CLI detector, browser visibility, overlay injection, live server cleanup, and temp-file cleanup. For failed or skipped steps, give the concrete observed reason and the fallback signal used. In the final chat response, also include snapshot write and trend read status after persistence has run.
+
+Codex Run Notes are final-chat only. Do not include this section in the persisted snapshot body, because persistence, trend read, and temp cleanup happen after the snapshot write and would otherwise archive stale status such as "pending after persistence."
+
+**Remember**:
+- Be direct. Vague feedback wastes everyone's time.
+- Be specific. "The submit button," not "some elements."
+- Say what's wrong AND why it matters to users.
+- Give concrete suggestions. Cut "consider exploring..." entirely.
+- Prioritize ruthlessly. If everything is important, nothing is.
+- Don't soften criticism. Developers need honest feedback to ship great design.
+
+### Persist the Snapshot
+
+Once the report above is finalized, write it to `.impeccable/critique/` so the user can refer back, and so `$impeccable polish` can pick up the priority issues without a copy-paste.
+
+Skip this step if the Setup slug was null (vague or root-level target).
+
+1. **Write the body to a temp file** so you can pipe it to the helper. Use the full critique report (heuristic table, anti-patterns verdict, priority issues, persona red flags, minor observations, and questions), but stop before the "Ask the User" / "Recommended Actions" sections that come later.
+
+   Codex: exclude Run Notes from the temp body file; Run Notes are final-chat only because persistence, trend read, and temp cleanup happen after the snapshot write.
+
+2. **Pass the structured metadata** through `IMPECCABLE_CRITIQUE_META` (JSON), then run the write command:
+   ```bash
+   IMPECCABLE_CRITIQUE_META='{"target":"<user phrasing>","total_score":<n>,"p0_count":<n>,"p1_count":<n>}' \
+     node .agents/skills/impeccable/scripts/critique-storage.mjs write <slug> <body-file>
+   ```
+   The helper prints the absolute path it wrote.
+
+3. **Delete the temp body file** after the write attempt completes, whether the write succeeded or failed. If deletion fails, mention `temp-file cleanup failed: <reason>` briefly in the final output, but do not block the critique.
+
+4. **Read the trend** for context:
+   ```bash
+   node .agents/skills/impeccable/scripts/critique-storage.mjs trend <slug> 5
+   ```
+   This returns a JSON array of the last 5 frontmatter entries (including the one you just wrote).
+
+5. **Append a single line to the user-visible output**, after the report and before the questions:
+
+   > **Trend for `<slug>` (last 5 runs): 24 → 28 → 32 → 29 → 32**
+   > Wrote `.impeccable/critique/<filename>`.
+
+   If this is the first run for the slug, the trend is just one score; say so: "First run for this target, no trend yet."
+
+This is fire-and-forget. Do not show the user the helper's JSON output; only the human-readable trend line and the written path. Failures here should not block the rest of the flow; print the error and move on.
+
+### Ask the User
+
+**After presenting findings**, use targeted questions based on what was actually found. STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer. These answers will shape the action plan.
+
+Ask questions along these lines (adapt to the specific findings; do NOT ask generic questions):
+
+1. **Priority direction**: Based on the issues found, ask which category matters most to the user right now. For example: "I found problems with visual hierarchy, color usage, and information overload. Which area should we tackle first?" Offer the top 2-3 issue categories as options.
+
+2. **Design intent**: If the critique found a tonal mismatch, ask whether it was intentional. For example: "The interface feels clinical and corporate. Is that the intended tone, or should it feel warmer/bolder/more playful?" Offer 2-3 tonal directions as options based on what would fix the issues found.
+
+3. **Scope**: Ask how much the user wants to take on. For example: "I found N issues. Want to address everything, or focus on the top 3?" Offer scope options like "Top 3 only", "All issues", "Critical issues only".
+
+4. **Constraints** (optional; only ask if relevant): If the findings touch many areas, ask if anything is off-limits. For example: "Should any sections stay as-is?" This prevents the plan from touching things the user considers done.
+
+**Rules for questions**:
+- Every question must reference specific findings from the report. Never ask generic "who is your audience?" questions.
+- Keep it to 2-4 questions maximum. Respect the user's time.
+- Offer concrete options, not open-ended prompts.
+- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions.
+
+Codex final-question gate: The user-visible response must either include the targeted questions or explicitly say `Questions skipped: <reason>` because the findings were straightforward. Each question must include 2-3 concrete answer options tied to the actual critique findings. Do not end with only open-ended questions.
+
+### Recommended Actions
+
+**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User.
+
+#### Action Summary
+
+List recommended commands in priority order, based on the user's answers:
+
+1. **`$command-name`**: Brief description of what to fix (specific context from critique findings)
+2. **`$command-name`**: Brief description (specific context)
+...
+
+**Rules for recommendations**:
+- 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
+- Order by the user's stated priorities first, then by impact
+- Each item's description should carry enough context that the command knows what to focus on
+- Map each Priority Issue to the appropriate command
+- Skip commands that would address zero issues
+- If the user chose a limited scope, only include items within that scope
+- If the user marked areas as off-limits, exclude commands that would touch those areas
+- End with `$impeccable polish` as the final step if any fixes were recommended
+
+After presenting the summary, tell the user:
+
+> You can ask me to run these one at a time, all at once, or in any order you prefer.
+>
+> Re-run `$impeccable critique` after fixes to see your score improve.

package/.codex/bundled-skills/impeccable/reference/delight.md

@@ -0,0 +1,302 @@
+> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant).
+
+Find the moments where personality and unexpected polish would turn a functional interface into one users remember and tell other people about. Add only where the moment earns it; delight everywhere reads as noise.
+
+---
+
+## Register
+
+Brand: delight can be distributed across copy voice, section transitions, discovery rewards, seasonal touches, personality across the whole surface.
+
+Product: delight at specific moments, not pages. Completion, first-time actions, error recovery, milestone crossings. Reliability and consistency carry the rest of the experience; delight pushed everywhere reads as noise.
+
+---
+
+## Assess Delight Opportunities
+
+Identify where delight would enhance (not distract from) the experience:
+
+1. **Find natural delight moments**:
+   - **Success states**: Completed actions (save, send, publish)
+   - **Empty states**: First-time experiences, onboarding
+   - **Loading states**: Waiting periods that could be entertaining
+   - **Achievements**: Milestones, streaks, completions
+   - **Interactions**: Hover states, clicks, drags
+   - **Errors**: Softening frustrating moments
+   - **Easter eggs**: Hidden discoveries for curious users
+
+2. **Understand the context**:
+   - What's the brand personality? (Playful? Professional? Quirky? Elegant?)
+   - Who's the audience? (Tech-savvy? Creative? Corporate?)
+   - What's the emotional context? (Accomplishment? Exploration? Frustration?)
+   - What's appropriate? (Banking app ≠ gaming app)
+
+3. **Define delight strategy**:
+   - **Subtle sophistication**: Refined micro-interactions (luxury brands)
+   - **Playful personality**: Whimsical illustrations and copy (consumer apps)
+   - **Helpful surprises**: Anticipating needs before users ask (productivity tools)
+   - **Sensory richness**: Satisfying sounds, smooth animations (creative tools)
+
+If any of these are unclear from the codebase, STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer.
+
+**CRITICAL**: Delight should enhance usability, never obscure it. If users notice the delight more than accomplishing their goal, you've gone too far.
+
+## Delight Principles
+
+Follow these guidelines:
+
+### Delight Amplifies, Never Blocks
+- Delight moments should be quick (< 1 second)
+- Never delay core functionality for delight
+- Make delight skippable or subtle
+- Respect user's time and task focus
+
+### Surprise and Discovery
+- Hide delightful details for users to discover
+- Reward exploration and curiosity
+- Don't announce every delight moment
+- Let users share discoveries with others
+
+### Appropriate to Context
+- Match delight to emotional moment (celebrate success, empathize with errors)
+- Respect the user's state (don't be playful during critical errors)
+- Match brand personality and audience expectations
+- Cultural sensitivity (what's delightful varies by culture)
+
+### Compound Over Time
+- Delight should remain fresh with repeated use
+- Vary responses (not same animation every time)
+- Reveal deeper layers with continued use
+- Build anticipation through patterns
+
+## Delight Techniques
+
+Add personality and joy through these methods:
+
+### Micro-interactions & Animation
+
+**Button delight**:
+```css
+/* Satisfying button press */
+.button {
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+.button:active {
+  transform: translateY(2px);
+  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* Ripple effect on click */
+/* Smooth lift on hover */
+.button:hover {
+  transform: translateY(-2px);
+  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
+}
+```
+
+**Loading delight**:
+- Playful loading animations (not just spinners)
+- Personality in loading messages (write product-specific ones, not generic AI filler)
+- Progress indication with encouraging messages
+- Skeleton screens with subtle animations
+
+**Success animations**:
+- Checkmark draw animation
+- Confetti burst for major achievements
+- Gentle scale + fade for confirmation
+- Satisfying sound effects (subtle)
+
+**Hover surprises**:
+- Icons that animate on hover
+- Color shifts or glow effects
+- Tooltip reveals with personality
+- Cursor changes (custom cursors for branded experiences)
+
+### Personality in Copy
+
+**Playful error messages**:
+```
+"Error 404"
+"This page is playing hide and seek. (And winning)"
+
+"Connection failed"
+"Looks like the internet took a coffee break. Want to retry?"
+```
+
+**Encouraging empty states**:
+```
+"No projects"
+"Your canvas awaits. Create something amazing."
+
+"No messages"
+"Inbox zero! You're crushing it today."
+```
+
+**Playful labels & tooltips**:
+```
+"Delete"
+"Send to void" (for playful brand)
+
+"Help"
+"Rescue me" (tooltip)
+```
+
+**IMPORTANT**: Match copy personality to brand. Banks shouldn't be wacky, but they can be warm.
+
+### Illustrations & Visual Personality
+
+**Custom illustrations**:
+- Empty state illustrations (not stock icons)
+- Error state illustrations (friendly monsters, quirky characters)
+- Loading state illustrations (animated characters)
+- Success state illustrations (celebrations)
+
+**Icon personality**:
+- Custom icon set matching brand personality
+- Animated icons (subtle motion on hover/click)
+- Illustrative icons (more detailed than generic)
+- Consistent style across all icons
+
+**Background effects**:
+- Subtle particle effects
+- Gradient mesh backgrounds
+- Geometric patterns
+- Parallax depth
+- Time-of-day themes (morning vs night)
+
+### Satisfying Interactions
+
+**Drag and drop delight**:
+- Lift effect on drag (shadow, scale)
+- Snap animation when dropped
+- Satisfying placement sound
+- Undo toast ("Dropped in wrong place? [Undo]")
+
+**Toggle switches**:
+- Smooth slide with spring physics
+- Color transition
+- Haptic feedback on mobile
+- Optional sound effect
+
+**Progress & achievements**:
+- Streak counters with celebratory milestones
+- Progress bars that "celebrate" at 100%
+- Badge unlocks with animation
+- Playful stats ("You're on fire! 5 days in a row")
+
+**Form interactions**:
+- Input fields that animate on focus
+- Checkboxes with a satisfying scale pulse when checked
+- Success state that celebrates valid input
+- Auto-grow textareas
+
+### Sound Design
+
+**Subtle audio cues** (when appropriate):
+- Notification sounds (distinctive but not annoying)
+- Success sounds (satisfying "ding")
+- Error sounds (empathetic, not harsh)
+- Typing sounds for chat/messaging
+- Ambient background audio (very subtle)
+
+**IMPORTANT**:
+- Respect system sound settings
+- Provide mute option
+- Keep volumes quiet (subtle cues, not alarms)
+- Don't play on every interaction (sound fatigue is real)
+
+### Easter Eggs & Hidden Delights
+
+**Discovery rewards**:
+- Konami code unlocks special theme
+- Hidden keyboard shortcuts (Cmd+K for special features)
+- Hover reveals on logos or illustrations
+- Alt text jokes on images (for screen reader users too!)
+- Console messages for developers ("Like what you see? We're hiring!")
+
+**Seasonal touches**:
+- Holiday themes (subtle, tasteful)
+- Seasonal color shifts
+- Weather-based variations
+- Time-based changes (dark at night, light during day)
+
+**Contextual personality**:
+- Different messages based on time of day
+- Responses to specific user actions
+- Randomized variations (not same every time)
+- Progressive reveals with continued use
+
+### Loading & Waiting States
+
+**Make waiting engaging**:
+- Interesting loading messages that rotate
+- Progress bars with personality
+- Mini-games during long loads
+- Fun facts or tips while waiting
+- Countdown with encouraging messages
+
+```
+Loading messages: write ones specific to your product, not generic AI filler:
+- "Crunching your latest numbers..."
+- "Syncing with your team's changes..."
+- "Preparing your dashboard..."
+- "Checking for updates since yesterday..."
+```
+
+**WARNING**: Avoid cliched loading messages like "Herding pixels", "Teaching robots to dance", "Consulting the magic 8-ball", "Counting backwards from infinity". These are AI-slop copy, instantly recognizable as machine-generated. Write messages that are specific to what your product actually does.
+
+### Celebration Moments
+
+**Success celebrations**:
+- Confetti for major milestones
+- Animated checkmarks for completions
+- Progress bar celebrations at 100%
+- "Achievement unlocked" style notifications
+- Personalized messages ("You published your 10th article!")
+
+**Milestone recognition**:
+- First-time actions get special treatment
+- Streak tracking and celebration
+- Progress toward goals
+- Anniversary celebrations
+
+## Implementation Patterns
+
+**Animation libraries**:
+- Framer Motion (React)
+- GSAP (universal)
+- Lottie (After Effects animations)
+- Canvas confetti (party effects)
+
+**Sound libraries**:
+- Howler.js (audio management)
+- Use-sound (React hook)
+
+**Physics libraries**:
+- React Spring (spring physics)
+- Popmotion (animation primitives)
+
+**IMPORTANT**: File size matters. Compress images, optimize animations, lazy load delight features.
+
+**NEVER**:
+- Delay core functionality for delight
+- Force users through delightful moments (make skippable)
+- Use delight to hide poor UX
+- Overdo it (less is more)
+- Ignore accessibility (animate responsibly, provide alternatives)
+- Make every interaction delightful (special moments should be special)
+- Sacrifice performance for delight
+- Be inappropriate for context (read the room)
+
+## Verify Delight Quality
+
+Test that delight actually delights:
+
+- **User reactions**: Do users smile? Share screenshots?
+- **Doesn't annoy**: Still pleasant after 100th time?
+- **Doesn't block**: Can users opt out or skip?
+- **Performant**: No jank, no slowdown
+- **Appropriate**: Matches brand and context
+- **Accessible**: Works with reduced motion, screen readers
+
+When the moments feel earned, hand off to `$impeccable polish` for the final pass.

package/.codex/bundled-skills/impeccable/reference/distill.md

@@ -0,0 +1,111 @@
+Strip a design to its essence. Remove anything that doesn't earn its place: redundant elements, repeated information, decorative noise, cosmetic complexity.
+
+
+---
+
+## Assess Current State
+
+Analyze what makes the design feel complex or cluttered:
+
+1. **Identify complexity sources**:
+   - **Too many elements**: Competing buttons, redundant information, visual clutter
+   - **Excessive variation**: Too many colors, fonts, sizes, styles without purpose
+   - **Information overload**: Everything visible at once, no progressive disclosure
+   - **Visual noise**: Unnecessary borders, shadows, backgrounds, decorations
+   - **Confusing hierarchy**: Unclear what matters most
+   - **Feature creep**: Too many options, actions, or paths forward
+
+2. **Find the essence**:
+   - What's the primary user goal? (There should be ONE)
+   - What's actually necessary vs nice-to-have?
+   - What can be removed, hidden, or combined?
+   - What's the 20% that delivers 80% of value?
+
+If any of these are unclear from the codebase, STOP and use Codex's structured user-input/question tool when available; if unavailable, ask directly in chat to clarify what you cannot infer.
+
+**CRITICAL**: Simplicity is not about removing features. It's about removing obstacles between users and their goals. Every element should justify its existence.
+
+## Plan Simplification
+
+Create a ruthless editing strategy:
+
+- **Core purpose**: What's the ONE thing this should accomplish?
+- **Essential elements**: What's truly necessary to achieve that purpose?
+- **Progressive disclosure**: What can be hidden until needed?
+- **Consolidation opportunities**: What can be combined or integrated?
+
+**IMPORTANT**: Simplification is hard. It requires saying no to good ideas to make room for great execution. Be ruthless.
+
+## Simplify the Design
+
+Systematically remove complexity across these dimensions:
+
+### Information Architecture
+- **Reduce scope**: Remove secondary actions, optional features, redundant information
+- **Progressive disclosure**: Hide complexity behind clear entry points (accordions, modals, step-through flows)
+- **Combine related actions**: Merge similar buttons, consolidate forms, group related content
+- **Clear hierarchy**: ONE primary action, few secondary actions, everything else tertiary or hidden
+- **Remove redundancy**: If it's said elsewhere, don't repeat it here
+
+### Visual Simplification
+- **Reduce color palette**: Use 1-2 colors plus neutrals, not 5-7 colors
+- **Limit typography**: One font family, 3-4 sizes maximum, 2-3 weights
+- **Remove decorations**: Eliminate borders, shadows, backgrounds that don't serve hierarchy or function
+- **Flatten structure**: Reduce nesting, remove unnecessary containers; never nest cards inside cards
+- **Remove unnecessary cards**: Cards aren't needed for basic layout; use spacing and alignment instead
+- **Consistent spacing**: Use one spacing scale, remove arbitrary gaps
+
+### Layout Simplification
+- **Linear flow**: Replace complex grids with simple vertical flow where possible
+- **Remove sidebars**: Move secondary content inline or hide it
+- **Full-width**: Use available space generously instead of complex multi-column layouts
+- **Consistent alignment**: Pick left or center, stick with it
+- **Generous white space**: Let content breathe, don't pack everything tight
+
+### Interaction Simplification
+- **Reduce choices**: Fewer buttons, fewer options, clearer path forward (paradox of choice is real)
+- **Smart defaults**: Make common choices automatic, only ask when necessary
+- **Inline actions**: Replace modal flows with inline editing where possible
+- **Remove steps**: Can signup be one step instead of three? Can checkout be simplified?
+- **Clear CTAs**: ONE obvious next step, not five competing actions
+
+### Content Simplification
+- **Shorter copy**: Cut every sentence in half, then do it again
+- **Active voice**: "Save changes" not "Changes will be saved"
+- **Remove jargon**: Plain language always wins
+- **Scannable structure**: Short paragraphs, bullet points, clear headings
+- **Essential information only**: Remove marketing fluff, legalese, hedging
+- **Remove redundant copy**: No headers restating intros, no repeated explanations, say it once
+
+### Code Simplification
+- **Remove unused code**: Dead CSS, unused components, orphaned files
+- **Flatten component trees**: Reduce nesting depth
+- **Consolidate styles**: Merge similar styles, use utilities consistently
+- **Reduce variants**: Does that component need 12 variations, or can 3 cover 90% of cases?
+
+**NEVER**:
+- Remove necessary functionality (simplicity ≠ feature-less)
+- Sacrifice accessibility for simplicity (clear labels and ARIA still required)
+- Make things so simple they're unclear (mystery ≠ minimalism)
+- Remove information users need to make decisions
+- Eliminate hierarchy completely (some things should stand out)
+- Oversimplify complex domains (match complexity to actual task complexity)
+
+## Verify Simplification
+
+Ensure simplification improves usability:
+
+- **Faster task completion**: Can users accomplish goals more quickly?
+- **Reduced cognitive load**: Is it easier to understand what to do?
+- **Still complete**: Are all necessary features still accessible?
+- **Clearer hierarchy**: Is it obvious what matters most?
+- **Better performance**: Does simpler design load faster?
+
+## Document Removed Complexity
+
+If you removed features or options:
+- Document why they were removed
+- Consider if they need alternative access points
+- Note any user feedback to monitor
+
+When the cuts feel right, hand off to `$impeccable polish` for the final pass. As Antoine de Saint-Exupéry put it: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away."