From f957fcad206b6534c9bf89064d015ae941c4b6cf Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Fri, 10 Apr 2026 19:09:55 -0700 Subject: [PATCH 001/125] Fix: quote YAML scalars that contain colon-space in frontmatter generateYamlFrontmatter only re-quoted values starting with `[` or `{`, but parseFrontmatter strips surrounding quotes on input. Descriptions containing `: ` (e.g. "Also handles: critique...") round-tripped into unquoted plain scalars that YAML parsers reject. Added a yamlNeedsQuoting check covering colon-space, space-hash, YAML indicator chars, reserved keywords, and number-like strings, plus regression tests. Co-Authored-By: Claude Opus 4.6 (1M context) --- scripts/lib/utils.js | 44 ++++++++++++++++++++++++++++++++++++----- tests/lib/utils.test.js | 36 +++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 5 deletions(-) diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 3ea386c32..3f672e826 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -456,6 +456,41 @@ export function replacePlaceholders(content, provider, commandNames = [], allSki return result; } +/** + * Decide whether a YAML scalar string value must be quoted to survive parsing. + * + * Plain (unquoted) YAML scalars cannot contain `: ` or ` #`, cannot start with + * a YAML indicator character, cannot look like a boolean/null/number, and + * cannot carry leading/trailing whitespace. parseFrontmatter strips surrounding + * quotes on input, so we must re-detect the need to quote on output — otherwise + * descriptions like "Handles: critique/review..." round-trip into invalid YAML. + */ +function yamlNeedsQuoting(value) { + if (typeof value !== 'string') return false; + if (value === '') return true; + // Leading or trailing whitespace + if (/^\s|\s$/.test(value)) return true; + // Starts with a YAML flow/indicator character + if (/^[\[\]{},&*!|>'"%@`#]/.test(value)) return true; + // Starts with `?`, `:`, or `-` followed by space or end of string + if (/^[?:-](\s|$)/.test(value)) return true; + // Contains `: ` (ends plain scalar) or ` #` (starts comment), or ends with `:` + if (/: |\s#|:$/.test(value)) return true; + // Reserved keywords that YAML 1.1 parsers coerce to boolean/null + if (/^(true|false|null|yes|no|on|off|~)$/i.test(value)) return true; + // Looks like a number + if (/^-?\d+(\.\d+)?([eE][+-]?\d+)?$/.test(value)) return true; + return false; +} + +function formatYamlScalar(value) { + if (typeof value !== 'string') return String(value); + if (yamlNeedsQuoting(value)) { + return `"${value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"`; + } + return value; +} + /** * Generate YAML frontmatter string */ @@ -467,18 +502,17 @@ export function generateYamlFrontmatter(data) { lines.push(`${key}:`); for (const item of value) { if (typeof item === 'object') { - lines.push(` - name: ${item.name}`); - if (item.description) lines.push(` description: ${item.description}`); + lines.push(` - name: ${formatYamlScalar(item.name)}`); + if (item.description) lines.push(` description: ${formatYamlScalar(item.description)}`); if (item.required !== undefined) lines.push(` required: ${item.required}`); } else { - lines.push(` - ${item}`); + lines.push(` - ${formatYamlScalar(item)}`); } } } else if (typeof value === 'boolean') { lines.push(`${key}: ${value}`); } else { - const needsQuoting = typeof value === 'string' && /^[\[{]/.test(value); - lines.push(`${key}: ${needsQuoting ? `"${value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"` : value}`); + lines.push(`${key}: ${formatYamlScalar(value)}`); } } diff --git a/tests/lib/utils.test.js b/tests/lib/utils.test.js index 89cebd52d..7a0664005 100644 --- a/tests/lib/utils.test.js +++ b/tests/lib/utils.test.js @@ -166,6 +166,42 @@ describe('generateYamlFrontmatter', () => { expect(parsed.frontmatter.description).toBe(original.description); expect(parsed.frontmatter['argument-hint']).toBe(''); }); + + test('should quote strings containing colon-space (breaks plain scalars)', () => { + const data = { + name: 'impeccable', + description: 'Design fluency. Also handles: critique, audit. Commands: craft, polish.' + }; + + const result = generateYamlFrontmatter(data); + // Must be wrapped in quotes so YAML parsers don't mis-read the inner `: ` as a mapping + expect(result).toContain('description: "Design fluency. Also handles: critique, audit. Commands: craft, polish."'); + + // Roundtrip through our parser should recover the original string intact + const parsed = parseFrontmatter(`${result}\n\nbody`); + expect(parsed.frontmatter.description).toBe(data.description); + }); + + test('should quote strings starting with YAML flow indicators', () => { + const data = { + name: 'test', + 'argument-hint': '[command] [target]' + }; + + const result = generateYamlFrontmatter(data); + expect(result).toContain('argument-hint: "[command] [target]"'); + }); + + test('should not quote plain strings without special chars', () => { + const data = { + name: 'simple', + description: 'A plain description with no colons or hashes' + }; + + const result = generateYamlFrontmatter(data); + expect(result).toContain('description: A plain description with no colons or hashes'); + expect(result).not.toContain('"A plain'); + }); }); describe('ensureDir', () => { From b0f44f83c61e2fb7689d958dc4e713fded289da8 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Fri, 10 Apr 2026 19:42:14 -0700 Subject: [PATCH 002/125] Consolidate 18 skills into 1 /impeccable skill with 20 commands Biggest change in a while. Users previously had 18 standalone skill entries cluttering their /menu; now they have one entry (/impeccable) that routes to 20 specialized commands via argument dispatch. The pin mechanism (/impeccable pin audit) restores standalone shortcuts on demand for commands users hit all the time. ## Architecture - Single /impeccable skill with command router section in SKILL.md - 20 commands served via reference files under source/skills/impeccable/reference/ - /impeccable pin creates a lightweight redirect shim so users who prefer /audit, /polish, etc. can still have them - Context gathering (teach) auto-runs on first use - command-metadata.json is the single source of truth for command descriptions, argument hints, and relationships ## Site rewrite - Docs URL: /skills renamed to /docs (with /skills permanent redirects) - Homepage hero frames Impeccable as "one skill with 20 commands" - "Get Started" split into 50/50 install + how-to-use with editorial numbered steps, /impeccable shown as the home command with three modes - New /docs overview: home command hero card + dense category rows matching the old cheatsheet density, with leads-to/pairs-with/ combines-with relationship metadata served from a shared source - Cheatsheet merged into /docs, /cheatsheet redirects - Magazine spread and mobile cards show /impeccable as a stacked namespace label above the command name at full display size - Periodic table updated with craft/teach/extract as first-class cells - Skill detail pages generate from reference files, with an editorial wrapper per command for tagline + body - Tutorials and anti-patterns pages updated to use /impeccable ## Build system - Dead code removed (scripts/lib/transformers/shared.js) - Build log wording fixed ("1 skill" not "1 skills (1 user-invocable)") - generateApiData fallback branch removed (throws loudly if metadata missing instead of silently degrading) - Commands API includes editorial tagline alongside the long description; UI surfaces prefer tagline for human display, description for auto- trigger keyword matching ## Gitignore - Added .claude/scheduled_tasks.lock, .claude/settings.local.json to ignore list (local Claude Code state that should not be tracked). - Harness skill directories (.claude/skills/, .agents/skills/, etc.) remain tracked by design: npx skills reads them from this repo at install time and they enable clean submodule use. Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/adapt/SKILL.md | 199 --------- .agents/skills/animate/SKILL.md | 175 -------- .agents/skills/audit/SKILL.md | 148 ------- .agents/skills/bolder/SKILL.md | 117 ------ .agents/skills/clarify/SKILL.md | 183 -------- .agents/skills/colorize/SKILL.md | 143 ------- .agents/skills/delight/SKILL.md | 304 -------------- .agents/skills/distill/SKILL.md | 122 ------ .agents/skills/harden/SKILL.md | 389 ------------------ .agents/skills/impeccable/SKILL.md | 166 ++++---- .../skills/impeccable/reference/adapt.md | 11 +- .../skills/impeccable/reference/animate.md | 11 +- .../skills/impeccable/reference/audit.md | 22 +- .../skills/impeccable/reference/bolder.md | 15 +- .../skills/impeccable/reference/clarify.md | 11 +- .../reference/cognitive-load.md | 0 .../skills/impeccable/reference/colorize.md | 11 +- .agents/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 42 +- .../skills/impeccable/reference/delight.md | 11 +- .../skills/impeccable/reference/distill.md | 11 +- .../skills/impeccable/reference/harden.md | 8 +- .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 13 +- .../skills/impeccable/reference/optimize.md | 8 +- .../skills/impeccable/reference/overdrive.md | 26 +- .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 14 +- .../skills/impeccable/reference/quieter.md | 11 +- .../skills/impeccable/reference/shape.md | 24 +- .agents/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 13 +- .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .agents/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .agents/skills/layout/SKILL.md | 125 ------ .agents/skills/optimize/SKILL.md | 266 ------------ .agents/skills/overdrive/SKILL.md | 142 ------- .agents/skills/polish/SKILL.md | 224 ---------- .agents/skills/quieter/SKILL.md | 103 ----- .agents/skills/shape/SKILL.md | 96 ----- .agents/skills/typeset/SKILL.md | 116 ------ .claude-plugin/marketplace.json | 4 +- .claude-plugin/plugin.json | 2 +- .claude/skills/adapt/SKILL.md | 199 --------- .claude/skills/audit/SKILL.md | 148 ------- .claude/skills/clarify/SKILL.md | 183 -------- .claude/skills/harden/SKILL.md | 389 ------------------ .claude/skills/impeccable/SKILL.md | 168 ++++---- .../skills/impeccable/reference/adapt.md | 11 +- .../reference/animate.md} | 13 +- .../skills/impeccable/reference/audit.md | 22 +- .../reference/bolder.md} | 17 +- .../skills/impeccable/reference/clarify.md | 11 +- .../reference/cognitive-load.md | 0 .../reference/colorize.md} | 13 +- .claude/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 44 +- .../reference/delight.md} | 13 +- .../reference/distill.md} | 13 +- .../skills/impeccable/reference/harden.md | 8 +- .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 13 +- .../skills/impeccable/reference/optimize.md | 8 +- .../reference/overdrive.md} | 28 +- .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 14 +- .../reference/quieter.md} | 13 +- .../reference/shape.md} | 26 +- .claude/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 13 +- .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .claude/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .claude/skills/layout/SKILL.md | 125 ------ .claude/skills/optimize/SKILL.md | 266 ------------ .claude/skills/polish/SKILL.md | 224 ---------- .claude/skills/typeset/SKILL.md | 116 ------ .codex/skills/adapt/SKILL.md | 198 --------- .codex/skills/animate/SKILL.md | 174 -------- .codex/skills/bolder/SKILL.md | 116 ------ .codex/skills/clarify/SKILL.md | 182 -------- .codex/skills/colorize/SKILL.md | 142 ------- .codex/skills/delight/SKILL.md | 303 -------------- .codex/skills/distill/SKILL.md | 121 ------ .codex/skills/harden/SKILL.md | 388 ----------------- .codex/skills/impeccable/SKILL.md | 166 ++++---- .../skills/impeccable/reference/adapt.md | 11 +- .../skills/impeccable/reference/animate.md | 11 +- .../reference/audit.md} | 23 +- .../skills/impeccable/reference/bolder.md | 15 +- .../skills/impeccable/reference/clarify.md | 11 +- .../reference/cognitive-load.md | 0 .../skills/impeccable/reference/colorize.md | 11 +- .codex/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 43 +- .../skills/impeccable/reference/delight.md | 11 +- .../skills/impeccable/reference/distill.md | 11 +- .../skills/impeccable/reference/harden.md | 8 +- .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 13 +- .../skills/impeccable/reference/optimize.md | 8 +- .../skills/impeccable/reference/overdrive.md | 26 +- .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 14 +- .../skills/impeccable/reference/quieter.md | 11 +- .../reference/shape.md} | 25 +- .codex/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 13 +- .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .codex/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .codex/skills/layout/SKILL.md | 124 ------ .codex/skills/optimize/SKILL.md | 265 ------------ .codex/skills/overdrive/SKILL.md | 141 ------- .codex/skills/polish/SKILL.md | 223 ---------- .codex/skills/quieter/SKILL.md | 102 ----- .codex/skills/typeset/SKILL.md | 115 ------ .cursor/skills/impeccable/SKILL.md | 164 ++++---- .../skills/impeccable/reference/adapt.md | 11 +- .../reference/animate.md} | 11 +- .../skills/impeccable/reference/audit.md | 22 +- .../skills/impeccable/reference/bolder.md | 15 +- .../reference/clarify.md} | 11 +- .../reference/cognitive-load.md | 0 .../reference/colorize.md} | 11 +- .cursor/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 40 +- .../reference/delight.md} | 11 +- .../skills/impeccable/reference/distill.md | 11 +- .../skills/impeccable/reference/harden.md | 8 +- .../reference/heuristics-scoring.md | 0 .../reference/layout.md} | 13 +- .../skills/impeccable/reference/optimize.md | 8 +- .../skills/impeccable/reference/overdrive.md | 26 +- .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 14 +- .../reference/quieter.md} | 11 +- .../skills/impeccable/reference/shape.md | 24 +- .cursor/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 13 +- .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .cursor/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .gemini/skills/impeccable/SKILL.md | 164 ++++---- .gemini/skills/impeccable/reference/adapt.md | 190 +++++++++ .../skills/impeccable/reference/animate.md | 11 +- .../reference/audit.md} | 22 +- .../skills/impeccable/reference/bolder.md | 15 +- .../skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .../skills/impeccable/reference/colorize.md | 11 +- .gemini/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 40 +- .../reference/delight.md} | 11 +- .../skills/impeccable/reference/distill.md | 11 +- .gemini/skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .gemini/skills/impeccable/reference/layout.md | 114 +++++ .../skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../reference/overdrive.md} | 26 +- .../reference/personas.md | 0 .gemini/skills/impeccable/reference/polish.md | 212 ++++++++++ .../skills/impeccable/reference/quieter.md | 11 +- .../reference/shape.md} | 24 +- .gemini/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .gemini/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .gitignore | 11 +- .kiro/skills/impeccable/SKILL.md | 164 ++++---- .kiro/skills/impeccable/reference/adapt.md | 190 +++++++++ .kiro/skills/impeccable/reference/animate.md | 166 ++++++++ .kiro/skills/impeccable/reference/audit.md | 134 ++++++ .kiro/skills/impeccable/reference/bolder.md | 106 +++++ .kiro/skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .kiro/skills/impeccable/reference/colorize.md | 134 ++++++ .kiro/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 40 +- .kiro/skills/impeccable/reference/delight.md | 295 +++++++++++++ .kiro/skills/impeccable/reference/distill.md | 111 +++++ .kiro/skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .kiro/skills/impeccable/reference/layout.md | 114 +++++ .kiro/skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../skills/impeccable/reference/overdrive.md | 130 ++++++ .../reference/personas.md | 0 .kiro/skills/impeccable/reference/polish.md | 212 ++++++++++ .kiro/skills/impeccable/reference/quieter.md | 92 +++++ .../skills/impeccable/reference/shape.md | 24 +- .kiro/skills/impeccable/reference/teach.md | 67 +++ .kiro/skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .kiro/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .opencode/skills/adapt/SKILL.md | 199 --------- .opencode/skills/audit/SKILL.md | 148 ------- .opencode/skills/clarify/SKILL.md | 183 -------- .opencode/skills/harden/SKILL.md | 389 ------------------ .opencode/skills/impeccable/SKILL.md | 168 ++++---- .../skills/impeccable/reference/adapt.md | 190 +++++++++ .../reference/animate.md} | 13 +- .../skills/impeccable/reference/audit.md | 134 ++++++ .../reference/bolder.md} | 17 +- .../skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .../reference/colorize.md} | 13 +- .../skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 44 +- .../reference/delight.md} | 13 +- .../reference/distill.md} | 13 +- .../skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 114 +++++ .../skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../reference/overdrive.md} | 28 +- .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 212 ++++++++++ .../reference/quieter.md} | 13 +- .../reference/shape.md} | 26 +- .../skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .opencode/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .opencode/skills/layout/SKILL.md | 125 ------ .opencode/skills/optimize/SKILL.md | 266 ------------ .opencode/skills/polish/SKILL.md | 224 ---------- .opencode/skills/typeset/SKILL.md | 116 ------ .pi/skills/impeccable/SKILL.md | 166 ++++---- .pi/skills/impeccable/reference/adapt.md | 190 +++++++++ .pi/skills/impeccable/reference/animate.md | 166 ++++++++ .pi/skills/impeccable/reference/audit.md | 134 ++++++ .pi/skills/impeccable/reference/bolder.md | 106 +++++ .pi/skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .pi/skills/impeccable/reference/colorize.md | 134 ++++++ .pi/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 42 +- .pi/skills/impeccable/reference/delight.md | 295 +++++++++++++ .pi/skills/impeccable/reference/distill.md | 111 +++++ .pi/skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .pi/skills/impeccable/reference/layout.md | 114 +++++ .pi/skills/impeccable/reference/optimize.md | 258 ++++++++++++ .pi/skills/impeccable/reference/overdrive.md | 130 ++++++ .../reference/personas.md | 0 .pi/skills/impeccable/reference/polish.md | 212 ++++++++++ .pi/skills/impeccable/reference/quieter.md | 92 +++++ .pi/skills/impeccable/reference/shape.md | 82 ++++ .pi/skills/impeccable/reference/teach.md | 67 +++ .pi/skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .pi/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .rovodev/skills/adapt/SKILL.md | 199 --------- .rovodev/skills/animate/SKILL.md | 175 -------- .rovodev/skills/audit/SKILL.md | 148 ------- .rovodev/skills/bolder/SKILL.md | 117 ------ .rovodev/skills/clarify/SKILL.md | 183 -------- .rovodev/skills/colorize/SKILL.md | 143 ------- .rovodev/skills/delight/SKILL.md | 304 -------------- .rovodev/skills/distill/SKILL.md | 122 ------ .rovodev/skills/harden/SKILL.md | 389 ------------------ .rovodev/skills/impeccable/SKILL.md | 168 ++++---- .rovodev/skills/impeccable/reference/adapt.md | 190 +++++++++ .../skills/impeccable/reference/animate.md | 166 ++++++++ .rovodev/skills/impeccable/reference/audit.md | 134 ++++++ .../skills/impeccable/reference/bolder.md | 106 +++++ .../skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .../skills/impeccable/reference/colorize.md | 134 ++++++ .rovodev/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 44 +- .../skills/impeccable/reference/delight.md | 295 +++++++++++++ .../skills/impeccable/reference/distill.md | 111 +++++ .../skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 114 +++++ .../skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../skills/impeccable/reference/overdrive.md | 130 ++++++ .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 212 ++++++++++ .../skills/impeccable/reference/quieter.md | 92 +++++ .rovodev/skills/impeccable/reference/shape.md | 82 ++++ .rovodev/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .rovodev/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .rovodev/skills/layout/SKILL.md | 125 ------ .rovodev/skills/optimize/SKILL.md | 266 ------------ .rovodev/skills/overdrive/SKILL.md | 142 ------- .rovodev/skills/polish/SKILL.md | 224 ---------- .rovodev/skills/quieter/SKILL.md | 103 ----- .rovodev/skills/shape/SKILL.md | 96 ----- .rovodev/skills/typeset/SKILL.md | 116 ------ .trae-cn/skills/adapt/SKILL.md | 199 --------- .trae-cn/skills/animate/SKILL.md | 175 -------- .trae-cn/skills/audit/SKILL.md | 148 ------- .trae-cn/skills/bolder/SKILL.md | 117 ------ .trae-cn/skills/clarify/SKILL.md | 183 -------- .trae-cn/skills/colorize/SKILL.md | 143 ------- .trae-cn/skills/delight/SKILL.md | 304 -------------- .trae-cn/skills/distill/SKILL.md | 122 ------ .trae-cn/skills/harden/SKILL.md | 389 ------------------ .trae-cn/skills/impeccable/SKILL.md | 166 ++++---- .trae-cn/skills/impeccable/reference/adapt.md | 190 +++++++++ .../skills/impeccable/reference/animate.md | 166 ++++++++ .trae-cn/skills/impeccable/reference/audit.md | 134 ++++++ .../skills/impeccable/reference/bolder.md | 106 +++++ .../skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .../skills/impeccable/reference/colorize.md | 134 ++++++ .trae-cn/skills/impeccable/reference/craft.md | 4 +- .../skills/impeccable/reference/critique.md | 42 +- .../skills/impeccable/reference/delight.md | 295 +++++++++++++ .../skills/impeccable/reference/distill.md | 111 +++++ .../skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .../skills/impeccable/reference/layout.md | 114 +++++ .../skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../skills/impeccable/reference/overdrive.md | 130 ++++++ .../reference/personas.md | 0 .../skills/impeccable/reference/polish.md | 212 ++++++++++ .../skills/impeccable/reference/quieter.md | 92 +++++ .trae-cn/skills/impeccable/reference/shape.md | 82 ++++ .trae-cn/skills/impeccable/reference/teach.md | 67 +++ .../skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .trae-cn/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .trae-cn/skills/layout/SKILL.md | 125 ------ .trae-cn/skills/optimize/SKILL.md | 266 ------------ .trae-cn/skills/overdrive/SKILL.md | 142 ------- .trae-cn/skills/polish/SKILL.md | 224 ---------- .trae-cn/skills/quieter/SKILL.md | 103 ----- .trae-cn/skills/shape/SKILL.md | 96 ----- .trae-cn/skills/typeset/SKILL.md | 116 ------ .trae/skills/adapt/SKILL.md | 199 --------- .trae/skills/animate/SKILL.md | 175 -------- .trae/skills/audit/SKILL.md | 148 ------- .trae/skills/bolder/SKILL.md | 117 ------ .trae/skills/clarify/SKILL.md | 183 -------- .trae/skills/colorize/SKILL.md | 143 ------- .trae/skills/delight/SKILL.md | 304 -------------- .trae/skills/distill/SKILL.md | 122 ------ .trae/skills/harden/SKILL.md | 389 ------------------ .trae/skills/impeccable/SKILL.md | 166 ++++---- .trae/skills/impeccable/reference/adapt.md | 190 +++++++++ .trae/skills/impeccable/reference/animate.md | 166 ++++++++ .trae/skills/impeccable/reference/audit.md | 134 ++++++ .trae/skills/impeccable/reference/bolder.md | 106 +++++ .trae/skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .trae/skills/impeccable/reference/colorize.md | 134 ++++++ .trae/skills/impeccable/reference/craft.md | 4 +- .../skills/impeccable/reference/critique.md | 42 +- .trae/skills/impeccable/reference/delight.md | 295 +++++++++++++ .trae/skills/impeccable/reference/distill.md | 111 +++++ .trae/skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 .trae/skills/impeccable/reference/layout.md | 114 +++++ .trae/skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../skills/impeccable/reference/overdrive.md | 130 ++++++ .../reference/personas.md | 0 .trae/skills/impeccable/reference/polish.md | 212 ++++++++++ .trae/skills/impeccable/reference/quieter.md | 92 +++++ .trae/skills/impeccable/reference/shape.md | 82 ++++ .trae/skills/impeccable/reference/teach.md | 67 +++ .trae/skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ .trae/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ .trae/skills/layout/SKILL.md | 125 ------ .trae/skills/optimize/SKILL.md | 266 ------------ .trae/skills/overdrive/SKILL.md | 142 ------- .trae/skills/polish/SKILL.md | 224 ---------- .trae/skills/quieter/SKILL.md | 103 ----- .trae/skills/shape/SKILL.md | 96 ----- .trae/skills/typeset/SKILL.md | 116 ------ AGENTS.md | 2 +- CLAUDE.md | 30 +- NOTICE.md | 2 +- README.md | 80 ++-- content/site/anti-patterns-catalog.js | 2 +- content/site/partials/header.html | 2 +- content/site/skills/adapt.md | 6 +- content/site/skills/animate.md | 4 +- content/site/skills/audit.md | 10 +- content/site/skills/bolder.md | 10 +- content/site/skills/clarify.md | 6 +- content/site/skills/colorize.md | 8 +- content/site/skills/craft.md | 42 ++ content/site/skills/critique.md | 8 +- content/site/skills/delight.md | 4 +- content/site/skills/distill.md | 8 +- content/site/skills/extract.md | 4 +- content/site/skills/harden.md | 6 +- content/site/skills/impeccable.md | 36 +- content/site/skills/layout.md | 6 +- content/site/skills/optimize.md | 6 +- content/site/skills/overdrive.md | 4 +- content/site/skills/polish.md | 10 +- content/site/skills/quieter.md | 8 +- content/site/skills/shape.md | 10 +- content/site/skills/teach.md | 3 + content/site/skills/typeset.md | 6 +- .../site/tutorials/critique-with-overlay.md | 20 +- content/site/tutorials/getting-started.md | 29 +- public/cheatsheet.html | 316 -------------- public/css/main.css | 222 +++++++++- public/css/sub-pages.css | 325 +++++++++++---- public/css/workflow.css | 18 + public/index.html | 198 +++++---- public/js/components/framework-viz.js | 65 +-- public/js/components/glass-terminal.js | 52 ++- public/js/data.js | 26 +- public/js/demo-renderer.js | 72 ++++ public/js/generated/counts.js | 2 +- public/privacy.html | 2 +- public/sitemap.xml | 78 ++-- scripts/build-sub-pages.js | 210 ++++++---- scripts/build.js | 90 +++- scripts/lib/render-markdown.js | 8 +- scripts/lib/sub-pages-data.js | 136 ++++-- scripts/lib/transformers/factory.js | 4 +- scripts/lib/transformers/index.js | 3 + scripts/lib/transformers/shared.js | 81 ---- scripts/lib/utils.js | 28 +- server/index.js | 16 +- server/lib/api-handlers.js | 62 ++- skills-lock.json | 30 -- source/skills/adapt/SKILL.md | 199 --------- source/skills/clarify/SKILL.md | 183 -------- source/skills/harden/SKILL.md | 389 ------------------ source/skills/impeccable/SKILL.md | 168 ++++---- source/skills/impeccable/reference/adapt.md | 190 +++++++++ .../reference/animate.md} | 10 +- .../reference/audit.md} | 19 +- .../reference/bolder.md} | 14 +- source/skills/impeccable/reference/clarify.md | 174 ++++++++ .../reference/cognitive-load.md | 0 .../reference/colorize.md} | 10 +- source/skills/impeccable/reference/craft.md | 4 +- .../reference/critique.md} | 39 +- .../reference/delight.md} | 10 +- .../reference/distill.md} | 10 - source/skills/impeccable/reference/harden.md | 381 +++++++++++++++++ .../reference/heuristics-scoring.md | 0 source/skills/impeccable/reference/layout.md | 114 +++++ .../skills/impeccable/reference/optimize.md | 258 ++++++++++++ .../reference/overdrive.md} | 25 +- .../reference/personas.md | 0 source/skills/impeccable/reference/polish.md | 212 ++++++++++ .../reference/quieter.md} | 10 - .../reference/shape.md} | 25 +- source/skills/impeccable/reference/teach.md | 67 +++ source/skills/impeccable/reference/typeset.md | 105 +++++ .../impeccable/scripts/cleanup-deprecated.mjs | 34 +- .../impeccable/scripts/command-metadata.json | 82 ++++ source/skills/impeccable/scripts/pin.mjs | 214 ++++++++++ source/skills/layout/SKILL.md | 124 ------ source/skills/optimize/SKILL.md | 266 ------------ source/skills/polish/SKILL.md | 224 ---------- source/skills/typeset/SKILL.md | 115 ------ tests/cleanup-deprecated.test.mjs | 16 +- 469 files changed, 25435 insertions(+), 22231 deletions(-) delete mode 100644 .agents/skills/adapt/SKILL.md delete mode 100644 .agents/skills/animate/SKILL.md delete mode 100644 .agents/skills/audit/SKILL.md delete mode 100644 .agents/skills/bolder/SKILL.md delete mode 100644 .agents/skills/clarify/SKILL.md delete mode 100644 .agents/skills/colorize/SKILL.md delete mode 100644 .agents/skills/delight/SKILL.md delete mode 100644 .agents/skills/distill/SKILL.md delete mode 100644 .agents/skills/harden/SKILL.md rename .gemini/skills/adapt/SKILL.md => .agents/skills/impeccable/reference/adapt.md (90%) rename .gemini/skills/animate/SKILL.md => .agents/skills/impeccable/reference/animate.md (91%) rename .kiro/skills/audit/SKILL.md => .agents/skills/impeccable/reference/audit.md (80%) rename .pi/skills/bolder/SKILL.md => .agents/skills/impeccable/reference/bolder.md (88%) rename .pi/skills/clarify/SKILL.md => .agents/skills/impeccable/reference/clarify.md (89%) rename .agents/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .kiro/skills/colorize/SKILL.md => .agents/skills/impeccable/reference/colorize.md (90%) rename .agents/skills/{critique/SKILL.md => impeccable/reference/critique.md} (84%) rename .kiro/skills/delight/SKILL.md => .agents/skills/impeccable/reference/delight.md (92%) rename .gemini/skills/distill/SKILL.md => .agents/skills/impeccable/reference/distill.md (91%) rename .pi/skills/harden/SKILL.md => .agents/skills/impeccable/reference/harden.md (96%) rename .agents/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) rename .gemini/skills/layout/SKILL.md => .agents/skills/impeccable/reference/layout.md (89%) rename .cursor/skills/optimize/SKILL.md => .agents/skills/impeccable/reference/optimize.md (96%) rename .pi/skills/overdrive/SKILL.md => .agents/skills/impeccable/reference/overdrive.md (78%) rename .agents/skills/{critique => impeccable}/reference/personas.md (100%) rename .pi/skills/polish/SKILL.md => .agents/skills/impeccable/reference/polish.md (93%) rename .kiro/skills/quieter/SKILL.md => .agents/skills/impeccable/reference/quieter.md (89%) rename .kiro/skills/shape/SKILL.md => .agents/skills/impeccable/reference/shape.md (80%) create mode 100644 .agents/skills/impeccable/reference/teach.md rename .cursor/skills/typeset/SKILL.md => .agents/skills/impeccable/reference/typeset.md (87%) create mode 100644 .agents/skills/impeccable/scripts/command-metadata.json create mode 100644 .agents/skills/impeccable/scripts/pin.mjs delete mode 100644 .agents/skills/layout/SKILL.md delete mode 100644 .agents/skills/optimize/SKILL.md delete mode 100644 .agents/skills/overdrive/SKILL.md delete mode 100644 .agents/skills/polish/SKILL.md delete mode 100644 .agents/skills/quieter/SKILL.md delete mode 100644 .agents/skills/shape/SKILL.md delete mode 100644 .agents/skills/typeset/SKILL.md delete mode 100644 .claude/skills/adapt/SKILL.md delete mode 100644 .claude/skills/audit/SKILL.md delete mode 100644 .claude/skills/clarify/SKILL.md delete mode 100644 .claude/skills/harden/SKILL.md rename .pi/skills/adapt/SKILL.md => .claude/skills/impeccable/reference/adapt.md (90%) rename .claude/skills/{animate/SKILL.md => impeccable/reference/animate.md} (90%) rename .cursor/skills/audit/SKILL.md => .claude/skills/impeccable/reference/audit.md (80%) rename .claude/skills/{bolder/SKILL.md => impeccable/reference/bolder.md} (87%) rename .gemini/skills/clarify/SKILL.md => .claude/skills/impeccable/reference/clarify.md (89%) rename .claude/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .claude/skills/{colorize/SKILL.md => impeccable/reference/colorize.md} (89%) rename .claude/skills/{critique/SKILL.md => impeccable/reference/critique.md} (84%) rename .claude/skills/{delight/SKILL.md => impeccable/reference/delight.md} (92%) rename .claude/skills/{distill/SKILL.md => impeccable/reference/distill.md} (90%) rename .cursor/skills/harden/SKILL.md => .claude/skills/impeccable/reference/harden.md (96%) rename .claude/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) rename .pi/skills/layout/SKILL.md => .claude/skills/impeccable/reference/layout.md (89%) rename .gemini/skills/optimize/SKILL.md => .claude/skills/impeccable/reference/optimize.md (96%) rename .claude/skills/{overdrive/SKILL.md => impeccable/reference/overdrive.md} (77%) rename .claude/skills/{critique => impeccable}/reference/personas.md (100%) rename .cursor/skills/polish/SKILL.md => .claude/skills/impeccable/reference/polish.md (93%) rename .claude/skills/{quieter/SKILL.md => impeccable/reference/quieter.md} (88%) rename .claude/skills/{shape/SKILL.md => impeccable/reference/shape.md} (79%) create mode 100644 .claude/skills/impeccable/reference/teach.md rename .gemini/skills/typeset/SKILL.md => .claude/skills/impeccable/reference/typeset.md (87%) create mode 100644 .claude/skills/impeccable/scripts/command-metadata.json create mode 100644 .claude/skills/impeccable/scripts/pin.mjs delete mode 100644 .claude/skills/layout/SKILL.md delete mode 100644 .claude/skills/optimize/SKILL.md delete mode 100644 .claude/skills/polish/SKILL.md delete mode 100644 .claude/skills/typeset/SKILL.md delete mode 100644 .codex/skills/adapt/SKILL.md delete mode 100644 .codex/skills/animate/SKILL.md delete mode 100644 .codex/skills/bolder/SKILL.md delete mode 100644 .codex/skills/clarify/SKILL.md delete mode 100644 .codex/skills/colorize/SKILL.md delete mode 100644 .codex/skills/delight/SKILL.md delete mode 100644 .codex/skills/distill/SKILL.md delete mode 100644 .codex/skills/harden/SKILL.md rename .cursor/skills/adapt/SKILL.md => .codex/skills/impeccable/reference/adapt.md (90%) rename .kiro/skills/animate/SKILL.md => .codex/skills/impeccable/reference/animate.md (91%) rename .codex/skills/{audit/SKILL.md => impeccable/reference/audit.md} (79%) rename .cursor/skills/bolder/SKILL.md => .codex/skills/impeccable/reference/bolder.md (88%) rename .kiro/skills/clarify/SKILL.md => .codex/skills/impeccable/reference/clarify.md (89%) rename .codex/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .gemini/skills/colorize/SKILL.md => .codex/skills/impeccable/reference/colorize.md (90%) rename .codex/skills/{critique/SKILL.md => impeccable/reference/critique.md} (84%) rename .pi/skills/delight/SKILL.md => .codex/skills/impeccable/reference/delight.md (92%) rename .cursor/skills/distill/SKILL.md => .codex/skills/impeccable/reference/distill.md (91%) rename .gemini/skills/harden/SKILL.md => .codex/skills/impeccable/reference/harden.md (96%) rename .codex/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) rename .kiro/skills/layout/SKILL.md => .codex/skills/impeccable/reference/layout.md (89%) rename .pi/skills/optimize/SKILL.md => .codex/skills/impeccable/reference/optimize.md (96%) rename .cursor/skills/overdrive/SKILL.md => .codex/skills/impeccable/reference/overdrive.md (78%) rename .codex/skills/{critique => impeccable}/reference/personas.md (100%) rename .gemini/skills/polish/SKILL.md => .codex/skills/impeccable/reference/polish.md (93%) rename .gemini/skills/quieter/SKILL.md => .codex/skills/impeccable/reference/quieter.md (89%) rename .codex/skills/{shape/SKILL.md => impeccable/reference/shape.md} (79%) create mode 100644 .codex/skills/impeccable/reference/teach.md rename .kiro/skills/typeset/SKILL.md => .codex/skills/impeccable/reference/typeset.md (87%) create mode 100644 .codex/skills/impeccable/scripts/command-metadata.json create mode 100644 .codex/skills/impeccable/scripts/pin.mjs delete mode 100644 .codex/skills/layout/SKILL.md delete mode 100644 .codex/skills/optimize/SKILL.md delete mode 100644 .codex/skills/overdrive/SKILL.md delete mode 100644 .codex/skills/polish/SKILL.md delete mode 100644 .codex/skills/quieter/SKILL.md delete mode 100644 .codex/skills/typeset/SKILL.md rename .kiro/skills/adapt/SKILL.md => .cursor/skills/impeccable/reference/adapt.md (90%) rename .cursor/skills/{animate/SKILL.md => impeccable/reference/animate.md} (91%) rename .pi/skills/audit/SKILL.md => .cursor/skills/impeccable/reference/audit.md (80%) rename .gemini/skills/bolder/SKILL.md => .cursor/skills/impeccable/reference/bolder.md (88%) rename .cursor/skills/{clarify/SKILL.md => impeccable/reference/clarify.md} (89%) rename .cursor/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .cursor/skills/{colorize/SKILL.md => impeccable/reference/colorize.md} (90%) rename .cursor/skills/{critique/SKILL.md => impeccable/reference/critique.md} (85%) rename .cursor/skills/{delight/SKILL.md => impeccable/reference/delight.md} (92%) rename .kiro/skills/distill/SKILL.md => .cursor/skills/impeccable/reference/distill.md (91%) rename .kiro/skills/harden/SKILL.md => .cursor/skills/impeccable/reference/harden.md (96%) rename .cursor/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) rename .cursor/skills/{layout/SKILL.md => impeccable/reference/layout.md} (89%) rename .kiro/skills/optimize/SKILL.md => .cursor/skills/impeccable/reference/optimize.md (96%) rename .kiro/skills/overdrive/SKILL.md => .cursor/skills/impeccable/reference/overdrive.md (78%) rename .cursor/skills/{critique => impeccable}/reference/personas.md (100%) rename .kiro/skills/polish/SKILL.md => .cursor/skills/impeccable/reference/polish.md (93%) rename .cursor/skills/{quieter/SKILL.md => impeccable/reference/quieter.md} (89%) rename .pi/skills/shape/SKILL.md => .cursor/skills/impeccable/reference/shape.md (80%) create mode 100644 .cursor/skills/impeccable/reference/teach.md rename .pi/skills/typeset/SKILL.md => .cursor/skills/impeccable/reference/typeset.md (87%) create mode 100644 .cursor/skills/impeccable/scripts/command-metadata.json create mode 100644 .cursor/skills/impeccable/scripts/pin.mjs create mode 100644 .gemini/skills/impeccable/reference/adapt.md rename .pi/skills/animate/SKILL.md => .gemini/skills/impeccable/reference/animate.md (91%) rename .gemini/skills/{audit/SKILL.md => impeccable/reference/audit.md} (80%) rename .kiro/skills/bolder/SKILL.md => .gemini/skills/impeccable/reference/bolder.md (88%) create mode 100644 .gemini/skills/impeccable/reference/clarify.md rename .gemini/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .pi/skills/colorize/SKILL.md => .gemini/skills/impeccable/reference/colorize.md (90%) rename .gemini/skills/{critique/SKILL.md => impeccable/reference/critique.md} (85%) rename .gemini/skills/{delight/SKILL.md => impeccable/reference/delight.md} (92%) rename .pi/skills/distill/SKILL.md => .gemini/skills/impeccable/reference/distill.md (91%) create mode 100644 .gemini/skills/impeccable/reference/harden.md rename .gemini/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .gemini/skills/impeccable/reference/layout.md create mode 100644 .gemini/skills/impeccable/reference/optimize.md rename .gemini/skills/{overdrive/SKILL.md => impeccable/reference/overdrive.md} (78%) rename .gemini/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .gemini/skills/impeccable/reference/polish.md rename .pi/skills/quieter/SKILL.md => .gemini/skills/impeccable/reference/quieter.md (89%) rename .gemini/skills/{shape/SKILL.md => impeccable/reference/shape.md} (80%) create mode 100644 .gemini/skills/impeccable/reference/teach.md create mode 100644 .gemini/skills/impeccable/reference/typeset.md create mode 100644 .gemini/skills/impeccable/scripts/command-metadata.json create mode 100644 .gemini/skills/impeccable/scripts/pin.mjs create mode 100644 .kiro/skills/impeccable/reference/adapt.md create mode 100644 .kiro/skills/impeccable/reference/animate.md create mode 100644 .kiro/skills/impeccable/reference/audit.md create mode 100644 .kiro/skills/impeccable/reference/bolder.md create mode 100644 .kiro/skills/impeccable/reference/clarify.md rename .kiro/skills/{critique => impeccable}/reference/cognitive-load.md (100%) create mode 100644 .kiro/skills/impeccable/reference/colorize.md rename .kiro/skills/{critique/SKILL.md => impeccable/reference/critique.md} (85%) create mode 100644 .kiro/skills/impeccable/reference/delight.md create mode 100644 .kiro/skills/impeccable/reference/distill.md create mode 100644 .kiro/skills/impeccable/reference/harden.md rename .kiro/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .kiro/skills/impeccable/reference/layout.md create mode 100644 .kiro/skills/impeccable/reference/optimize.md create mode 100644 .kiro/skills/impeccable/reference/overdrive.md rename .kiro/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .kiro/skills/impeccable/reference/polish.md create mode 100644 .kiro/skills/impeccable/reference/quieter.md rename .cursor/skills/shape/SKILL.md => .kiro/skills/impeccable/reference/shape.md (80%) create mode 100644 .kiro/skills/impeccable/reference/teach.md create mode 100644 .kiro/skills/impeccable/reference/typeset.md create mode 100644 .kiro/skills/impeccable/scripts/command-metadata.json create mode 100644 .kiro/skills/impeccable/scripts/pin.mjs delete mode 100644 .opencode/skills/adapt/SKILL.md delete mode 100644 .opencode/skills/audit/SKILL.md delete mode 100644 .opencode/skills/clarify/SKILL.md delete mode 100644 .opencode/skills/harden/SKILL.md create mode 100644 .opencode/skills/impeccable/reference/adapt.md rename .opencode/skills/{animate/SKILL.md => impeccable/reference/animate.md} (90%) create mode 100644 .opencode/skills/impeccable/reference/audit.md rename .opencode/skills/{bolder/SKILL.md => impeccable/reference/bolder.md} (87%) create mode 100644 .opencode/skills/impeccable/reference/clarify.md rename .opencode/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename .opencode/skills/{colorize/SKILL.md => impeccable/reference/colorize.md} (89%) rename .opencode/skills/{critique/SKILL.md => impeccable/reference/critique.md} (84%) rename .opencode/skills/{delight/SKILL.md => impeccable/reference/delight.md} (92%) rename .opencode/skills/{distill/SKILL.md => impeccable/reference/distill.md} (90%) create mode 100644 .opencode/skills/impeccable/reference/harden.md rename .opencode/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .opencode/skills/impeccable/reference/layout.md create mode 100644 .opencode/skills/impeccable/reference/optimize.md rename .opencode/skills/{overdrive/SKILL.md => impeccable/reference/overdrive.md} (77%) rename .opencode/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .opencode/skills/impeccable/reference/polish.md rename .opencode/skills/{quieter/SKILL.md => impeccable/reference/quieter.md} (88%) rename .opencode/skills/{shape/SKILL.md => impeccable/reference/shape.md} (79%) create mode 100644 .opencode/skills/impeccable/reference/teach.md create mode 100644 .opencode/skills/impeccable/reference/typeset.md create mode 100644 .opencode/skills/impeccable/scripts/command-metadata.json create mode 100644 .opencode/skills/impeccable/scripts/pin.mjs delete mode 100644 .opencode/skills/layout/SKILL.md delete mode 100644 .opencode/skills/optimize/SKILL.md delete mode 100644 .opencode/skills/polish/SKILL.md delete mode 100644 .opencode/skills/typeset/SKILL.md create mode 100644 .pi/skills/impeccable/reference/adapt.md create mode 100644 .pi/skills/impeccable/reference/animate.md create mode 100644 .pi/skills/impeccable/reference/audit.md create mode 100644 .pi/skills/impeccable/reference/bolder.md create mode 100644 .pi/skills/impeccable/reference/clarify.md rename .pi/skills/{critique => impeccable}/reference/cognitive-load.md (100%) create mode 100644 .pi/skills/impeccable/reference/colorize.md rename .pi/skills/{critique/SKILL.md => impeccable/reference/critique.md} (85%) create mode 100644 .pi/skills/impeccable/reference/delight.md create mode 100644 .pi/skills/impeccable/reference/distill.md create mode 100644 .pi/skills/impeccable/reference/harden.md rename .pi/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .pi/skills/impeccable/reference/layout.md create mode 100644 .pi/skills/impeccable/reference/optimize.md create mode 100644 .pi/skills/impeccable/reference/overdrive.md rename .pi/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .pi/skills/impeccable/reference/polish.md create mode 100644 .pi/skills/impeccable/reference/quieter.md create mode 100644 .pi/skills/impeccable/reference/shape.md create mode 100644 .pi/skills/impeccable/reference/teach.md create mode 100644 .pi/skills/impeccable/reference/typeset.md create mode 100644 .pi/skills/impeccable/scripts/command-metadata.json create mode 100644 .pi/skills/impeccable/scripts/pin.mjs delete mode 100644 .rovodev/skills/adapt/SKILL.md delete mode 100644 .rovodev/skills/animate/SKILL.md delete mode 100644 .rovodev/skills/audit/SKILL.md delete mode 100644 .rovodev/skills/bolder/SKILL.md delete mode 100644 .rovodev/skills/clarify/SKILL.md delete mode 100644 .rovodev/skills/colorize/SKILL.md delete mode 100644 .rovodev/skills/delight/SKILL.md delete mode 100644 .rovodev/skills/distill/SKILL.md delete mode 100644 .rovodev/skills/harden/SKILL.md create mode 100644 .rovodev/skills/impeccable/reference/adapt.md create mode 100644 .rovodev/skills/impeccable/reference/animate.md create mode 100644 .rovodev/skills/impeccable/reference/audit.md create mode 100644 .rovodev/skills/impeccable/reference/bolder.md create mode 100644 .rovodev/skills/impeccable/reference/clarify.md rename .rovodev/skills/{critique => impeccable}/reference/cognitive-load.md (100%) create mode 100644 .rovodev/skills/impeccable/reference/colorize.md rename .rovodev/skills/{critique/SKILL.md => impeccable/reference/critique.md} (84%) create mode 100644 .rovodev/skills/impeccable/reference/delight.md create mode 100644 .rovodev/skills/impeccable/reference/distill.md create mode 100644 .rovodev/skills/impeccable/reference/harden.md rename .rovodev/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .rovodev/skills/impeccable/reference/layout.md create mode 100644 .rovodev/skills/impeccable/reference/optimize.md create mode 100644 .rovodev/skills/impeccable/reference/overdrive.md rename .rovodev/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .rovodev/skills/impeccable/reference/polish.md create mode 100644 .rovodev/skills/impeccable/reference/quieter.md create mode 100644 .rovodev/skills/impeccable/reference/shape.md create mode 100644 .rovodev/skills/impeccable/reference/teach.md create mode 100644 .rovodev/skills/impeccable/reference/typeset.md create mode 100644 .rovodev/skills/impeccable/scripts/command-metadata.json create mode 100644 .rovodev/skills/impeccable/scripts/pin.mjs delete mode 100644 .rovodev/skills/layout/SKILL.md delete mode 100644 .rovodev/skills/optimize/SKILL.md delete mode 100644 .rovodev/skills/overdrive/SKILL.md delete mode 100644 .rovodev/skills/polish/SKILL.md delete mode 100644 .rovodev/skills/quieter/SKILL.md delete mode 100644 .rovodev/skills/shape/SKILL.md delete mode 100644 .rovodev/skills/typeset/SKILL.md delete mode 100644 .trae-cn/skills/adapt/SKILL.md delete mode 100644 .trae-cn/skills/animate/SKILL.md delete mode 100644 .trae-cn/skills/audit/SKILL.md delete mode 100644 .trae-cn/skills/bolder/SKILL.md delete mode 100644 .trae-cn/skills/clarify/SKILL.md delete mode 100644 .trae-cn/skills/colorize/SKILL.md delete mode 100644 .trae-cn/skills/delight/SKILL.md delete mode 100644 .trae-cn/skills/distill/SKILL.md delete mode 100644 .trae-cn/skills/harden/SKILL.md create mode 100644 .trae-cn/skills/impeccable/reference/adapt.md create mode 100644 .trae-cn/skills/impeccable/reference/animate.md create mode 100644 .trae-cn/skills/impeccable/reference/audit.md create mode 100644 .trae-cn/skills/impeccable/reference/bolder.md create mode 100644 .trae-cn/skills/impeccable/reference/clarify.md rename .trae-cn/skills/{critique => impeccable}/reference/cognitive-load.md (100%) create mode 100644 .trae-cn/skills/impeccable/reference/colorize.md rename .trae/skills/critique/SKILL.md => .trae-cn/skills/impeccable/reference/critique.md (84%) create mode 100644 .trae-cn/skills/impeccable/reference/delight.md create mode 100644 .trae-cn/skills/impeccable/reference/distill.md create mode 100644 .trae-cn/skills/impeccable/reference/harden.md rename .trae-cn/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .trae-cn/skills/impeccable/reference/layout.md create mode 100644 .trae-cn/skills/impeccable/reference/optimize.md create mode 100644 .trae-cn/skills/impeccable/reference/overdrive.md rename .trae-cn/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .trae-cn/skills/impeccable/reference/polish.md create mode 100644 .trae-cn/skills/impeccable/reference/quieter.md create mode 100644 .trae-cn/skills/impeccable/reference/shape.md create mode 100644 .trae-cn/skills/impeccable/reference/teach.md create mode 100644 .trae-cn/skills/impeccable/reference/typeset.md create mode 100644 .trae-cn/skills/impeccable/scripts/command-metadata.json create mode 100644 .trae-cn/skills/impeccable/scripts/pin.mjs delete mode 100644 .trae-cn/skills/layout/SKILL.md delete mode 100644 .trae-cn/skills/optimize/SKILL.md delete mode 100644 .trae-cn/skills/overdrive/SKILL.md delete mode 100644 .trae-cn/skills/polish/SKILL.md delete mode 100644 .trae-cn/skills/quieter/SKILL.md delete mode 100644 .trae-cn/skills/shape/SKILL.md delete mode 100644 .trae-cn/skills/typeset/SKILL.md delete mode 100644 .trae/skills/adapt/SKILL.md delete mode 100644 .trae/skills/animate/SKILL.md delete mode 100644 .trae/skills/audit/SKILL.md delete mode 100644 .trae/skills/bolder/SKILL.md delete mode 100644 .trae/skills/clarify/SKILL.md delete mode 100644 .trae/skills/colorize/SKILL.md delete mode 100644 .trae/skills/delight/SKILL.md delete mode 100644 .trae/skills/distill/SKILL.md delete mode 100644 .trae/skills/harden/SKILL.md create mode 100644 .trae/skills/impeccable/reference/adapt.md create mode 100644 .trae/skills/impeccable/reference/animate.md create mode 100644 .trae/skills/impeccable/reference/audit.md create mode 100644 .trae/skills/impeccable/reference/bolder.md create mode 100644 .trae/skills/impeccable/reference/clarify.md rename .trae/skills/{critique => impeccable}/reference/cognitive-load.md (100%) create mode 100644 .trae/skills/impeccable/reference/colorize.md rename .trae-cn/skills/critique/SKILL.md => .trae/skills/impeccable/reference/critique.md (84%) create mode 100644 .trae/skills/impeccable/reference/delight.md create mode 100644 .trae/skills/impeccable/reference/distill.md create mode 100644 .trae/skills/impeccable/reference/harden.md rename .trae/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 .trae/skills/impeccable/reference/layout.md create mode 100644 .trae/skills/impeccable/reference/optimize.md create mode 100644 .trae/skills/impeccable/reference/overdrive.md rename .trae/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 .trae/skills/impeccable/reference/polish.md create mode 100644 .trae/skills/impeccable/reference/quieter.md create mode 100644 .trae/skills/impeccable/reference/shape.md create mode 100644 .trae/skills/impeccable/reference/teach.md create mode 100644 .trae/skills/impeccable/reference/typeset.md create mode 100644 .trae/skills/impeccable/scripts/command-metadata.json create mode 100644 .trae/skills/impeccable/scripts/pin.mjs delete mode 100644 .trae/skills/layout/SKILL.md delete mode 100644 .trae/skills/optimize/SKILL.md delete mode 100644 .trae/skills/overdrive/SKILL.md delete mode 100644 .trae/skills/polish/SKILL.md delete mode 100644 .trae/skills/quieter/SKILL.md delete mode 100644 .trae/skills/shape/SKILL.md delete mode 100644 .trae/skills/typeset/SKILL.md create mode 100644 content/site/skills/craft.md create mode 100644 content/site/skills/teach.md delete mode 100644 public/cheatsheet.html delete mode 100644 scripts/lib/transformers/shared.js delete mode 100644 source/skills/adapt/SKILL.md delete mode 100644 source/skills/clarify/SKILL.md delete mode 100644 source/skills/harden/SKILL.md create mode 100644 source/skills/impeccable/reference/adapt.md rename source/skills/{animate/SKILL.md => impeccable/reference/animate.md} (91%) rename source/skills/{audit/SKILL.md => impeccable/reference/audit.md} (85%) rename source/skills/{bolder/SKILL.md => impeccable/reference/bolder.md} (87%) create mode 100644 source/skills/impeccable/reference/clarify.md rename source/skills/{critique => impeccable}/reference/cognitive-load.md (100%) rename source/skills/{colorize/SKILL.md => impeccable/reference/colorize.md} (90%) rename source/skills/{critique/SKILL.md => impeccable/reference/critique.md} (86%) rename source/skills/{delight/SKILL.md => impeccable/reference/delight.md} (92%) rename source/skills/{distill/SKILL.md => impeccable/reference/distill.md} (90%) create mode 100644 source/skills/impeccable/reference/harden.md rename source/skills/{critique => impeccable}/reference/heuristics-scoring.md (100%) create mode 100644 source/skills/impeccable/reference/layout.md create mode 100644 source/skills/impeccable/reference/optimize.md rename source/skills/{overdrive/SKILL.md => impeccable/reference/overdrive.md} (77%) rename source/skills/{critique => impeccable}/reference/personas.md (100%) create mode 100644 source/skills/impeccable/reference/polish.md rename source/skills/{quieter/SKILL.md => impeccable/reference/quieter.md} (88%) rename source/skills/{shape/SKILL.md => impeccable/reference/shape.md} (77%) create mode 100644 source/skills/impeccable/reference/teach.md create mode 100644 source/skills/impeccable/reference/typeset.md create mode 100644 source/skills/impeccable/scripts/command-metadata.json create mode 100644 source/skills/impeccable/scripts/pin.mjs delete mode 100644 source/skills/layout/SKILL.md delete mode 100644 source/skills/optimize/SKILL.md delete mode 100644 source/skills/polish/SKILL.md delete mode 100644 source/skills/typeset/SKILL.md diff --git a/.agents/skills/adapt/SKILL.md b/.agents/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.agents/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.agents/skills/animate/SKILL.md b/.agents/skills/animate/SKILL.md deleted file mode 100644 index 89933bfb5..000000000 --- a/.agents/skills/animate/SKILL.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. - ---- - -## Assess Animation Opportunities - -Analyze where motion would improve the experience: - -1. **Identify static areas**: - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - - **Lack of delight**: Functional but joyless interactions - - **Missed guidance**: Opportunities to direct attention or explain behavior - -2. **Understand the context**: - - What's the personality? (Playful vs serious, energetic vs calm) - - What's the performance budget? (Mobile-first? Complex page?) - - Who's the audience? (Motion-sensitive users? Power users who want speed?) - - What matters most? (One hero animation vs many micro-interactions?) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. - -## Plan Animation Strategy - -Create a purposeful animation plan: - -- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) -- **Feedback layer**: Which interactions need acknowledgment? -- **Transition layer**: Which state changes need smoothing? -- **Delight layer**: Where can we surprise and delight? - -**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. - -## Implement Animations - -Add motion systematically across these categories: - -### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations -- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer -- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management - -### Micro-interactions -- **Button feedback**: - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - - Click: Quick scale down then up (0.95 → 1), ripple effect - - Loading: Spinner or pulse state -- **Form interactions**: - - Input focus: Border color transition, slight scale or glow - - Validation: Shake on error, check mark on success, smooth color transitions -- **Toggle switches**: Smooth slide + color transition (200-300ms) -- **Checkboxes/radio**: Check mark animation, ripple effect -- **Like/favorite**: Scale + rotation, particle effects, color transition - -### State Transitions -- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) -- **Expand/collapse**: Height transition with overflow handling, icon rotation -- **Loading states**: Skeleton screen fades, spinner animations, progress bars -- **Success/error**: Color transitions, icon animations, gentle scale pulse -- **Enable/disable**: Opacity transitions, cursor changes - -### Navigation & Flow -- **Page transitions**: Crossfade between routes, shared element transitions -- **Tab switching**: Slide indicator, content fade/slide -- **Carousel/slider**: Smooth transforms, snap points, momentum -- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators - -### Feedback & Guidance -- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights -- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning -- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation -- **Focus flow**: Highlight path through form or workflow - -### Delight Moments -- **Empty states**: Subtle floating animations on illustrations -- **Completed actions**: Confetti, check mark flourish, success celebrations -- **Easter eggs**: Hidden interactions for discovery -- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches - -## Technical Implementation - -Use appropriate techniques for each animation: - -### Timing & Easing - -**Durations by purpose:** -- **100-150ms**: Instant feedback (button press, toggle) -- **200-300ms**: State changes (hover, menu open) -- **300-500ms**: Layout changes (accordion, modal) -- **500-800ms**: Entrance animations (page load) - -**Easing curves (use these, not CSS defaults):** -```css -/* Recommended - natural deceleration */ ---ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ ---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 */ -/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ -/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ -``` - -**Exit animations are faster than entrances.** Use ~75% of enter duration. - -### CSS Animations -```css -/* Prefer for simple, declarative animations */ -- transitions for state changes -- @keyframes for complex sequences -- transform + opacity only (GPU-accelerated) -``` - -### JavaScript Animation -```javascript -/* Use for complex, interactive animations */ -- Web Animations API for programmatic control -- Framer Motion for React -- GSAP for complex sequences -``` - -### Performance -- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties -- **will-change**: Add sparingly for known expensive animations -- **Reduce paint**: Minimize repaints, use `contain` where appropriate -- **Monitor FPS**: Ensure 60fps on target devices - -### Accessibility -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**NEVER**: -- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself -- Animate layout properties (width, height, top, left)—use transform instead -- 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 - -Test animations thoroughly: - -- **Smooth at 60fps**: No jank on target devices -- **Feels natural**: Easing curves feel organic, not robotic -- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) -- **Reduced motion works**: Animations disabled or simplified appropriately -- **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. \ No newline at end of file diff --git a/.agents/skills/audit/SKILL.md b/.agents/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.agents/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.agents/skills/bolder/SKILL.md b/.agents/skills/bolder/SKILL.md deleted file mode 100644 index e80f55ed1..000000000 --- a/.agents/skills/bolder/SKILL.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too safe or boring: - -1. **Identify weakness sources**: - - **Generic choices**: System fonts, basic colors, standard layouts - - **Timid scale**: Everything is medium-sized with no drama - - **Low contrast**: Everything has similar visual weight - - **Static**: No motion, no energy, no life - - **Predictable**: Standard patterns with no surprises - - **Flat hierarchy**: Nothing stands out or commands attention - -2. **Understand the context**: - - What's the brand personality? (How far can we push?) - - What's the purpose? (Marketing can be bolder than financial dashboards) - - Who's the audience? (What will resonate?) - - What are the constraints? (Brand guidelines, accessibility, performance) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. - -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." - -## Plan Amplification - -Create a strategy to increase impact while maintaining coherence: - -- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) -- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. -- **Risk budget**: How experimental can we be? Push boundaries within constraints. -- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) - -**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. - -## Amplify the Design - -Systematically increase impact across these dimensions: - -### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) -- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) -- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) - -### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) -- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop -- **Dominant color strategy**: Let one bold color own 60% of the design -- **Sharp accents**: High-contrast accent colors that pop -- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette -- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) - -### Spatial Drama -- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings -- **Break the grid**: Let hero elements escape containers and cross boundaries -- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry -- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) -- **Overlap**: Layer elements intentionally for depth - -### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) -- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) -- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) -- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) -- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand - -### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) - -### Composition Boldness -- **Hero moments**: Create clear focal points with dramatic treatment -- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements -- **Full-bleed elements**: Use full viewport width/height for impact -- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits - -**NEVER**: -- Add effects randomly without purpose (chaos ≠ bold) -- Sacrifice readability for aesthetics (body text must be readable) -- Make everything bold (then nothing is bold - need contrast) -- Ignore accessibility (bold design must still meet WCAG standards) -- Overwhelm with motion (animation fatigue is real) -- Copy trendy aesthetics blindly (bold means distinctive, not derivative) - -## Verify Quality - -Ensure amplification maintains usability and coherence: - -- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. -- **Still functional**: Can users accomplish tasks without distraction? -- **Coherent**: Does everything feel intentional and unified? -- **Memorable**: Will users remember this experience? -- **Performant**: Do all these effects run smoothly? -- **Accessible**: Does it still meet accessibility standards? - -**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." - -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/.agents/skills/clarify/SKILL.md b/.agents/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.agents/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.agents/skills/colorize/SKILL.md b/.agents/skills/colorize/SKILL.md deleted file mode 100644 index 76075804f..000000000 --- a/.agents/skills/colorize/SKILL.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. - ---- - -## Assess Color Opportunity - -Analyze the current state and identify opportunities: - -1. **Understand current state**: - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - - **Context**: What's appropriate for this domain and audience? - - **Brand**: Are there existing brand colors we should use? - -2. **Identify where color adds value**: - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - - **Hierarchy**: Drawing attention to important elements - - **Categorization**: Different sections, types, or states - - **Emotional tone**: Warmth, energy, trust, creativity - - **Wayfinding**: Helping users navigate and understand structure - - **Delight**: Moments of visual interest and personality - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. - -## Plan Color Strategy - -Create a purposeful color introduction plan: - -- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) -- **Dominant color**: Which color owns 60% of colored elements? -- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) -- **Application strategy**: Where does each color appear and why? - -**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. - -## Introduce Color Strategically - -Add color systematically across these dimensions: - -### Semantic Color -- **State indicators**: - - Success: Green tones (emerald, forest, mint) - - Error: Red/pink tones (rose, crimson, coral) - - Warning: Orange/amber tones - - Info: Blue tones (sky, ocean, indigo) - - Neutral: Gray/slate for inactive states - -- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) -- **Progress indicators**: Colored bars, rings, or charts showing completion or health - -### Accent Color Application -- **Primary actions**: Color the most important buttons/CTAs -- **Links**: Add color to clickable text (maintain accessibility) -- **Icons**: Colorize key icons for recognition and personality -- **Headers/titles**: Add color to section headers or key labels -- **Hover states**: Introduce color on interaction - -### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) -- **Colored sections**: Use subtle background colors to separate areas -- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) -- **Cards & surfaces**: Tint cards or surfaces slightly for warmth - -**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. - -### Data Visualization -- **Charts & graphs**: Use color to encode categories or values -- **Heatmaps**: Color intensity shows density or importance -- **Comparison**: Color coding for different datasets or timeframes - -### Borders & Accents -- **Accent borders**: Add colored left/top borders to cards or sections -- **Underlines**: Color underlines for emphasis or active states -- **Dividers**: Subtle colored dividers instead of gray lines -- **Focus rings**: Colored focus indicators matching brand - -### Typography Color -- **Colored headings**: Use brand colors for section headings (maintain contrast) -- **Highlight text**: Color for emphasis or categories -- **Labels & tags**: Small colored labels for metadata or categories - -### Decorative Elements -- **Illustrations**: Add colored illustrations or icons -- **Shapes**: Geometric shapes in brand colors as background elements -- **Gradients**: Colorful gradient overlays or mesh backgrounds -- **Blobs/organic shapes**: Soft colored shapes for visual interest - -## Balance & Refinement - -Ensure color addition improves rather than overwhelms: - -### Maintain Hierarchy -- **Dominant color** (60%): Primary brand color or most used accent -- **Secondary color** (30%): Supporting color for variety -- **Accent color** (10%): High contrast for key moments -- **Neutrals** (remaining): Gray/black/white for structure - -### Accessibility -- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) -- **Don't rely on color alone**: Use icons, labels, or patterns alongside color -- **Test for color blindness**: Verify red/green combinations work for all users - -### Cohesion -- **Consistent palette**: Use colors from defined palette, not arbitrary choices -- **Systematic application**: Same color meanings throughout (green always = success) -- **Temperature consistency**: Warm palette stays warm, cool stays cool - -**NEVER**: -- Use every color in the rainbow (choose 2-4 colors beyond neutrals) -- Apply color randomly without semantic meaning -- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead -- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication -- Use pure black (`#000`) or pure white (`#fff`) for large areas -- Violate WCAG contrast requirements -- Use color as the only indicator (accessibility issue) -- Make everything colorful (defeats the purpose) -- Default to purple-blue gradients (AI slop aesthetic) - -## Verify Color Addition - -Test that colorization improves the experience: - -- **Better hierarchy**: Does color guide attention appropriately? -- **Clearer meaning**: Does color help users understand states/categories? -- **More engaging**: Does the interface feel warmer and more inviting? -- **Still accessible**: Do all color combinations meet WCAG standards? -- **Not overwhelming**: Is color balanced and purposeful? - -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file diff --git a/.agents/skills/delight/SKILL.md b/.agents/skills/delight/SKILL.md deleted file mode 100644 index fedebff9c..000000000 --- a/.agents/skills/delight/SKILL.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). - ---- - -## 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, ask the user directly 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 - -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file diff --git a/.agents/skills/distill/SKILL.md b/.agents/skills/distill/SKILL.md deleted file mode 100644 index f3f721c99..000000000 --- a/.agents/skills/distill/SKILL.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## 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, ask the user directly 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 - -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file diff --git a/.agents/skills/harden/SKILL.md b/.agents/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.agents/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index bc4574d35..14acacac2 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -1,16 +1,18 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +25,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +34,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +270,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +284,96 @@ Remember: the model is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .agents/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.gemini/skills/adapt/SKILL.md b/.agents/skills/impeccable/reference/adapt.md similarity index 90% rename from .gemini/skills/adapt/SKILL.md rename to .agents/skills/impeccable/reference/adapt.md index 35b00e3f9..249653d4c 100644 --- a/.gemini/skills/adapt/SKILL.md +++ b/.agents/skills/impeccable/reference/adapt.md @@ -1,14 +1,7 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 ---- +> **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. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. --- @@ -194,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. \ No newline at end of file +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. diff --git a/.gemini/skills/animate/SKILL.md b/.agents/skills/impeccable/reference/animate.md similarity index 91% rename from .gemini/skills/animate/SKILL.md rename to .agents/skills/impeccable/reference/animate.md index 02294bc19..0186ce081 100644 --- a/.gemini/skills/animate/SKILL.md +++ b/.agents/skills/impeccable/reference/animate.md @@ -1,14 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -170,4 +163,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. \ No newline at end of file +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. diff --git a/.kiro/skills/audit/SKILL.md b/.agents/skills/impeccable/reference/audit.md similarity index 80% rename from .kiro/skills/audit/SKILL.md rename to .agents/skills/impeccable/reference/audit.md index 7fddc7b21..206fafb5c 100644 --- a/.kiro/skills/audit/SKILL.md +++ b/.agents/skills/impeccable/reference/audit.md @@ -1,15 +1,3 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - 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. @@ -64,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -107,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -126,13 +114,13 @@ 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) -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. 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 `/audit` after fixes to see your score improve. +> Re-run `/impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. @@ -143,4 +131,4 @@ 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. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.pi/skills/bolder/SKILL.md b/.agents/skills/impeccable/reference/bolder.md similarity index 88% rename from .pi/skills/bolder/SKILL.md rename to .agents/skills/impeccable/reference/bolder.md index e276b4d0b..cb3481663 100644 --- a/.pi/skills/bolder/SKILL.md +++ b/.agents/skills/impeccable/reference/bolder.md @@ -1,14 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -34,7 +25,7 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -52,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -112,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.pi/skills/clarify/SKILL.md b/.agents/skills/impeccable/reference/clarify.md similarity index 89% rename from .pi/skills/clarify/SKILL.md rename to .agents/skills/impeccable/reference/clarify.md index 468541090..dc116e745 100644 --- a/.pi/skills/clarify/SKILL.md +++ b/.agents/skills/impeccable/reference/clarify.md @@ -1,14 +1,7 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 ---- +> **Additional context needed**: audience technical level and users' mental state in context. Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. --- @@ -178,4 +171,4 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.agents/skills/critique/reference/cognitive-load.md b/.agents/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .agents/skills/critique/reference/cognitive-load.md rename to .agents/skills/impeccable/reference/cognitive-load.md diff --git a/.kiro/skills/colorize/SKILL.md b/.agents/skills/impeccable/reference/colorize.md similarity index 90% rename from .kiro/skills/colorize/SKILL.md rename to .agents/skills/impeccable/reference/colorize.md index 509a71c06..a4ce5072e 100644 --- a/.kiro/skills/colorize/SKILL.md +++ b/.agents/skills/impeccable/reference/colorize.md @@ -1,14 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -138,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.agents/skills/impeccable/reference/craft.md b/.agents/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.agents/skills/impeccable/reference/craft.md +++ b/.agents/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.agents/skills/critique/SKILL.md b/.agents/skills/impeccable/reference/critique.md similarity index 84% rename from .agents/skills/critique/SKILL.md rename to .agents/skills/impeccable/reference/critique.md index a827f2241..c6a867d50 100644 --- a/.agents/skills/critique/SKILL.md +++ b/.agents/skills/impeccable/reference/critique.md @@ -1,18 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -30,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -44,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -94,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -140,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `.github/copilot-instructions.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -176,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -196,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -209,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.kiro/skills/delight/SKILL.md b/.agents/skills/impeccable/reference/delight.md similarity index 92% rename from .kiro/skills/delight/SKILL.md rename to .agents/skills/impeccable/reference/delight.md index f323738dd..8a781e70e 100644 --- a/.kiro/skills/delight/SKILL.md +++ b/.agents/skills/impeccable/reference/delight.md @@ -1,14 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -299,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.gemini/skills/distill/SKILL.md b/.agents/skills/impeccable/reference/distill.md similarity index 91% rename from .gemini/skills/distill/SKILL.md rename to .agents/skills/impeccable/reference/distill.md index e462d1c27..4f47dc0b4 100644 --- a/.gemini/skills/distill/SKILL.md +++ b/.agents/skills/impeccable/reference/distill.md @@ -1,14 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -117,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.pi/skills/harden/SKILL.md b/.agents/skills/impeccable/reference/harden.md similarity index 96% rename from .pi/skills/harden/SKILL.md rename to .agents/skills/impeccable/reference/harden.md index 78eaa9881..af8b8a703 100644 --- a/.pi/skills/harden/SKILL.md +++ b/.agents/skills/impeccable/reference/harden.md @@ -1,9 +1,3 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 ---- - Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. ## Assess Hardening Needs @@ -384,4 +378,4 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.agents/skills/critique/reference/heuristics-scoring.md b/.agents/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .agents/skills/critique/reference/heuristics-scoring.md rename to .agents/skills/impeccable/reference/heuristics-scoring.md diff --git a/.gemini/skills/layout/SKILL.md b/.agents/skills/impeccable/reference/layout.md similarity index 89% rename from .gemini/skills/layout/SKILL.md rename to .agents/skills/impeccable/reference/layout.md index e3355c314..cd6b778e7 100644 --- a/.gemini/skills/layout/SKILL.md +++ b/.agents/skills/impeccable/reference/layout.md @@ -1,14 +1,5 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 ---- - Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak about the current spatial design: ## Plan Layout Improvements -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. Create a systematic plan: @@ -120,4 +111,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.cursor/skills/optimize/SKILL.md b/.agents/skills/impeccable/reference/optimize.md similarity index 96% rename from .cursor/skills/optimize/SKILL.md rename to .agents/skills/impeccable/reference/optimize.md index 6d82e1265..4abf575ec 100644 --- a/.cursor/skills/optimize/SKILL.md +++ b/.agents/skills/impeccable/reference/optimize.md @@ -1,9 +1,3 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 ---- - Identify and fix performance issues to create faster, smoother user experiences. ## Assess Performance Issues @@ -261,4 +255,4 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.pi/skills/overdrive/SKILL.md b/.agents/skills/impeccable/reference/overdrive.md similarity index 78% rename from .pi/skills/overdrive/SKILL.md rename to .agents/skills/impeccable/reference/overdrive.md index 11bd0f4a8..d84a147dc 100644 --- a/.pi/skills/overdrive/SKILL.md +++ b/.agents/skills/impeccable/reference/overdrive.md @@ -1,9 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 ---- - Start your response with: ``` @@ -11,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -31,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -89,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -126,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -137,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.agents/skills/critique/reference/personas.md b/.agents/skills/impeccable/reference/personas.md similarity index 100% rename from .agents/skills/critique/reference/personas.md rename to .agents/skills/impeccable/reference/personas.md diff --git a/.pi/skills/polish/SKILL.md b/.agents/skills/impeccable/reference/polish.md similarity index 93% rename from .pi/skills/polish/SKILL.md rename to .agents/skills/impeccable/reference/polish.md index 4c84dc128..597c68847 100644 --- a/.pi/skills/polish/SKILL.md +++ b/.agents/skills/impeccable/reference/polish.md @@ -1,14 +1,4 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- +> **Additional context needed**: quality bar (MVP vs flagship). Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. @@ -219,4 +209,4 @@ After polishing, ensure code quality: - **Consolidate tokens**: If you introduced new values, check whether they should be tokens. - **Verify DRYness**: Look for duplication introduced during polishing and consolidate. -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.kiro/skills/quieter/SKILL.md b/.agents/skills/impeccable/reference/quieter.md similarity index 89% rename from .kiro/skills/quieter/SKILL.md rename to .agents/skills/impeccable/reference/quieter.md index ca17da694..a8ad41809 100644 --- a/.kiro/skills/quieter/SKILL.md +++ b/.agents/skills/impeccable/reference/quieter.md @@ -1,14 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -98,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.kiro/skills/shape/SKILL.md b/.agents/skills/impeccable/reference/shape.md similarity index 80% rename from .kiro/skills/shape/SKILL.md rename to .agents/skills/impeccable/reference/shape.md index 6a94ee74c..0ae281943 100644 --- a/.kiro/skills/shape/SKILL.md +++ b/.agents/skills/impeccable/reference/shape.md @@ -1,24 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -56,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -91,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.agents/skills/impeccable/reference/teach.md b/.agents/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..5ebd3ed67 --- /dev/null +++ b/.agents/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .github/copilot-instructions.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.cursor/skills/typeset/SKILL.md b/.agents/skills/impeccable/reference/typeset.md similarity index 87% rename from .cursor/skills/typeset/SKILL.md rename to .agents/skills/impeccable/reference/typeset.md index a5fff11a8..2e49ab6c0 100644 --- a/.cursor/skills/typeset/SKILL.md +++ b/.agents/skills/impeccable/reference/typeset.md @@ -1,14 +1,5 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 ---- - Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak or generic about the current type: ## Plan Typography Improvements -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: @@ -111,4 +102,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.agents/skills/impeccable/scripts/cleanup-deprecated.mjs b/.agents/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.agents/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.agents/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.agents/skills/impeccable/scripts/command-metadata.json b/.agents/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.agents/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.agents/skills/impeccable/scripts/pin.mjs b/.agents/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.agents/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.agents/skills/layout/SKILL.md b/.agents/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.agents/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.agents/skills/optimize/SKILL.md b/.agents/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.agents/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.agents/skills/overdrive/SKILL.md b/.agents/skills/overdrive/SKILL.md deleted file mode 100644 index 862a4c9c4..000000000 --- a/.agents/skills/overdrive/SKILL.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Start your response with: - -``` -──────────── ⚡ OVERDRIVE ───────────── -》》》 Entering overdrive mode... -``` - -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. - -### Propose Before Building - -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: - -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. -2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). -3. Only proceed with the direction the user confirms. - -Skipping this step risks building something embarrassing that needs to be thrown away. - -### Iterate with Browser Automation - -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. - ---- - -## Assess What "Extraordinary" Means Here - -The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** - -### For visual/marketing surfaces -Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. - -### For functional UI -Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. - -### For performance-critical UI -The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. - -### For data-heavy interfaces -Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. - -**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. - -## The Toolkit - -Organized by what you're trying to achieve, not by technology name. - -### Make transitions feel cinematic -- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. -- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes -- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. - -### Tie animation to scroll position -- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) - -### Render beyond CSS -- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. -- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. -- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. - -### Make data feel alive -- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. -- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. -- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. - -### Animate complex properties -- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. -- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. - -### Push performance boundaries -- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. -- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. -- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. - -### Interact with the device -- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. -- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. - -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. - -## Implement with Discipline - -### Progressive enhancement is non-negotiable - -Every technique must degrade gracefully. The experience without the enhancement must still be good. - -```css -@supports (animation-timeline: scroll()) { - .hero { animation-timeline: scroll(); } -} -``` - -```javascript -if ('gpu' in navigator) { /* WebGPU */ } -else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } -/* CSS-only fallback must still look good */ -``` - -### Performance rules - -- Target 60fps. If dropping below 50, simplify. -- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. -- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. -- Pause off-screen rendering. Kill what you can't see. -- Test on real mid-range devices, not just your development machine. - -### Polish is the difference - -The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. - -**NEVER**: -- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion -- Ship effects that cause jank on mid-range devices -- Use bleeding-edge APIs without a functional fallback -- Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills -- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise - -## Verify the Result - -- **The wow test**: Show it to someone who hasn't seen it. Do they react? -- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? -- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? -- **The accessibility test**: Enable reduced motion. Still beautiful? -- **The context test**: Does this make sense for THIS brand and audience? - -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file diff --git a/.agents/skills/polish/SKILL.md b/.agents/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.agents/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.agents/skills/quieter/SKILL.md b/.agents/skills/quieter/SKILL.md deleted file mode 100644 index 373ae6869..000000000 --- a/.agents/skills/quieter/SKILL.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too intense: - -1. **Identify intensity sources**: - - **Color saturation**: Overly bright or saturated colors - - **Contrast extremes**: Too much high-contrast juxtaposition - - **Visual weight**: Too many bold, heavy elements competing - - **Animation excess**: Too much motion or overly dramatic effects - - **Complexity**: Too many visual elements, patterns, or decorations - - **Scale**: Everything is large and loud with no hierarchy - -2. **Understand the context**: - - What's the purpose? (Marketing vs tool vs reading experience) - - Who's the audience? (Some contexts need energy) - - What's working? (Don't throw away good ideas) - - What's the core message? (Preserve what matters) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. - -## Plan Refinement - -Create a strategy to reduce intensity while maintaining impact: - -- **Color approach**: Desaturate or shift to more sophisticated tones? -- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? -- **Simplification approach**: What can be removed entirely? -- **Sophistication approach**: How can we signal quality through restraint? - -**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. - -## Refine the Design - -Systematically reduce intensity across these dimensions: - -### Color Refinement -- **Reduce saturation**: Shift from fully saturated to 70-85% saturation -- **Soften palette**: Replace bright colors with muted, sophisticated tones -- **Reduce color variety**: Use fewer colors more thoughtfully -- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) -- **Gentler contrasts**: High contrast only where it matters most -- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness -- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead - -### Visual Weight Reduction -- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate -- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness -- **White space**: Increase breathing room, reduce density -- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely - -### Simplification -- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose -- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes -- **Reduce layering**: Flatten visual hierarchy where possible -- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows - -### Motion Reduction -- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing -- **Remove decorative animations**: Keep functional motion, remove flourishes -- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback -- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic -- **Remove animations entirely** if they're not serving a clear purpose - -### Composition Refinement -- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling -- **Align to grid**: Bring rogue elements back into systematic alignment -- **Even out spacing**: Replace extreme spacing variations with consistent rhythm - -**NEVER**: -- Make everything the same size/weight (hierarchy still matters) -- Remove all color (quiet ≠ grayscale) -- Eliminate all personality (maintain character through refinement) -- Sacrifice usability for aesthetics (functional elements still need clear affordances) -- Make everything small and light (some anchors needed) - -## Verify Quality - -Ensure refinement maintains quality: - -- **Still functional**: Can users still accomplish tasks easily? -- **Still distinctive**: Does it have character, or is it generic now? -- **Better reading**: Is text easier to read for extended periods? -- **Sophistication**: Does it feel more refined and premium? - -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file diff --git a/.agents/skills/shape/SKILL.md b/.agents/skills/shape/SKILL.md deleted file mode 100644 index 7e83008b5..000000000 --- a/.agents/skills/shape/SKILL.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. - -## Philosophy - -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. - -## Phase 1: Discovery Interview - -**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. - -Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. - -### Purpose & Context -- What is this feature for? What problem does it solve? -- Who specifically will use it? (Not "users"; be specific: role, context, frequency) -- What does success look like? How will you know this feature is working? -- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) - -### Content & Data -- What content or data does this feature display or collect? -- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) -- What are the edge cases? (Empty state, error state, first-time use, power user) -- Is any content dynamic? What changes and how often? - -### Design Goals -- What's the single most important thing a user should do or understand here? -- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) -- Are there existing patterns in the product this should be consistent with? -- Are there specific examples (inside or outside the product) that capture what you're going for? - -### Constraints -- Are there technical constraints? (Framework, performance budget, browser support) -- Are there content constraints? (Localization, dynamic text length, user-generated content) -- Mobile/responsive requirements? -- Accessibility requirements beyond WCAG AA? - -### Anti-Goals -- What should this NOT be? What would be a wrong direction? -- What's the biggest risk of getting this wrong? - -## Phase 2: Design Brief - -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. - -### Brief Structure - -**1. Feature Summary** (2-3 sentences) -What this is, who it's for, what it needs to accomplish. - -**2. Primary User Action** -The single most important thing a user should do or understand here. - -**3. Design Direction** -How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. - -**4. Layout Strategy** -High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. - -**5. Key States** -List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. - -**6. Interaction Model** -How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? - -**7. Content Requirements** -What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. - -**8. Recommended References** -Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). - -**9. Open Questions** -Anything unresolved that the implementer should resolve during build. - ---- - -ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. - -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file diff --git a/.agents/skills/typeset/SKILL.md b/.agents/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.agents/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 404f96f73..7fcd222d2 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -2,7 +2,7 @@ "$schema": "https://anthropic.com/claude-code/marketplace.schema.json", "name": "impeccable", "metadata": { - "description": "Design fluency for AI harnesses. 1 skill, 18 commands, and curated anti-patterns for impeccable frontend design." + "description": "Design fluency for AI harnesses. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design." }, "owner": { "name": "Paul Bakaus", @@ -11,7 +11,7 @@ "plugins": [ { "name": "impeccable", - "description": "Design vocabulary and skills for frontend development. Includes 18 commands (/polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.", + "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", "version": "2.1.1", "author": { "name": "Paul Bakaus", diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 32f8179c7..25dce892c 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,6 +1,6 @@ { "name": "impeccable", - "description": "Design vocabulary and skills for frontend development. Includes 18 commands (/polish, /distill, /audit, /typeset, /overdrive, etc.) and an enhanced impeccable skill with curated anti-patterns.", + "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", "version": "2.1.1", "author": { "name": "Paul Bakaus", diff --git a/.claude/skills/adapt/SKILL.md b/.claude/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.claude/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.claude/skills/audit/SKILL.md b/.claude/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.claude/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.claude/skills/clarify/SKILL.md b/.claude/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.claude/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.claude/skills/harden/SKILL.md b/.claude/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.claude/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.claude/skills/impeccable/SKILL.md b/.claude/skills/impeccable/SKILL.md index 18ecca274..5c0676008 100644 --- a/.claude/skills/impeccable/SKILL.md +++ b/.claude/skills/impeccable/SKILL.md @@ -1,16 +1,20 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. +allowed-tools: + - Bash(npx impeccable *) --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +27,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +36,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +272,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +286,96 @@ Remember: Claude is capable of extraordinary creative work. Don't hold back. Sho --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -STOP and call the AskUserQuestion tool to clarify. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .claude/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then STOP and call the AskUserQuestion tool to clarify. whether they'd also like the Design Context appended to CLAUDE.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.pi/skills/adapt/SKILL.md b/.claude/skills/impeccable/reference/adapt.md similarity index 90% rename from .pi/skills/adapt/SKILL.md rename to .claude/skills/impeccable/reference/adapt.md index 35b00e3f9..249653d4c 100644 --- a/.pi/skills/adapt/SKILL.md +++ b/.claude/skills/impeccable/reference/adapt.md @@ -1,14 +1,7 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 ---- +> **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. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. --- @@ -194,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. \ No newline at end of file +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. diff --git a/.claude/skills/animate/SKILL.md b/.claude/skills/impeccable/reference/animate.md similarity index 90% rename from .claude/skills/animate/SKILL.md rename to .claude/skills/impeccable/reference/animate.md index a3b21a220..fdb5b579a 100644 --- a/.claude/skills/animate/SKILL.md +++ b/.claude/skills/impeccable/reference/animate.md @@ -1,16 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -172,4 +163,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. \ No newline at end of file +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. diff --git a/.cursor/skills/audit/SKILL.md b/.claude/skills/impeccable/reference/audit.md similarity index 80% rename from .cursor/skills/audit/SKILL.md rename to .claude/skills/impeccable/reference/audit.md index 7fddc7b21..206fafb5c 100644 --- a/.cursor/skills/audit/SKILL.md +++ b/.claude/skills/impeccable/reference/audit.md @@ -1,15 +1,3 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - 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. @@ -64,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -107,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -126,13 +114,13 @@ 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) -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. 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 `/audit` after fixes to see your score improve. +> Re-run `/impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. @@ -143,4 +131,4 @@ 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. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.claude/skills/bolder/SKILL.md b/.claude/skills/impeccable/reference/bolder.md similarity index 87% rename from .claude/skills/bolder/SKILL.md rename to .claude/skills/impeccable/reference/bolder.md index 2e15db324..32c12a6bf 100644 --- a/.claude/skills/bolder/SKILL.md +++ b/.claude/skills/impeccable/reference/bolder.md @@ -1,16 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -36,7 +25,7 @@ If any of these are unclear from the codebase, STOP and call the AskUserQuestion **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -54,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -114,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.gemini/skills/clarify/SKILL.md b/.claude/skills/impeccable/reference/clarify.md similarity index 89% rename from .gemini/skills/clarify/SKILL.md rename to .claude/skills/impeccable/reference/clarify.md index 468541090..dc116e745 100644 --- a/.gemini/skills/clarify/SKILL.md +++ b/.claude/skills/impeccable/reference/clarify.md @@ -1,14 +1,7 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 ---- +> **Additional context needed**: audience technical level and users' mental state in context. Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. --- @@ -178,4 +171,4 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.claude/skills/critique/reference/cognitive-load.md b/.claude/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .claude/skills/critique/reference/cognitive-load.md rename to .claude/skills/impeccable/reference/cognitive-load.md diff --git a/.claude/skills/colorize/SKILL.md b/.claude/skills/impeccable/reference/colorize.md similarity index 89% rename from .claude/skills/colorize/SKILL.md rename to .claude/skills/impeccable/reference/colorize.md index 5b4e961de..5cd4db209 100644 --- a/.claude/skills/colorize/SKILL.md +++ b/.claude/skills/impeccable/reference/colorize.md @@ -1,16 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -140,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.claude/skills/impeccable/reference/craft.md b/.claude/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.claude/skills/impeccable/reference/craft.md +++ b/.claude/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.claude/skills/critique/SKILL.md b/.claude/skills/impeccable/reference/critique.md similarity index 84% rename from .claude/skills/critique/SKILL.md rename to .claude/skills/impeccable/reference/critique.md index f0c2d92d0..e0d63443f 100644 --- a/.claude/skills/critique/SKILL.md +++ b/.claude/skills/impeccable/reference/critique.md @@ -1,20 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" -allowed-tools: - - Bash(npx impeccable *) ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -32,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -46,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -96,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -142,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `CLAUDE.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -178,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. STOP and call the AskUserQuestion tool to clarify. These answers will shape the action plan. @@ -198,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -211,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.claude/skills/delight/SKILL.md b/.claude/skills/impeccable/reference/delight.md similarity index 92% rename from .claude/skills/delight/SKILL.md rename to .claude/skills/impeccable/reference/delight.md index 441102c72..c3a24aeb6 100644 --- a/.claude/skills/delight/SKILL.md +++ b/.claude/skills/impeccable/reference/delight.md @@ -1,16 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -301,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.claude/skills/distill/SKILL.md b/.claude/skills/impeccable/reference/distill.md similarity index 90% rename from .claude/skills/distill/SKILL.md rename to .claude/skills/impeccable/reference/distill.md index 765d01437..441b9fd93 100644 --- a/.claude/skills/distill/SKILL.md +++ b/.claude/skills/impeccable/reference/distill.md @@ -1,16 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -119,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.cursor/skills/harden/SKILL.md b/.claude/skills/impeccable/reference/harden.md similarity index 96% rename from .cursor/skills/harden/SKILL.md rename to .claude/skills/impeccable/reference/harden.md index 78eaa9881..af8b8a703 100644 --- a/.cursor/skills/harden/SKILL.md +++ b/.claude/skills/impeccable/reference/harden.md @@ -1,9 +1,3 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 ---- - Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. ## Assess Hardening Needs @@ -384,4 +378,4 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.claude/skills/critique/reference/heuristics-scoring.md b/.claude/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .claude/skills/critique/reference/heuristics-scoring.md rename to .claude/skills/impeccable/reference/heuristics-scoring.md diff --git a/.pi/skills/layout/SKILL.md b/.claude/skills/impeccable/reference/layout.md similarity index 89% rename from .pi/skills/layout/SKILL.md rename to .claude/skills/impeccable/reference/layout.md index e3355c314..cd6b778e7 100644 --- a/.pi/skills/layout/SKILL.md +++ b/.claude/skills/impeccable/reference/layout.md @@ -1,14 +1,5 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 ---- - Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak about the current spatial design: ## Plan Layout Improvements -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. Create a systematic plan: @@ -120,4 +111,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.gemini/skills/optimize/SKILL.md b/.claude/skills/impeccable/reference/optimize.md similarity index 96% rename from .gemini/skills/optimize/SKILL.md rename to .claude/skills/impeccable/reference/optimize.md index 6d82e1265..4abf575ec 100644 --- a/.gemini/skills/optimize/SKILL.md +++ b/.claude/skills/impeccable/reference/optimize.md @@ -1,9 +1,3 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 ---- - Identify and fix performance issues to create faster, smoother user experiences. ## Assess Performance Issues @@ -261,4 +255,4 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.claude/skills/overdrive/SKILL.md b/.claude/skills/impeccable/reference/overdrive.md similarity index 77% rename from .claude/skills/overdrive/SKILL.md rename to .claude/skills/impeccable/reference/overdrive.md index a2cfe05a5..e91734d77 100644 --- a/.claude/skills/overdrive/SKILL.md +++ b/.claude/skills/impeccable/reference/overdrive.md @@ -1,11 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Start your response with: ``` @@ -13,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **STOP and call the AskUserQuestion tool to clarify.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -33,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -91,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -128,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -139,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.claude/skills/critique/reference/personas.md b/.claude/skills/impeccable/reference/personas.md similarity index 100% rename from .claude/skills/critique/reference/personas.md rename to .claude/skills/impeccable/reference/personas.md diff --git a/.cursor/skills/polish/SKILL.md b/.claude/skills/impeccable/reference/polish.md similarity index 93% rename from .cursor/skills/polish/SKILL.md rename to .claude/skills/impeccable/reference/polish.md index 4c84dc128..597c68847 100644 --- a/.cursor/skills/polish/SKILL.md +++ b/.claude/skills/impeccable/reference/polish.md @@ -1,14 +1,4 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- +> **Additional context needed**: quality bar (MVP vs flagship). Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. @@ -219,4 +209,4 @@ After polishing, ensure code quality: - **Consolidate tokens**: If you introduced new values, check whether they should be tokens. - **Verify DRYness**: Look for duplication introduced during polishing and consolidate. -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.claude/skills/quieter/SKILL.md b/.claude/skills/impeccable/reference/quieter.md similarity index 88% rename from .claude/skills/quieter/SKILL.md rename to .claude/skills/impeccable/reference/quieter.md index a2457d65a..1b9de9450 100644 --- a/.claude/skills/quieter/SKILL.md +++ b/.claude/skills/impeccable/reference/quieter.md @@ -1,16 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -100,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.claude/skills/shape/SKILL.md b/.claude/skills/impeccable/reference/shape.md similarity index 79% rename from .claude/skills/shape/SKILL.md rename to .claude/skills/impeccable/reference/shape.md index 4bcfbc3b6..7e933b923 100644 --- a/.claude/skills/shape/SKILL.md +++ b/.claude/skills/impeccable/reference/shape.md @@ -1,26 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -58,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -93,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. STOP and call the AskUserQuestion tool to clarify. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.claude/skills/impeccable/reference/teach.md b/.claude/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..6fa81b276 --- /dev/null +++ b/.claude/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +STOP and call the AskUserQuestion tool to clarify. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then STOP and call the AskUserQuestion tool to clarify. whether they'd also like the Design Context appended to CLAUDE.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.gemini/skills/typeset/SKILL.md b/.claude/skills/impeccable/reference/typeset.md similarity index 87% rename from .gemini/skills/typeset/SKILL.md rename to .claude/skills/impeccable/reference/typeset.md index a5fff11a8..2e49ab6c0 100644 --- a/.gemini/skills/typeset/SKILL.md +++ b/.claude/skills/impeccable/reference/typeset.md @@ -1,14 +1,5 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 ---- - Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak or generic about the current type: ## Plan Typography Improvements -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: @@ -111,4 +102,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.claude/skills/impeccable/scripts/cleanup-deprecated.mjs b/.claude/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.claude/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.claude/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.claude/skills/impeccable/scripts/command-metadata.json b/.claude/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.claude/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.claude/skills/impeccable/scripts/pin.mjs b/.claude/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.claude/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.claude/skills/layout/SKILL.md b/.claude/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.claude/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.claude/skills/optimize/SKILL.md b/.claude/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.claude/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.claude/skills/polish/SKILL.md b/.claude/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.claude/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.claude/skills/typeset/SKILL.md b/.claude/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.claude/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.codex/skills/adapt/SKILL.md b/.codex/skills/adapt/SKILL.md deleted file mode 100644 index 152d607b5..000000000 --- a/.codex/skills/adapt/SKILL.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.codex/skills/animate/SKILL.md b/.codex/skills/animate/SKILL.md deleted file mode 100644 index d2888c25a..000000000 --- a/.codex/skills/animate/SKILL.md +++ /dev/null @@ -1,174 +0,0 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -argument-hint: "[target]" ---- - -Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: performance constraints. - ---- - -## Assess Animation Opportunities - -Analyze where motion would improve the experience: - -1. **Identify static areas**: - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - - **Lack of delight**: Functional but joyless interactions - - **Missed guidance**: Opportunities to direct attention or explain behavior - -2. **Understand the context**: - - What's the personality? (Playful vs serious, energetic vs calm) - - What's the performance budget? (Mobile-first? Complex page?) - - Who's the audience? (Motion-sensitive users? Power users who want speed?) - - What matters most? (One hero animation vs many micro-interactions?) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. - -## Plan Animation Strategy - -Create a purposeful animation plan: - -- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) -- **Feedback layer**: Which interactions need acknowledgment? -- **Transition layer**: Which state changes need smoothing? -- **Delight layer**: Where can we surprise and delight? - -**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. - -## Implement Animations - -Add motion systematically across these categories: - -### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations -- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer -- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management - -### Micro-interactions -- **Button feedback**: - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - - Click: Quick scale down then up (0.95 → 1), ripple effect - - Loading: Spinner or pulse state -- **Form interactions**: - - Input focus: Border color transition, slight scale or glow - - Validation: Shake on error, check mark on success, smooth color transitions -- **Toggle switches**: Smooth slide + color transition (200-300ms) -- **Checkboxes/radio**: Check mark animation, ripple effect -- **Like/favorite**: Scale + rotation, particle effects, color transition - -### State Transitions -- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) -- **Expand/collapse**: Height transition with overflow handling, icon rotation -- **Loading states**: Skeleton screen fades, spinner animations, progress bars -- **Success/error**: Color transitions, icon animations, gentle scale pulse -- **Enable/disable**: Opacity transitions, cursor changes - -### Navigation & Flow -- **Page transitions**: Crossfade between routes, shared element transitions -- **Tab switching**: Slide indicator, content fade/slide -- **Carousel/slider**: Smooth transforms, snap points, momentum -- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators - -### Feedback & Guidance -- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights -- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning -- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation -- **Focus flow**: Highlight path through form or workflow - -### Delight Moments -- **Empty states**: Subtle floating animations on illustrations -- **Completed actions**: Confetti, check mark flourish, success celebrations -- **Easter eggs**: Hidden interactions for discovery -- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches - -## Technical Implementation - -Use appropriate techniques for each animation: - -### Timing & Easing - -**Durations by purpose:** -- **100-150ms**: Instant feedback (button press, toggle) -- **200-300ms**: State changes (hover, menu open) -- **300-500ms**: Layout changes (accordion, modal) -- **500-800ms**: Entrance animations (page load) - -**Easing curves (use these, not CSS defaults):** -```css -/* Recommended - natural deceleration */ ---ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ ---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 */ -/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ -/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ -``` - -**Exit animations are faster than entrances.** Use ~75% of enter duration. - -### CSS Animations -```css -/* Prefer for simple, declarative animations */ -- transitions for state changes -- @keyframes for complex sequences -- transform + opacity only (GPU-accelerated) -``` - -### JavaScript Animation -```javascript -/* Use for complex, interactive animations */ -- Web Animations API for programmatic control -- Framer Motion for React -- GSAP for complex sequences -``` - -### Performance -- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties -- **will-change**: Add sparingly for known expensive animations -- **Reduce paint**: Minimize repaints, use `contain` where appropriate -- **Monitor FPS**: Ensure 60fps on target devices - -### Accessibility -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**NEVER**: -- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself -- Animate layout properties (width, height, top, left)—use transform instead -- 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 - -Test animations thoroughly: - -- **Smooth at 60fps**: No jank on target devices -- **Feels natural**: Easing curves feel organic, not robotic -- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) -- **Reduced motion works**: Animations disabled or simplified appropriately -- **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. \ No newline at end of file diff --git a/.codex/skills/bolder/SKILL.md b/.codex/skills/bolder/SKILL.md deleted file mode 100644 index e77f88117..000000000 --- a/.codex/skills/bolder/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -argument-hint: "[target]" ---- - -Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too safe or boring: - -1. **Identify weakness sources**: - - **Generic choices**: System fonts, basic colors, standard layouts - - **Timid scale**: Everything is medium-sized with no drama - - **Low contrast**: Everything has similar visual weight - - **Static**: No motion, no energy, no life - - **Predictable**: Standard patterns with no surprises - - **Flat hierarchy**: Nothing stands out or commands attention - -2. **Understand the context**: - - What's the brand personality? (How far can we push?) - - What's the purpose? (Marketing can be bolder than financial dashboards) - - Who's the audience? (What will resonate?) - - What are the constraints? (Brand guidelines, accessibility, performance) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. - -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." - -## Plan Amplification - -Create a strategy to increase impact while maintaining coherence: - -- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) -- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. -- **Risk budget**: How experimental can we be? Push boundaries within constraints. -- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) - -**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. - -## Amplify the Design - -Systematically increase impact across these dimensions: - -### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) -- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) -- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) - -### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) -- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop -- **Dominant color strategy**: Let one bold color own 60% of the design -- **Sharp accents**: High-contrast accent colors that pop -- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette -- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) - -### Spatial Drama -- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings -- **Break the grid**: Let hero elements escape containers and cross boundaries -- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry -- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) -- **Overlap**: Layer elements intentionally for depth - -### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) -- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) -- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) -- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) -- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand - -### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) - -### Composition Boldness -- **Hero moments**: Create clear focal points with dramatic treatment -- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements -- **Full-bleed elements**: Use full viewport width/height for impact -- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits - -**NEVER**: -- Add effects randomly without purpose (chaos ≠ bold) -- Sacrifice readability for aesthetics (body text must be readable) -- Make everything bold (then nothing is bold - need contrast) -- Ignore accessibility (bold design must still meet WCAG standards) -- Overwhelm with motion (animation fatigue is real) -- Copy trendy aesthetics blindly (bold means distinctive, not derivative) - -## Verify Quality - -Ensure amplification maintains usability and coherence: - -- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. -- **Still functional**: Can users accomplish tasks without distraction? -- **Coherent**: Does everything feel intentional and unified? -- **Memorable**: Will users remember this experience? -- **Performant**: Do all these effects run smoothly? -- **Accessible**: Does it still meet accessibility standards? - -**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." - -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/.codex/skills/clarify/SKILL.md b/.codex/skills/clarify/SKILL.md deleted file mode 100644 index 57d0aa6b0..000000000 --- a/.codex/skills/clarify/SKILL.md +++ /dev/null @@ -1,182 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.codex/skills/colorize/SKILL.md b/.codex/skills/colorize/SKILL.md deleted file mode 100644 index c9f743ced..000000000 --- a/.codex/skills/colorize/SKILL.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -argument-hint: "[target]" ---- - -Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: existing brand colors. - ---- - -## Assess Color Opportunity - -Analyze the current state and identify opportunities: - -1. **Understand current state**: - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - - **Context**: What's appropriate for this domain and audience? - - **Brand**: Are there existing brand colors we should use? - -2. **Identify where color adds value**: - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - - **Hierarchy**: Drawing attention to important elements - - **Categorization**: Different sections, types, or states - - **Emotional tone**: Warmth, energy, trust, creativity - - **Wayfinding**: Helping users navigate and understand structure - - **Delight**: Moments of visual interest and personality - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. - -## Plan Color Strategy - -Create a purposeful color introduction plan: - -- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) -- **Dominant color**: Which color owns 60% of colored elements? -- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) -- **Application strategy**: Where does each color appear and why? - -**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. - -## Introduce Color Strategically - -Add color systematically across these dimensions: - -### Semantic Color -- **State indicators**: - - Success: Green tones (emerald, forest, mint) - - Error: Red/pink tones (rose, crimson, coral) - - Warning: Orange/amber tones - - Info: Blue tones (sky, ocean, indigo) - - Neutral: Gray/slate for inactive states - -- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) -- **Progress indicators**: Colored bars, rings, or charts showing completion or health - -### Accent Color Application -- **Primary actions**: Color the most important buttons/CTAs -- **Links**: Add color to clickable text (maintain accessibility) -- **Icons**: Colorize key icons for recognition and personality -- **Headers/titles**: Add color to section headers or key labels -- **Hover states**: Introduce color on interaction - -### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) -- **Colored sections**: Use subtle background colors to separate areas -- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) -- **Cards & surfaces**: Tint cards or surfaces slightly for warmth - -**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. - -### Data Visualization -- **Charts & graphs**: Use color to encode categories or values -- **Heatmaps**: Color intensity shows density or importance -- **Comparison**: Color coding for different datasets or timeframes - -### Borders & Accents -- **Accent borders**: Add colored left/top borders to cards or sections -- **Underlines**: Color underlines for emphasis or active states -- **Dividers**: Subtle colored dividers instead of gray lines -- **Focus rings**: Colored focus indicators matching brand - -### Typography Color -- **Colored headings**: Use brand colors for section headings (maintain contrast) -- **Highlight text**: Color for emphasis or categories -- **Labels & tags**: Small colored labels for metadata or categories - -### Decorative Elements -- **Illustrations**: Add colored illustrations or icons -- **Shapes**: Geometric shapes in brand colors as background elements -- **Gradients**: Colorful gradient overlays or mesh backgrounds -- **Blobs/organic shapes**: Soft colored shapes for visual interest - -## Balance & Refinement - -Ensure color addition improves rather than overwhelms: - -### Maintain Hierarchy -- **Dominant color** (60%): Primary brand color or most used accent -- **Secondary color** (30%): Supporting color for variety -- **Accent color** (10%): High contrast for key moments -- **Neutrals** (remaining): Gray/black/white for structure - -### Accessibility -- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) -- **Don't rely on color alone**: Use icons, labels, or patterns alongside color -- **Test for color blindness**: Verify red/green combinations work for all users - -### Cohesion -- **Consistent palette**: Use colors from defined palette, not arbitrary choices -- **Systematic application**: Same color meanings throughout (green always = success) -- **Temperature consistency**: Warm palette stays warm, cool stays cool - -**NEVER**: -- Use every color in the rainbow (choose 2-4 colors beyond neutrals) -- Apply color randomly without semantic meaning -- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead -- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication -- Use pure black (`#000`) or pure white (`#fff`) for large areas -- Violate WCAG contrast requirements -- Use color as the only indicator (accessibility issue) -- Make everything colorful (defeats the purpose) -- Default to purple-blue gradients (AI slop aesthetic) - -## Verify Color Addition - -Test that colorization improves the experience: - -- **Better hierarchy**: Does color guide attention appropriately? -- **Clearer meaning**: Does color help users understand states/categories? -- **More engaging**: Does the interface feel warmer and more inviting? -- **Still accessible**: Do all color combinations meet WCAG standards? -- **Not overwhelming**: Is color balanced and purposeful? - -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file diff --git a/.codex/skills/delight/SKILL.md b/.codex/skills/delight/SKILL.md deleted file mode 100644 index 01638978d..000000000 --- a/.codex/skills/delight/SKILL.md +++ /dev/null @@ -1,303 +0,0 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -argument-hint: "[target]" ---- - -Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). - ---- - -## 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, ask the user directly 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 - -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file diff --git a/.codex/skills/distill/SKILL.md b/.codex/skills/distill/SKILL.md deleted file mode 100644 index 8cb1d40e2..000000000 --- a/.codex/skills/distill/SKILL.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -argument-hint: "[target]" ---- - -Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - -## 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, ask the user directly 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 - -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file diff --git a/.codex/skills/harden/SKILL.md b/.codex/skills/harden/SKILL.md deleted file mode 100644 index ccfa6f644..000000000 --- a/.codex/skills/harden/SKILL.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.codex/skills/impeccable/SKILL.md b/.codex/skills/impeccable/SKILL.md index 6dd46e1b6..b96bef77e 100644 --- a/.codex/skills/impeccable/SKILL.md +++ b/.codex/skills/impeccable/SKILL.md @@ -1,15 +1,17 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `$layout`, `/normalize` was folded into `$polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through $impeccable (e.g., `$impeccable audit`). I'll clean up the old standalone skill files. Use `$impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -22,8 +24,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -33,7 +33,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -269,7 +269,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -283,82 +283,96 @@ Remember: GPT is capable of extraordinary creative work. Don't hold back. Show w --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `$impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `$impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `$impeccable craft [feature]` - Shape, then build a feature end-to-end +> `$impeccable shape [feature]` - Plan UX/UI before writing code +> `$impeccable teach` - Set up design context for this project (one-time) +> `$impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `$impeccable critique [target]` - UX design review with heuristic scoring +> `$impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `$impeccable polish [target]` - Final quality pass before shipping +> `$impeccable bolder [target]` - Amplify safe/bland designs +> `$impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `$impeccable distill [target]` - Strip to essence, remove complexity +> `$impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `$impeccable animate [target]` - Add purposeful animations and motion +> `$impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `$impeccable typeset [target]` - Improve typography hierarchy and fonts +> `$impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `$impeccable delight [target]` - Add personality and memorable touches +> `$impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `$impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `$impeccable adapt [target]` - Adapt for different devices and screen sizes +> `$impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `$impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates $audit) +> `$impeccable unpin ` - Remove a pinned shortcut +> +> Or use `$impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke $impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `$impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `$audit` instead of `$impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .codex/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `$impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.cursor/skills/adapt/SKILL.md b/.codex/skills/impeccable/reference/adapt.md similarity index 90% rename from .cursor/skills/adapt/SKILL.md rename to .codex/skills/impeccable/reference/adapt.md index 35b00e3f9..249653d4c 100644 --- a/.cursor/skills/adapt/SKILL.md +++ b/.codex/skills/impeccable/reference/adapt.md @@ -1,14 +1,7 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 ---- +> **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. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. --- @@ -194,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. \ No newline at end of file +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. diff --git a/.kiro/skills/animate/SKILL.md b/.codex/skills/impeccable/reference/animate.md similarity index 91% rename from .kiro/skills/animate/SKILL.md rename to .codex/skills/impeccable/reference/animate.md index 02294bc19..0186ce081 100644 --- a/.kiro/skills/animate/SKILL.md +++ b/.codex/skills/impeccable/reference/animate.md @@ -1,14 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -170,4 +163,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. \ No newline at end of file +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. diff --git a/.codex/skills/audit/SKILL.md b/.codex/skills/impeccable/reference/audit.md similarity index 79% rename from .codex/skills/audit/SKILL.md rename to .codex/skills/impeccable/reference/audit.md index 84a55b188..a86b3be95 100644 --- a/.codex/skills/audit/SKILL.md +++ b/.codex/skills/impeccable/reference/audit.md @@ -1,16 +1,3 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - 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. @@ -65,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -108,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $layout, $distill, $delight, $audit, $harden, $polish, $bolder, $typeset, $critique, $colorize, $overdrive) +- **Suggested command**: Which command to use (prefer: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) ### Patterns & Systemic Issues @@ -127,13 +114,13 @@ 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) -**Rules**: Only recommend commands from: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $layout, $distill, $delight, $audit, $harden, $polish, $bolder, $typeset, $critique, $colorize, $overdrive. Map findings to the most appropriate command. End with `$polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $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. 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 `$audit` after fixes to see your score improve. +> Re-run `$impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. @@ -144,4 +131,4 @@ 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. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.cursor/skills/bolder/SKILL.md b/.codex/skills/impeccable/reference/bolder.md similarity index 88% rename from .cursor/skills/bolder/SKILL.md rename to .codex/skills/impeccable/reference/bolder.md index e276b4d0b..cb3481663 100644 --- a/.cursor/skills/bolder/SKILL.md +++ b/.codex/skills/impeccable/reference/bolder.md @@ -1,14 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -34,7 +25,7 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -52,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -112,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.kiro/skills/clarify/SKILL.md b/.codex/skills/impeccable/reference/clarify.md similarity index 89% rename from .kiro/skills/clarify/SKILL.md rename to .codex/skills/impeccable/reference/clarify.md index 468541090..dc116e745 100644 --- a/.kiro/skills/clarify/SKILL.md +++ b/.codex/skills/impeccable/reference/clarify.md @@ -1,14 +1,7 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 ---- +> **Additional context needed**: audience technical level and users' mental state in context. Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. --- @@ -178,4 +171,4 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.codex/skills/critique/reference/cognitive-load.md b/.codex/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .codex/skills/critique/reference/cognitive-load.md rename to .codex/skills/impeccable/reference/cognitive-load.md diff --git a/.gemini/skills/colorize/SKILL.md b/.codex/skills/impeccable/reference/colorize.md similarity index 90% rename from .gemini/skills/colorize/SKILL.md rename to .codex/skills/impeccable/reference/colorize.md index 509a71c06..a4ce5072e 100644 --- a/.gemini/skills/colorize/SKILL.md +++ b/.codex/skills/impeccable/reference/colorize.md @@ -1,14 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -138,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.codex/skills/impeccable/reference/craft.md b/.codex/skills/impeccable/reference/craft.md index 6748e3259..3b95aac83 100644 --- a/.codex/skills/impeccable/reference/craft.md +++ b/.codex/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run $shape, passing along whatever feature description the user provided. +Run $impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run $shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run $impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.codex/skills/critique/SKILL.md b/.codex/skills/impeccable/reference/critique.md similarity index 84% rename from .codex/skills/critique/SKILL.md rename to .codex/skills/impeccable/reference/critique.md index 185049999..41ec68c4d 100644 --- a/.codex/skills/critique/SKILL.md +++ b/.codex/skills/impeccable/reference/critique.md @@ -1,17 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -argument-hint: "[area (feature, page, component...)]" ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke $impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run $impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -29,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -43,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -93,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -139,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $layout, $distill, $delight, $audit, $harden, $polish, $bolder, $typeset, $critique, $colorize, $overdrive) +- **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 harden, $impeccable layout, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *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. @@ -175,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -183,7 +172,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene 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. +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". @@ -195,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -208,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: $animate, $quieter, $shape, $optimize, $adapt, $clarify, $layout, $distill, $delight, $audit, $harden, $polish, $bolder, $typeset, $critique, $colorize, $overdrive +- Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $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 `$polish` as the final step if any fixes were recommended +- 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 `$critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `$impeccable critique` after fixes to see your score improve. diff --git a/.pi/skills/delight/SKILL.md b/.codex/skills/impeccable/reference/delight.md similarity index 92% rename from .pi/skills/delight/SKILL.md rename to .codex/skills/impeccable/reference/delight.md index f323738dd..8a781e70e 100644 --- a/.pi/skills/delight/SKILL.md +++ b/.codex/skills/impeccable/reference/delight.md @@ -1,14 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -299,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.cursor/skills/distill/SKILL.md b/.codex/skills/impeccable/reference/distill.md similarity index 91% rename from .cursor/skills/distill/SKILL.md rename to .codex/skills/impeccable/reference/distill.md index e462d1c27..4f47dc0b4 100644 --- a/.cursor/skills/distill/SKILL.md +++ b/.codex/skills/impeccable/reference/distill.md @@ -1,14 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -117,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.gemini/skills/harden/SKILL.md b/.codex/skills/impeccable/reference/harden.md similarity index 96% rename from .gemini/skills/harden/SKILL.md rename to .codex/skills/impeccable/reference/harden.md index 78eaa9881..af8b8a703 100644 --- a/.gemini/skills/harden/SKILL.md +++ b/.codex/skills/impeccable/reference/harden.md @@ -1,9 +1,3 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 ---- - Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. ## Assess Hardening Needs @@ -384,4 +378,4 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.codex/skills/critique/reference/heuristics-scoring.md b/.codex/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .codex/skills/critique/reference/heuristics-scoring.md rename to .codex/skills/impeccable/reference/heuristics-scoring.md diff --git a/.kiro/skills/layout/SKILL.md b/.codex/skills/impeccable/reference/layout.md similarity index 89% rename from .kiro/skills/layout/SKILL.md rename to .codex/skills/impeccable/reference/layout.md index e3355c314..cd6b778e7 100644 --- a/.kiro/skills/layout/SKILL.md +++ b/.codex/skills/impeccable/reference/layout.md @@ -1,14 +1,5 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 ---- - Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak about the current spatial design: ## Plan Layout Improvements -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. Create a systematic plan: @@ -120,4 +111,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.pi/skills/optimize/SKILL.md b/.codex/skills/impeccable/reference/optimize.md similarity index 96% rename from .pi/skills/optimize/SKILL.md rename to .codex/skills/impeccable/reference/optimize.md index 6d82e1265..4abf575ec 100644 --- a/.pi/skills/optimize/SKILL.md +++ b/.codex/skills/impeccable/reference/optimize.md @@ -1,9 +1,3 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 ---- - Identify and fix performance issues to create faster, smoother user experiences. ## Assess Performance Issues @@ -261,4 +255,4 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.cursor/skills/overdrive/SKILL.md b/.codex/skills/impeccable/reference/overdrive.md similarity index 78% rename from .cursor/skills/overdrive/SKILL.md rename to .codex/skills/impeccable/reference/overdrive.md index 11bd0f4a8..d84a147dc 100644 --- a/.cursor/skills/overdrive/SKILL.md +++ b/.codex/skills/impeccable/reference/overdrive.md @@ -1,9 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 ---- - Start your response with: ``` @@ -11,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -31,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -89,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -126,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -137,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.codex/skills/critique/reference/personas.md b/.codex/skills/impeccable/reference/personas.md similarity index 100% rename from .codex/skills/critique/reference/personas.md rename to .codex/skills/impeccable/reference/personas.md diff --git a/.gemini/skills/polish/SKILL.md b/.codex/skills/impeccable/reference/polish.md similarity index 93% rename from .gemini/skills/polish/SKILL.md rename to .codex/skills/impeccable/reference/polish.md index 4c84dc128..597c68847 100644 --- a/.gemini/skills/polish/SKILL.md +++ b/.codex/skills/impeccable/reference/polish.md @@ -1,14 +1,4 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- +> **Additional context needed**: quality bar (MVP vs flagship). Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. @@ -219,4 +209,4 @@ After polishing, ensure code quality: - **Consolidate tokens**: If you introduced new values, check whether they should be tokens. - **Verify DRYness**: Look for duplication introduced during polishing and consolidate. -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.gemini/skills/quieter/SKILL.md b/.codex/skills/impeccable/reference/quieter.md similarity index 89% rename from .gemini/skills/quieter/SKILL.md rename to .codex/skills/impeccable/reference/quieter.md index ca17da694..a8ad41809 100644 --- a/.gemini/skills/quieter/SKILL.md +++ b/.codex/skills/impeccable/reference/quieter.md @@ -1,14 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -98,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.codex/skills/shape/SKILL.md b/.codex/skills/impeccable/reference/shape.md similarity index 79% rename from .codex/skills/shape/SKILL.md rename to .codex/skills/impeccable/reference/shape.md index 3e747afc2..8a6701e0f 100644 --- a/.codex/skills/shape/SKILL.md +++ b/.codex/skills/impeccable/reference/shape.md @@ -1,25 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -argument-hint: "[feature to shape]" ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke $impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run $impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to $impeccable craft, $impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to $impeccable craft, or directly to $impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -57,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -92,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to $impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use $impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to $impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use $impeccable craft instead, which runs this command internally.) diff --git a/.codex/skills/impeccable/reference/teach.md b/.codex/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..2d9f768f1 --- /dev/null +++ b/.codex/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.kiro/skills/typeset/SKILL.md b/.codex/skills/impeccable/reference/typeset.md similarity index 87% rename from .kiro/skills/typeset/SKILL.md rename to .codex/skills/impeccable/reference/typeset.md index a5fff11a8..2e49ab6c0 100644 --- a/.kiro/skills/typeset/SKILL.md +++ b/.codex/skills/impeccable/reference/typeset.md @@ -1,14 +1,5 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 ---- - Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak or generic about the current type: ## Plan Typography Improvements -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: @@ -111,4 +102,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.codex/skills/impeccable/scripts/cleanup-deprecated.mjs b/.codex/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.codex/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.codex/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.codex/skills/impeccable/scripts/command-metadata.json b/.codex/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.codex/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.codex/skills/impeccable/scripts/pin.mjs b/.codex/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.codex/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.codex/skills/layout/SKILL.md b/.codex/skills/layout/SKILL.md deleted file mode 100644 index 0e212c0b6..000000000 --- a/.codex/skills/layout/SKILL.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.codex/skills/optimize/SKILL.md b/.codex/skills/optimize/SKILL.md deleted file mode 100644 index a9ec152d4..000000000 --- a/.codex/skills/optimize/SKILL.md +++ /dev/null @@ -1,265 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.codex/skills/overdrive/SKILL.md b/.codex/skills/overdrive/SKILL.md deleted file mode 100644 index c63cbb867..000000000 --- a/.codex/skills/overdrive/SKILL.md +++ /dev/null @@ -1,141 +0,0 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -argument-hint: "[target]" ---- - -Start your response with: - -``` -──────────── ⚡ OVERDRIVE ───────────── -》》》 Entering overdrive mode... -``` - -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. - -### Propose Before Building - -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: - -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. -2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). -3. Only proceed with the direction the user confirms. - -Skipping this step risks building something embarrassing that needs to be thrown away. - -### Iterate with Browser Automation - -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. - ---- - -## Assess What "Extraordinary" Means Here - -The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** - -### For visual/marketing surfaces -Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. - -### For functional UI -Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. - -### For performance-critical UI -The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. - -### For data-heavy interfaces -Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. - -**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. - -## The Toolkit - -Organized by what you're trying to achieve, not by technology name. - -### Make transitions feel cinematic -- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. -- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes -- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. - -### Tie animation to scroll position -- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) - -### Render beyond CSS -- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. -- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. -- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. - -### Make data feel alive -- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. -- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. -- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. - -### Animate complex properties -- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. -- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. - -### Push performance boundaries -- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. -- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. -- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. - -### Interact with the device -- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. -- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. - -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. - -## Implement with Discipline - -### Progressive enhancement is non-negotiable - -Every technique must degrade gracefully. The experience without the enhancement must still be good. - -```css -@supports (animation-timeline: scroll()) { - .hero { animation-timeline: scroll(); } -} -``` - -```javascript -if ('gpu' in navigator) { /* WebGPU */ } -else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } -/* CSS-only fallback must still look good */ -``` - -### Performance rules - -- Target 60fps. If dropping below 50, simplify. -- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. -- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. -- Pause off-screen rendering. Kill what you can't see. -- Test on real mid-range devices, not just your development machine. - -### Polish is the difference - -The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. - -**NEVER**: -- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion -- Ship effects that cause jank on mid-range devices -- Use bleeding-edge APIs without a functional fallback -- Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills -- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise - -## Verify the Result - -- **The wow test**: Show it to someone who hasn't seen it. Do they react? -- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? -- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? -- **The accessibility test**: Enable reduced motion. Still beautiful? -- **The context test**: Does this make sense for THIS brand and audience? - -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file diff --git a/.codex/skills/polish/SKILL.md b/.codex/skills/polish/SKILL.md deleted file mode 100644 index 47fe1199e..000000000 --- a/.codex/skills/polish/SKILL.md +++ /dev/null @@ -1,223 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.codex/skills/quieter/SKILL.md b/.codex/skills/quieter/SKILL.md deleted file mode 100644 index b01b87eb5..000000000 --- a/.codex/skills/quieter/SKILL.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -argument-hint: "[target]" ---- - -Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too intense: - -1. **Identify intensity sources**: - - **Color saturation**: Overly bright or saturated colors - - **Contrast extremes**: Too much high-contrast juxtaposition - - **Visual weight**: Too many bold, heavy elements competing - - **Animation excess**: Too much motion or overly dramatic effects - - **Complexity**: Too many visual elements, patterns, or decorations - - **Scale**: Everything is large and loud with no hierarchy - -2. **Understand the context**: - - What's the purpose? (Marketing vs tool vs reading experience) - - Who's the audience? (Some contexts need energy) - - What's working? (Don't throw away good ideas) - - What's the core message? (Preserve what matters) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. - -## Plan Refinement - -Create a strategy to reduce intensity while maintaining impact: - -- **Color approach**: Desaturate or shift to more sophisticated tones? -- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? -- **Simplification approach**: What can be removed entirely? -- **Sophistication approach**: How can we signal quality through restraint? - -**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. - -## Refine the Design - -Systematically reduce intensity across these dimensions: - -### Color Refinement -- **Reduce saturation**: Shift from fully saturated to 70-85% saturation -- **Soften palette**: Replace bright colors with muted, sophisticated tones -- **Reduce color variety**: Use fewer colors more thoughtfully -- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) -- **Gentler contrasts**: High contrast only where it matters most -- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness -- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead - -### Visual Weight Reduction -- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate -- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness -- **White space**: Increase breathing room, reduce density -- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely - -### Simplification -- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose -- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes -- **Reduce layering**: Flatten visual hierarchy where possible -- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows - -### Motion Reduction -- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing -- **Remove decorative animations**: Keep functional motion, remove flourishes -- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback -- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic -- **Remove animations entirely** if they're not serving a clear purpose - -### Composition Refinement -- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling -- **Align to grid**: Bring rogue elements back into systematic alignment -- **Even out spacing**: Replace extreme spacing variations with consistent rhythm - -**NEVER**: -- Make everything the same size/weight (hierarchy still matters) -- Remove all color (quiet ≠ grayscale) -- Eliminate all personality (maintain character through refinement) -- Sacrifice usability for aesthetics (functional elements still need clear affordances) -- Make everything small and light (some anchors needed) - -## Verify Quality - -Ensure refinement maintains quality: - -- **Still functional**: Can users still accomplish tasks easily? -- **Still distinctive**: Does it have character, or is it generic now? -- **Better reading**: Is text easier to read for extended periods? -- **Sophistication**: Does it feel more refined and premium? - -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file diff --git a/.codex/skills/typeset/SKILL.md b/.codex/skills/typeset/SKILL.md deleted file mode 100644 index 3a371d1c2..000000000 --- a/.codex/skills/typeset/SKILL.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke $impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run $impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.cursor/skills/impeccable/SKILL.md b/.cursor/skills/impeccable/SKILL.md index 8893bb42a..79ed6debb 100644 --- a/.cursor/skills/impeccable/SKILL.md +++ b/.cursor/skills/impeccable/SKILL.md @@ -1,14 +1,16 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -21,8 +23,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -32,7 +32,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -268,7 +268,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -282,82 +282,96 @@ Remember: the model is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .cursor/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .cursorrules. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.kiro/skills/adapt/SKILL.md b/.cursor/skills/impeccable/reference/adapt.md similarity index 90% rename from .kiro/skills/adapt/SKILL.md rename to .cursor/skills/impeccable/reference/adapt.md index 35b00e3f9..249653d4c 100644 --- a/.kiro/skills/adapt/SKILL.md +++ b/.cursor/skills/impeccable/reference/adapt.md @@ -1,14 +1,7 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 ---- +> **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. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. --- @@ -194,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. \ No newline at end of file +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. diff --git a/.cursor/skills/animate/SKILL.md b/.cursor/skills/impeccable/reference/animate.md similarity index 91% rename from .cursor/skills/animate/SKILL.md rename to .cursor/skills/impeccable/reference/animate.md index 02294bc19..0186ce081 100644 --- a/.cursor/skills/animate/SKILL.md +++ b/.cursor/skills/impeccable/reference/animate.md @@ -1,14 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -170,4 +163,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. \ No newline at end of file +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. diff --git a/.pi/skills/audit/SKILL.md b/.cursor/skills/impeccable/reference/audit.md similarity index 80% rename from .pi/skills/audit/SKILL.md rename to .cursor/skills/impeccable/reference/audit.md index 7fddc7b21..206fafb5c 100644 --- a/.pi/skills/audit/SKILL.md +++ b/.cursor/skills/impeccable/reference/audit.md @@ -1,15 +1,3 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - 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. @@ -64,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -107,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -126,13 +114,13 @@ 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) -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. 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 `/audit` after fixes to see your score improve. +> Re-run `/impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. @@ -143,4 +131,4 @@ 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. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.gemini/skills/bolder/SKILL.md b/.cursor/skills/impeccable/reference/bolder.md similarity index 88% rename from .gemini/skills/bolder/SKILL.md rename to .cursor/skills/impeccable/reference/bolder.md index e276b4d0b..cb3481663 100644 --- a/.gemini/skills/bolder/SKILL.md +++ b/.cursor/skills/impeccable/reference/bolder.md @@ -1,14 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -34,7 +25,7 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -52,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -112,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.cursor/skills/clarify/SKILL.md b/.cursor/skills/impeccable/reference/clarify.md similarity index 89% rename from .cursor/skills/clarify/SKILL.md rename to .cursor/skills/impeccable/reference/clarify.md index 468541090..dc116e745 100644 --- a/.cursor/skills/clarify/SKILL.md +++ b/.cursor/skills/impeccable/reference/clarify.md @@ -1,14 +1,7 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 ---- +> **Additional context needed**: audience technical level and users' mental state in context. Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. --- @@ -178,4 +171,4 @@ Test that copy improvements work: - **Consistency**: Does it match terminology elsewhere? - **Tone**: Is it appropriate for the situation? -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.cursor/skills/critique/reference/cognitive-load.md b/.cursor/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .cursor/skills/critique/reference/cognitive-load.md rename to .cursor/skills/impeccable/reference/cognitive-load.md diff --git a/.cursor/skills/colorize/SKILL.md b/.cursor/skills/impeccable/reference/colorize.md similarity index 90% rename from .cursor/skills/colorize/SKILL.md rename to .cursor/skills/impeccable/reference/colorize.md index 509a71c06..a4ce5072e 100644 --- a/.cursor/skills/colorize/SKILL.md +++ b/.cursor/skills/impeccable/reference/colorize.md @@ -1,14 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -138,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.cursor/skills/impeccable/reference/craft.md b/.cursor/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.cursor/skills/impeccable/reference/craft.md +++ b/.cursor/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.cursor/skills/critique/SKILL.md b/.cursor/skills/impeccable/reference/critique.md similarity index 85% rename from .cursor/skills/critique/SKILL.md rename to .cursor/skills/impeccable/reference/critique.md index addaa3224..8a8ebeb35 100644 --- a/.cursor/skills/critique/SKILL.md +++ b/.cursor/skills/impeccable/reference/critique.md @@ -1,16 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -28,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -42,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -92,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -138,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `.cursorrules` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -174,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -194,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -207,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.cursor/skills/delight/SKILL.md b/.cursor/skills/impeccable/reference/delight.md similarity index 92% rename from .cursor/skills/delight/SKILL.md rename to .cursor/skills/impeccable/reference/delight.md index f323738dd..8a781e70e 100644 --- a/.cursor/skills/delight/SKILL.md +++ b/.cursor/skills/impeccable/reference/delight.md @@ -1,14 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -299,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.kiro/skills/distill/SKILL.md b/.cursor/skills/impeccable/reference/distill.md similarity index 91% rename from .kiro/skills/distill/SKILL.md rename to .cursor/skills/impeccable/reference/distill.md index e462d1c27..4f47dc0b4 100644 --- a/.kiro/skills/distill/SKILL.md +++ b/.cursor/skills/impeccable/reference/distill.md @@ -1,14 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -117,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.kiro/skills/harden/SKILL.md b/.cursor/skills/impeccable/reference/harden.md similarity index 96% rename from .kiro/skills/harden/SKILL.md rename to .cursor/skills/impeccable/reference/harden.md index 78eaa9881..af8b8a703 100644 --- a/.kiro/skills/harden/SKILL.md +++ b/.cursor/skills/impeccable/reference/harden.md @@ -1,9 +1,3 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 ---- - Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. ## Assess Hardening Needs @@ -384,4 +378,4 @@ Test thoroughly with edge cases: - **Errors**: Force API errors, test all error states - **Empty**: Remove all data, test empty states -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.cursor/skills/critique/reference/heuristics-scoring.md b/.cursor/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .cursor/skills/critique/reference/heuristics-scoring.md rename to .cursor/skills/impeccable/reference/heuristics-scoring.md diff --git a/.cursor/skills/layout/SKILL.md b/.cursor/skills/impeccable/reference/layout.md similarity index 89% rename from .cursor/skills/layout/SKILL.md rename to .cursor/skills/impeccable/reference/layout.md index e3355c314..cd6b778e7 100644 --- a/.cursor/skills/layout/SKILL.md +++ b/.cursor/skills/impeccable/reference/layout.md @@ -1,14 +1,5 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 ---- - Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak about the current spatial design: ## Plan Layout Improvements -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. Create a systematic plan: @@ -120,4 +111,4 @@ Create a systematic plan: - **Consistency**: Is the spacing system applied uniformly? - **Responsiveness**: Does the layout adapt gracefully across screen sizes? -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.kiro/skills/optimize/SKILL.md b/.cursor/skills/impeccable/reference/optimize.md similarity index 96% rename from .kiro/skills/optimize/SKILL.md rename to .cursor/skills/impeccable/reference/optimize.md index 6d82e1265..4abf575ec 100644 --- a/.kiro/skills/optimize/SKILL.md +++ b/.cursor/skills/impeccable/reference/optimize.md @@ -1,9 +1,3 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 ---- - Identify and fix performance issues to create faster, smoother user experiences. ## Assess Performance Issues @@ -261,4 +255,4 @@ Test that optimizations worked: - **No regressions**: Ensure functionality still works - **User perception**: Does it *feel* faster? -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.kiro/skills/overdrive/SKILL.md b/.cursor/skills/impeccable/reference/overdrive.md similarity index 78% rename from .kiro/skills/overdrive/SKILL.md rename to .cursor/skills/impeccable/reference/overdrive.md index 11bd0f4a8..d84a147dc 100644 --- a/.kiro/skills/overdrive/SKILL.md +++ b/.cursor/skills/impeccable/reference/overdrive.md @@ -1,9 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 ---- - Start your response with: ``` @@ -11,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -31,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -89,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -126,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -137,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.cursor/skills/critique/reference/personas.md b/.cursor/skills/impeccable/reference/personas.md similarity index 100% rename from .cursor/skills/critique/reference/personas.md rename to .cursor/skills/impeccable/reference/personas.md diff --git a/.kiro/skills/polish/SKILL.md b/.cursor/skills/impeccable/reference/polish.md similarity index 93% rename from .kiro/skills/polish/SKILL.md rename to .cursor/skills/impeccable/reference/polish.md index 4c84dc128..597c68847 100644 --- a/.kiro/skills/polish/SKILL.md +++ b/.cursor/skills/impeccable/reference/polish.md @@ -1,14 +1,4 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- +> **Additional context needed**: quality bar (MVP vs flagship). Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. @@ -219,4 +209,4 @@ After polishing, ensure code quality: - **Consolidate tokens**: If you introduced new values, check whether they should be tokens. - **Verify DRYness**: Look for duplication introduced during polishing and consolidate. -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.cursor/skills/quieter/SKILL.md b/.cursor/skills/impeccable/reference/quieter.md similarity index 89% rename from .cursor/skills/quieter/SKILL.md rename to .cursor/skills/impeccable/reference/quieter.md index ca17da694..a8ad41809 100644 --- a/.cursor/skills/quieter/SKILL.md +++ b/.cursor/skills/impeccable/reference/quieter.md @@ -1,14 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -98,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.pi/skills/shape/SKILL.md b/.cursor/skills/impeccable/reference/shape.md similarity index 80% rename from .pi/skills/shape/SKILL.md rename to .cursor/skills/impeccable/reference/shape.md index 6a94ee74c..0ae281943 100644 --- a/.pi/skills/shape/SKILL.md +++ b/.cursor/skills/impeccable/reference/shape.md @@ -1,24 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -56,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -91,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.cursor/skills/impeccable/reference/teach.md b/.cursor/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..952cf898a --- /dev/null +++ b/.cursor/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .cursorrules. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.pi/skills/typeset/SKILL.md b/.cursor/skills/impeccable/reference/typeset.md similarity index 87% rename from .pi/skills/typeset/SKILL.md rename to .cursor/skills/impeccable/reference/typeset.md index a5fff11a8..2e49ab6c0 100644 --- a/.pi/skills/typeset/SKILL.md +++ b/.cursor/skills/impeccable/reference/typeset.md @@ -1,14 +1,5 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 ---- - Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -45,7 +36,7 @@ Analyze what's weak or generic about the current type: ## Plan Typography Improvements -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. Create a systematic plan: @@ -111,4 +102,4 @@ Build a clear type scale: - **Performance**: Are web fonts loading efficiently without layout shift? - **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.cursor/skills/impeccable/scripts/cleanup-deprecated.mjs b/.cursor/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.cursor/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.cursor/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.cursor/skills/impeccable/scripts/command-metadata.json b/.cursor/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.cursor/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.cursor/skills/impeccable/scripts/pin.mjs b/.cursor/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.cursor/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.gemini/skills/impeccable/SKILL.md b/.gemini/skills/impeccable/SKILL.md index 51433d569..49b489705 100644 --- a/.gemini/skills/impeccable/SKILL.md +++ b/.gemini/skills/impeccable/SKILL.md @@ -1,13 +1,15 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -20,8 +22,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -31,7 +31,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -267,7 +267,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -281,82 +281,96 @@ Remember: Gemini is capable of extraordinary creative work. Don't hold back. Sho --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .gemini/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to GEMINI.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.gemini/skills/impeccable/reference/adapt.md b/.gemini/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.gemini/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.pi/skills/animate/SKILL.md b/.gemini/skills/impeccable/reference/animate.md similarity index 91% rename from .pi/skills/animate/SKILL.md rename to .gemini/skills/impeccable/reference/animate.md index 02294bc19..0186ce081 100644 --- a/.pi/skills/animate/SKILL.md +++ b/.gemini/skills/impeccable/reference/animate.md @@ -1,14 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -170,4 +163,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. \ No newline at end of file +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. diff --git a/.gemini/skills/audit/SKILL.md b/.gemini/skills/impeccable/reference/audit.md similarity index 80% rename from .gemini/skills/audit/SKILL.md rename to .gemini/skills/impeccable/reference/audit.md index 7fddc7b21..206fafb5c 100644 --- a/.gemini/skills/audit/SKILL.md +++ b/.gemini/skills/impeccable/reference/audit.md @@ -1,15 +1,3 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - 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. @@ -64,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -107,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -126,13 +114,13 @@ 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) -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. 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 `/audit` after fixes to see your score improve. +> Re-run `/impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. @@ -143,4 +131,4 @@ 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. \ No newline at end of file +Remember: You're a technical quality auditor. Document systematically, prioritize ruthlessly, cite specific code locations, and provide clear paths to improvement. diff --git a/.kiro/skills/bolder/SKILL.md b/.gemini/skills/impeccable/reference/bolder.md similarity index 88% rename from .kiro/skills/bolder/SKILL.md rename to .gemini/skills/impeccable/reference/bolder.md index e276b4d0b..cb3481663 100644 --- a/.kiro/skills/bolder/SKILL.md +++ b/.gemini/skills/impeccable/reference/bolder.md @@ -1,14 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -34,7 +25,7 @@ If any of these are unclear from the codebase, ask the user directly to clarify **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -52,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -112,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.gemini/skills/impeccable/reference/clarify.md b/.gemini/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.gemini/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.gemini/skills/critique/reference/cognitive-load.md b/.gemini/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .gemini/skills/critique/reference/cognitive-load.md rename to .gemini/skills/impeccable/reference/cognitive-load.md diff --git a/.pi/skills/colorize/SKILL.md b/.gemini/skills/impeccable/reference/colorize.md similarity index 90% rename from .pi/skills/colorize/SKILL.md rename to .gemini/skills/impeccable/reference/colorize.md index 509a71c06..a4ce5072e 100644 --- a/.pi/skills/colorize/SKILL.md +++ b/.gemini/skills/impeccable/reference/colorize.md @@ -1,14 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -138,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.gemini/skills/impeccable/reference/craft.md b/.gemini/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.gemini/skills/impeccable/reference/craft.md +++ b/.gemini/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.gemini/skills/critique/SKILL.md b/.gemini/skills/impeccable/reference/critique.md similarity index 85% rename from .gemini/skills/critique/SKILL.md rename to .gemini/skills/impeccable/reference/critique.md index e7f74e8f1..aa3c4a64a 100644 --- a/.gemini/skills/critique/SKILL.md +++ b/.gemini/skills/impeccable/reference/critique.md @@ -1,16 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -28,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -42,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -92,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -138,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `GEMINI.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -174,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -194,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -207,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.gemini/skills/delight/SKILL.md b/.gemini/skills/impeccable/reference/delight.md similarity index 92% rename from .gemini/skills/delight/SKILL.md rename to .gemini/skills/impeccable/reference/delight.md index f323738dd..8a781e70e 100644 --- a/.gemini/skills/delight/SKILL.md +++ b/.gemini/skills/impeccable/reference/delight.md @@ -1,14 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -299,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.pi/skills/distill/SKILL.md b/.gemini/skills/impeccable/reference/distill.md similarity index 91% rename from .pi/skills/distill/SKILL.md rename to .gemini/skills/impeccable/reference/distill.md index e462d1c27..4f47dc0b4 100644 --- a/.pi/skills/distill/SKILL.md +++ b/.gemini/skills/impeccable/reference/distill.md @@ -1,14 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -117,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.gemini/skills/impeccable/reference/harden.md b/.gemini/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.gemini/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.gemini/skills/critique/reference/heuristics-scoring.md b/.gemini/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .gemini/skills/critique/reference/heuristics-scoring.md rename to .gemini/skills/impeccable/reference/heuristics-scoring.md diff --git a/.gemini/skills/impeccable/reference/layout.md b/.gemini/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.gemini/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.gemini/skills/impeccable/reference/optimize.md b/.gemini/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.gemini/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.gemini/skills/overdrive/SKILL.md b/.gemini/skills/impeccable/reference/overdrive.md similarity index 78% rename from .gemini/skills/overdrive/SKILL.md rename to .gemini/skills/impeccable/reference/overdrive.md index 11bd0f4a8..d84a147dc 100644 --- a/.gemini/skills/overdrive/SKILL.md +++ b/.gemini/skills/impeccable/reference/overdrive.md @@ -1,9 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 ---- - Start your response with: ``` @@ -11,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -31,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -89,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -126,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -137,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.gemini/skills/critique/reference/personas.md b/.gemini/skills/impeccable/reference/personas.md similarity index 100% rename from .gemini/skills/critique/reference/personas.md rename to .gemini/skills/impeccable/reference/personas.md diff --git a/.gemini/skills/impeccable/reference/polish.md b/.gemini/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.gemini/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.pi/skills/quieter/SKILL.md b/.gemini/skills/impeccable/reference/quieter.md similarity index 89% rename from .pi/skills/quieter/SKILL.md rename to .gemini/skills/impeccable/reference/quieter.md index ca17da694..a8ad41809 100644 --- a/.pi/skills/quieter/SKILL.md +++ b/.gemini/skills/impeccable/reference/quieter.md @@ -1,14 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -98,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.gemini/skills/shape/SKILL.md b/.gemini/skills/impeccable/reference/shape.md similarity index 80% rename from .gemini/skills/shape/SKILL.md rename to .gemini/skills/impeccable/reference/shape.md index 6a94ee74c..0ae281943 100644 --- a/.gemini/skills/shape/SKILL.md +++ b/.gemini/skills/impeccable/reference/shape.md @@ -1,24 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -56,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -91,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.gemini/skills/impeccable/reference/teach.md b/.gemini/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..b081ec456 --- /dev/null +++ b/.gemini/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to GEMINI.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.gemini/skills/impeccable/reference/typeset.md b/.gemini/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.gemini/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.gemini/skills/impeccable/scripts/cleanup-deprecated.mjs b/.gemini/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.gemini/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.gemini/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.gemini/skills/impeccable/scripts/command-metadata.json b/.gemini/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.gemini/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.gemini/skills/impeccable/scripts/pin.mjs b/.gemini/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.gemini/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.gitignore b/.gitignore index 11df7dc33..c9ddacd18 100644 --- a/.gitignore +++ b/.gitignore @@ -15,7 +15,11 @@ Thumbs.db # IDE .vscode/ .idea/ + +# Claude Code local state .claude/projects/ +.claude/scheduled_tasks.lock +.claude/settings.local.json # Environment .env @@ -34,7 +38,12 @@ extension/detector/ evals/ # Generated sub-pages (built from source/skills + content/site at build time) -public/skills/ +public/docs/ public/anti-patterns/ public/tutorials/ public/visual-mode/ + +# Note: harness skill directories (.claude/skills/, .cursor/skills/, etc.) +# are intentionally tracked. npx skills reads them from this repo at install +# time, and they enable clean submodule use. Run `bun run build` to refresh +# them after editing source/skills/. diff --git a/.kiro/skills/impeccable/SKILL.md b/.kiro/skills/impeccable/SKILL.md index 5fe89dbc3..80efc2f9a 100644 --- a/.kiro/skills/impeccable/SKILL.md +++ b/.kiro/skills/impeccable/SKILL.md @@ -1,14 +1,16 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -21,8 +23,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -32,7 +32,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -268,7 +268,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -282,82 +282,96 @@ Remember: Claude is capable of extraordinary creative work. Don't hold back. Sho --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .kiro/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .kiro/settings.json. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.kiro/skills/impeccable/reference/adapt.md b/.kiro/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.kiro/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.kiro/skills/impeccable/reference/animate.md b/.kiro/skills/impeccable/reference/animate.md new file mode 100644 index 000000000..0186ce081 --- /dev/null +++ b/.kiro/skills/impeccable/reference/animate.md @@ -0,0 +1,166 @@ +> **Additional context needed**: performance constraints. + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--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 */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- 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 + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **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. diff --git a/.kiro/skills/impeccable/reference/audit.md b/.kiro/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.kiro/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.kiro/skills/impeccable/reference/bolder.md b/.kiro/skills/impeccable/reference/bolder.md new file mode 100644 index 000000000..cb3481663 --- /dev/null +++ b/.kiro/skills/impeccable/reference/bolder.md @@ -0,0 +1,106 @@ +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.kiro/skills/impeccable/reference/clarify.md b/.kiro/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.kiro/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.kiro/skills/critique/reference/cognitive-load.md b/.kiro/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .kiro/skills/critique/reference/cognitive-load.md rename to .kiro/skills/impeccable/reference/cognitive-load.md diff --git a/.kiro/skills/impeccable/reference/colorize.md b/.kiro/skills/impeccable/reference/colorize.md new file mode 100644 index 000000000..a4ce5072e --- /dev/null +++ b/.kiro/skills/impeccable/reference/colorize.md @@ -0,0 +1,134 @@ +> **Additional context needed**: existing brand colors. + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.kiro/skills/impeccable/reference/craft.md b/.kiro/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.kiro/skills/impeccable/reference/craft.md +++ b/.kiro/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.kiro/skills/critique/SKILL.md b/.kiro/skills/impeccable/reference/critique.md similarity index 85% rename from .kiro/skills/critique/SKILL.md rename to .kiro/skills/impeccable/reference/critique.md index 4299a6156..2d9f41a65 100644 --- a/.kiro/skills/critique/SKILL.md +++ b/.kiro/skills/impeccable/reference/critique.md @@ -1,16 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -28,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -42,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -92,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -138,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `.kiro/settings.json` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -174,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -194,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -207,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.kiro/skills/impeccable/reference/delight.md b/.kiro/skills/impeccable/reference/delight.md new file mode 100644 index 000000000..8a781e70e --- /dev/null +++ b/.kiro/skills/impeccable/reference/delight.md @@ -0,0 +1,295 @@ +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + + +--- + +## 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, ask the user directly 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 + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.kiro/skills/impeccable/reference/distill.md b/.kiro/skills/impeccable/reference/distill.md new file mode 100644 index 000000000..4f47dc0b4 --- /dev/null +++ b/.kiro/skills/impeccable/reference/distill.md @@ -0,0 +1,111 @@ +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + + +--- + +## 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, ask the user directly 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 + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.kiro/skills/impeccable/reference/harden.md b/.kiro/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.kiro/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.kiro/skills/critique/reference/heuristics-scoring.md b/.kiro/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .kiro/skills/critique/reference/heuristics-scoring.md rename to .kiro/skills/impeccable/reference/heuristics-scoring.md diff --git a/.kiro/skills/impeccable/reference/layout.md b/.kiro/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.kiro/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.kiro/skills/impeccable/reference/optimize.md b/.kiro/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.kiro/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.kiro/skills/impeccable/reference/overdrive.md b/.kiro/skills/impeccable/reference/overdrive.md new file mode 100644 index 000000000..d84a147dc --- /dev/null +++ b/.kiro/skills/impeccable/reference/overdrive.md @@ -0,0 +1,130 @@ +Start your response with: + +``` +──────────── ⚡ OVERDRIVE ───────────── +》》》 Entering overdrive mode... +``` + +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. + +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. + +### Propose Before Building + +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: + +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). +3. Only proceed with the direction the user confirms. + +Skipping this step risks building something embarrassing that needs to be thrown away. + +### Iterate with Browser Automation + +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. + +--- + +## Assess What "Extraordinary" Means Here + +The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** + +### For visual/marketing surfaces +Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. + +### For functional UI +Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. + +### For performance-critical UI +The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. + +### For data-heavy interfaces +Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. + +**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. + +## The Toolkit + +Organized by what you're trying to achieve, not by technology name. + +### Make transitions feel cinematic +- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. +- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes +- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. + +### Tie animation to scroll position +- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) + +### Render beyond CSS +- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. +- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. +- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. + +### Make data feel alive +- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. +- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. +- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. + +### Animate complex properties +- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. +- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. + +### Push performance boundaries +- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. +- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. +- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. + +### Interact with the device +- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. +- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. + +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. + +## Implement with Discipline + +### Progressive enhancement is non-negotiable + +Every technique must degrade gracefully. The experience without the enhancement must still be good. + +```css +@supports (animation-timeline: scroll()) { + .hero { animation-timeline: scroll(); } +} +``` + +```javascript +if ('gpu' in navigator) { /* WebGPU */ } +else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } +/* CSS-only fallback must still look good */ +``` + +### Performance rules + +- Target 60fps. If dropping below 50, simplify. +- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. +- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. +- Pause off-screen rendering. Kill what you can't see. +- Test on real mid-range devices, not just your development machine. + +### Polish is the difference + +The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. + +**NEVER**: +- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion +- Ship effects that cause jank on mid-range devices +- Use bleeding-edge APIs without a functional fallback +- Add sound without explicit user opt-in +- Use technical ambition to mask weak design fundamentals; fix those first with other commands +- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise + +## Verify the Result + +- **The wow test**: Show it to someone who hasn't seen it. Do they react? +- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? +- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? +- **The accessibility test**: Enable reduced motion. Still beautiful? +- **The context test**: Does this make sense for THIS brand and audience? + +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.kiro/skills/critique/reference/personas.md b/.kiro/skills/impeccable/reference/personas.md similarity index 100% rename from .kiro/skills/critique/reference/personas.md rename to .kiro/skills/impeccable/reference/personas.md diff --git a/.kiro/skills/impeccable/reference/polish.md b/.kiro/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.kiro/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.kiro/skills/impeccable/reference/quieter.md b/.kiro/skills/impeccable/reference/quieter.md new file mode 100644 index 000000000..a8ad41809 --- /dev/null +++ b/.kiro/skills/impeccable/reference/quieter.md @@ -0,0 +1,92 @@ +Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. + + +--- + +## Assess Current State + +Analyze what makes the design feel too intense: + +1. **Identify intensity sources**: + - **Color saturation**: Overly bright or saturated colors + - **Contrast extremes**: Too much high-contrast juxtaposition + - **Visual weight**: Too many bold, heavy elements competing + - **Animation excess**: Too much motion or overly dramatic effects + - **Complexity**: Too many visual elements, patterns, or decorations + - **Scale**: Everything is large and loud with no hierarchy + +2. **Understand the context**: + - What's the purpose? (Marketing vs tool vs reading experience) + - Who's the audience? (Some contexts need energy) + - What's working? (Don't throw away good ideas) + - What's the core message? (Preserve what matters) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. + +## Plan Refinement + +Create a strategy to reduce intensity while maintaining impact: + +- **Color approach**: Desaturate or shift to more sophisticated tones? +- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? +- **Simplification approach**: What can be removed entirely? +- **Sophistication approach**: How can we signal quality through restraint? + +**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. + +## Refine the Design + +Systematically reduce intensity across these dimensions: + +### Color Refinement +- **Reduce saturation**: Shift from fully saturated to 70-85% saturation +- **Soften palette**: Replace bright colors with muted, sophisticated tones +- **Reduce color variety**: Use fewer colors more thoughtfully +- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) +- **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead + +### Visual Weight Reduction +- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate +- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness +- **White space**: Increase breathing room, reduce density +- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely + +### Simplification +- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose +- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes +- **Reduce layering**: Flatten visual hierarchy where possible +- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows + +### Motion Reduction +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing +- **Remove decorative animations**: Keep functional motion, remove flourishes +- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose + +### Composition Refinement +- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling +- **Align to grid**: Bring rogue elements back into systematic alignment +- **Even out spacing**: Replace extreme spacing variations with consistent rhythm + +**NEVER**: +- Make everything the same size/weight (hierarchy still matters) +- Remove all color (quiet ≠ grayscale) +- Eliminate all personality (maintain character through refinement) +- Sacrifice usability for aesthetics (functional elements still need clear affordances) +- Make everything small and light (some anchors needed) + +## Verify Quality + +Ensure refinement maintains quality: + +- **Still functional**: Can users still accomplish tasks easily? +- **Still distinctive**: Does it have character, or is it generic now? +- **Better reading**: Is text easier to read for extended periods? +- **Sophistication**: Does it feel more refined and premium? + +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.cursor/skills/shape/SKILL.md b/.kiro/skills/impeccable/reference/shape.md similarity index 80% rename from .cursor/skills/shape/SKILL.md rename to .kiro/skills/impeccable/reference/shape.md index 6a94ee74c..0ae281943 100644 --- a/.cursor/skills/shape/SKILL.md +++ b/.kiro/skills/impeccable/reference/shape.md @@ -1,24 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -56,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -91,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.kiro/skills/impeccable/reference/teach.md b/.kiro/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..046f6065d --- /dev/null +++ b/.kiro/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to .kiro/settings.json. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.kiro/skills/impeccable/reference/typeset.md b/.kiro/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.kiro/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.kiro/skills/impeccable/scripts/cleanup-deprecated.mjs b/.kiro/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.kiro/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.kiro/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.kiro/skills/impeccable/scripts/command-metadata.json b/.kiro/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.kiro/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.kiro/skills/impeccable/scripts/pin.mjs b/.kiro/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.kiro/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.opencode/skills/adapt/SKILL.md b/.opencode/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.opencode/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.opencode/skills/audit/SKILL.md b/.opencode/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.opencode/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.opencode/skills/clarify/SKILL.md b/.opencode/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.opencode/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.opencode/skills/harden/SKILL.md b/.opencode/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.opencode/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.opencode/skills/impeccable/SKILL.md b/.opencode/skills/impeccable/SKILL.md index da88f1585..219cb7402 100644 --- a/.opencode/skills/impeccable/SKILL.md +++ b/.opencode/skills/impeccable/SKILL.md @@ -1,16 +1,20 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. +allowed-tools: + - Bash(npx impeccable *) --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +27,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +36,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +272,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +286,96 @@ Remember: Claude is capable of extraordinary creative work. Don't hold back. Sho --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -STOP and call the `question` tool to clarify. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .opencode/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then STOP and call the `question` tool to clarify. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.opencode/skills/impeccable/reference/adapt.md b/.opencode/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.opencode/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.opencode/skills/animate/SKILL.md b/.opencode/skills/impeccable/reference/animate.md similarity index 90% rename from .opencode/skills/animate/SKILL.md rename to .opencode/skills/impeccable/reference/animate.md index 4eb931b05..dfe993cea 100644 --- a/.opencode/skills/animate/SKILL.md +++ b/.opencode/skills/impeccable/reference/animate.md @@ -1,16 +1,7 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. --- @@ -172,4 +163,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. \ No newline at end of file +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. diff --git a/.opencode/skills/impeccable/reference/audit.md b/.opencode/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.opencode/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.opencode/skills/bolder/SKILL.md b/.opencode/skills/impeccable/reference/bolder.md similarity index 87% rename from .opencode/skills/bolder/SKILL.md rename to .opencode/skills/impeccable/reference/bolder.md index d0f2d7367..57bdc739d 100644 --- a/.opencode/skills/bolder/SKILL.md +++ b/.opencode/skills/impeccable/reference/bolder.md @@ -1,16 +1,5 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -36,7 +25,7 @@ If any of these are unclear from the codebase, STOP and call the `question` tool **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -54,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) @@ -114,4 +103,4 @@ Ensure amplification maintains usability and coherence: **The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.opencode/skills/impeccable/reference/clarify.md b/.opencode/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.opencode/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.opencode/skills/critique/reference/cognitive-load.md b/.opencode/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .opencode/skills/critique/reference/cognitive-load.md rename to .opencode/skills/impeccable/reference/cognitive-load.md diff --git a/.opencode/skills/colorize/SKILL.md b/.opencode/skills/impeccable/reference/colorize.md similarity index 89% rename from .opencode/skills/colorize/SKILL.md rename to .opencode/skills/impeccable/reference/colorize.md index 86353330e..1a2ae7439 100644 --- a/.opencode/skills/colorize/SKILL.md +++ b/.opencode/skills/impeccable/reference/colorize.md @@ -1,16 +1,7 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. --- @@ -140,4 +131,4 @@ Test that colorization improves the experience: - **Still accessible**: Do all color combinations meet WCAG standards? - **Not overwhelming**: Is color balanced and purposeful? -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.opencode/skills/impeccable/reference/craft.md b/.opencode/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.opencode/skills/impeccable/reference/craft.md +++ b/.opencode/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.opencode/skills/critique/SKILL.md b/.opencode/skills/impeccable/reference/critique.md similarity index 84% rename from .opencode/skills/critique/SKILL.md rename to .opencode/skills/impeccable/reference/critique.md index e83febd6b..ea2c4d7a7 100644 --- a/.opencode/skills/critique/SKILL.md +++ b/.opencode/skills/impeccable/reference/critique.md @@ -1,20 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" -allowed-tools: - - Bash(npx impeccable *) ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -32,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -46,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -96,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -142,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *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. @@ -178,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. STOP and call the `question` tool to clarify. These answers will shape the action plan. @@ -198,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -211,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.opencode/skills/delight/SKILL.md b/.opencode/skills/impeccable/reference/delight.md similarity index 92% rename from .opencode/skills/delight/SKILL.md rename to .opencode/skills/impeccable/reference/delight.md index 1b105a666..ee529ce38 100644 --- a/.opencode/skills/delight/SKILL.md +++ b/.opencode/skills/impeccable/reference/delight.md @@ -1,16 +1,7 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- @@ -301,4 +292,4 @@ Test that delight actually delights: - **Appropriate**: Matches brand and context - **Accessible**: Works with reduced motion, screen readers -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.opencode/skills/distill/SKILL.md b/.opencode/skills/impeccable/reference/distill.md similarity index 90% rename from .opencode/skills/distill/SKILL.md rename to .opencode/skills/impeccable/reference/distill.md index 9342d1298..f4239bfae 100644 --- a/.opencode/skills/distill/SKILL.md +++ b/.opencode/skills/impeccable/reference/distill.md @@ -1,16 +1,5 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -119,4 +108,4 @@ If you removed features or options: - Consider if they need alternative access points - Note any user feedback to monitor -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.opencode/skills/impeccable/reference/harden.md b/.opencode/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.opencode/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.opencode/skills/critique/reference/heuristics-scoring.md b/.opencode/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .opencode/skills/critique/reference/heuristics-scoring.md rename to .opencode/skills/impeccable/reference/heuristics-scoring.md diff --git a/.opencode/skills/impeccable/reference/layout.md b/.opencode/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.opencode/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.opencode/skills/impeccable/reference/optimize.md b/.opencode/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.opencode/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.opencode/skills/overdrive/SKILL.md b/.opencode/skills/impeccable/reference/overdrive.md similarity index 77% rename from .opencode/skills/overdrive/SKILL.md rename to .opencode/skills/impeccable/reference/overdrive.md index 50bd442fe..4059d7e91 100644 --- a/.opencode/skills/overdrive/SKILL.md +++ b/.opencode/skills/impeccable/reference/overdrive.md @@ -1,11 +1,3 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Start your response with: ``` @@ -13,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **STOP and call the `question` tool to clarify.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -33,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -91,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -128,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result @@ -139,4 +127,4 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - **The accessibility test**: Enable reduced motion. Still beautiful? - **The context test**: Does this make sense for THIS brand and audience? -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.opencode/skills/critique/reference/personas.md b/.opencode/skills/impeccable/reference/personas.md similarity index 100% rename from .opencode/skills/critique/reference/personas.md rename to .opencode/skills/impeccable/reference/personas.md diff --git a/.opencode/skills/impeccable/reference/polish.md b/.opencode/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.opencode/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.opencode/skills/quieter/SKILL.md b/.opencode/skills/impeccable/reference/quieter.md similarity index 88% rename from .opencode/skills/quieter/SKILL.md rename to .opencode/skills/impeccable/reference/quieter.md index b6b7b000b..89968b824 100644 --- a/.opencode/skills/quieter/SKILL.md +++ b/.opencode/skills/impeccable/reference/quieter.md @@ -1,16 +1,5 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- @@ -100,4 +89,4 @@ Ensure refinement maintains quality: - **Better reading**: Is text easier to read for extended periods? - **Sophistication**: Does it feel more refined and premium? -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.opencode/skills/shape/SKILL.md b/.opencode/skills/impeccable/reference/shape.md similarity index 79% rename from .opencode/skills/shape/SKILL.md rename to .opencode/skills/impeccable/reference/shape.md index 4a3464660..34453fcc9 100644 --- a/.opencode/skills/shape/SKILL.md +++ b/.opencode/skills/impeccable/reference/shape.md @@ -1,26 +1,12 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -58,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -93,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. STOP and call the `question` tool to clarify. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.opencode/skills/impeccable/reference/teach.md b/.opencode/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..c72139b7d --- /dev/null +++ b/.opencode/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +STOP and call the `question` tool to clarify. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then STOP and call the `question` tool to clarify. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.opencode/skills/impeccable/reference/typeset.md b/.opencode/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.opencode/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.opencode/skills/impeccable/scripts/cleanup-deprecated.mjs b/.opencode/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.opencode/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.opencode/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.opencode/skills/impeccable/scripts/command-metadata.json b/.opencode/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.opencode/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.opencode/skills/impeccable/scripts/pin.mjs b/.opencode/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.opencode/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.opencode/skills/layout/SKILL.md b/.opencode/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.opencode/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.opencode/skills/optimize/SKILL.md b/.opencode/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.opencode/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.opencode/skills/polish/SKILL.md b/.opencode/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.opencode/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.opencode/skills/typeset/SKILL.md b/.opencode/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.opencode/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md index 43e327949..ea2f01ccd 100644 --- a/.pi/skills/impeccable/SKILL.md +++ b/.pi/skills/impeccable/SKILL.md @@ -1,14 +1,18 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. +allowed-tools: + - Bash(npx impeccable *) --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -21,8 +25,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -32,7 +34,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -268,7 +270,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -282,82 +284,96 @@ Remember: the model is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .pi/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.pi/skills/impeccable/reference/adapt.md b/.pi/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.pi/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.pi/skills/impeccable/reference/animate.md b/.pi/skills/impeccable/reference/animate.md new file mode 100644 index 000000000..0186ce081 --- /dev/null +++ b/.pi/skills/impeccable/reference/animate.md @@ -0,0 +1,166 @@ +> **Additional context needed**: performance constraints. + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--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 */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- 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 + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **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. diff --git a/.pi/skills/impeccable/reference/audit.md b/.pi/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.pi/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.pi/skills/impeccable/reference/bolder.md b/.pi/skills/impeccable/reference/bolder.md new file mode 100644 index 000000000..cb3481663 --- /dev/null +++ b/.pi/skills/impeccable/reference/bolder.md @@ -0,0 +1,106 @@ +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.pi/skills/impeccable/reference/clarify.md b/.pi/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.pi/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.pi/skills/critique/reference/cognitive-load.md b/.pi/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .pi/skills/critique/reference/cognitive-load.md rename to .pi/skills/impeccable/reference/cognitive-load.md diff --git a/.pi/skills/impeccable/reference/colorize.md b/.pi/skills/impeccable/reference/colorize.md new file mode 100644 index 000000000..a4ce5072e --- /dev/null +++ b/.pi/skills/impeccable/reference/colorize.md @@ -0,0 +1,134 @@ +> **Additional context needed**: existing brand colors. + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.pi/skills/impeccable/reference/craft.md b/.pi/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.pi/skills/impeccable/reference/craft.md +++ b/.pi/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.pi/skills/critique/SKILL.md b/.pi/skills/impeccable/reference/critique.md similarity index 85% rename from .pi/skills/critique/SKILL.md rename to .pi/skills/impeccable/reference/critique.md index 29e0a1ce4..c282a6c80 100644 --- a/.pi/skills/critique/SKILL.md +++ b/.pi/skills/impeccable/reference/critique.md @@ -1,18 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -allowed-tools: - - Bash(npx impeccable *) ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -30,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -44,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -94,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -140,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *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. @@ -176,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -196,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -209,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.pi/skills/impeccable/reference/delight.md b/.pi/skills/impeccable/reference/delight.md new file mode 100644 index 000000000..8a781e70e --- /dev/null +++ b/.pi/skills/impeccable/reference/delight.md @@ -0,0 +1,295 @@ +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + + +--- + +## 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, ask the user directly 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 + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.pi/skills/impeccable/reference/distill.md b/.pi/skills/impeccable/reference/distill.md new file mode 100644 index 000000000..4f47dc0b4 --- /dev/null +++ b/.pi/skills/impeccable/reference/distill.md @@ -0,0 +1,111 @@ +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + + +--- + +## 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, ask the user directly 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 + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.pi/skills/impeccable/reference/harden.md b/.pi/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.pi/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.pi/skills/critique/reference/heuristics-scoring.md b/.pi/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .pi/skills/critique/reference/heuristics-scoring.md rename to .pi/skills/impeccable/reference/heuristics-scoring.md diff --git a/.pi/skills/impeccable/reference/layout.md b/.pi/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.pi/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.pi/skills/impeccable/reference/optimize.md b/.pi/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.pi/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.pi/skills/impeccable/reference/overdrive.md b/.pi/skills/impeccable/reference/overdrive.md new file mode 100644 index 000000000..d84a147dc --- /dev/null +++ b/.pi/skills/impeccable/reference/overdrive.md @@ -0,0 +1,130 @@ +Start your response with: + +``` +──────────── ⚡ OVERDRIVE ───────────── +》》》 Entering overdrive mode... +``` + +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. + +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. + +### Propose Before Building + +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: + +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). +3. Only proceed with the direction the user confirms. + +Skipping this step risks building something embarrassing that needs to be thrown away. + +### Iterate with Browser Automation + +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. + +--- + +## Assess What "Extraordinary" Means Here + +The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** + +### For visual/marketing surfaces +Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. + +### For functional UI +Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. + +### For performance-critical UI +The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. + +### For data-heavy interfaces +Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. + +**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. + +## The Toolkit + +Organized by what you're trying to achieve, not by technology name. + +### Make transitions feel cinematic +- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. +- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes +- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. + +### Tie animation to scroll position +- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) + +### Render beyond CSS +- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. +- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. +- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. + +### Make data feel alive +- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. +- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. +- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. + +### Animate complex properties +- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. +- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. + +### Push performance boundaries +- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. +- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. +- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. + +### Interact with the device +- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. +- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. + +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. + +## Implement with Discipline + +### Progressive enhancement is non-negotiable + +Every technique must degrade gracefully. The experience without the enhancement must still be good. + +```css +@supports (animation-timeline: scroll()) { + .hero { animation-timeline: scroll(); } +} +``` + +```javascript +if ('gpu' in navigator) { /* WebGPU */ } +else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } +/* CSS-only fallback must still look good */ +``` + +### Performance rules + +- Target 60fps. If dropping below 50, simplify. +- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. +- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. +- Pause off-screen rendering. Kill what you can't see. +- Test on real mid-range devices, not just your development machine. + +### Polish is the difference + +The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. + +**NEVER**: +- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion +- Ship effects that cause jank on mid-range devices +- Use bleeding-edge APIs without a functional fallback +- Add sound without explicit user opt-in +- Use technical ambition to mask weak design fundamentals; fix those first with other commands +- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise + +## Verify the Result + +- **The wow test**: Show it to someone who hasn't seen it. Do they react? +- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? +- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? +- **The accessibility test**: Enable reduced motion. Still beautiful? +- **The context test**: Does this make sense for THIS brand and audience? + +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.pi/skills/critique/reference/personas.md b/.pi/skills/impeccable/reference/personas.md similarity index 100% rename from .pi/skills/critique/reference/personas.md rename to .pi/skills/impeccable/reference/personas.md diff --git a/.pi/skills/impeccable/reference/polish.md b/.pi/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.pi/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.pi/skills/impeccable/reference/quieter.md b/.pi/skills/impeccable/reference/quieter.md new file mode 100644 index 000000000..a8ad41809 --- /dev/null +++ b/.pi/skills/impeccable/reference/quieter.md @@ -0,0 +1,92 @@ +Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. + + +--- + +## Assess Current State + +Analyze what makes the design feel too intense: + +1. **Identify intensity sources**: + - **Color saturation**: Overly bright or saturated colors + - **Contrast extremes**: Too much high-contrast juxtaposition + - **Visual weight**: Too many bold, heavy elements competing + - **Animation excess**: Too much motion or overly dramatic effects + - **Complexity**: Too many visual elements, patterns, or decorations + - **Scale**: Everything is large and loud with no hierarchy + +2. **Understand the context**: + - What's the purpose? (Marketing vs tool vs reading experience) + - Who's the audience? (Some contexts need energy) + - What's working? (Don't throw away good ideas) + - What's the core message? (Preserve what matters) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. + +## Plan Refinement + +Create a strategy to reduce intensity while maintaining impact: + +- **Color approach**: Desaturate or shift to more sophisticated tones? +- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? +- **Simplification approach**: What can be removed entirely? +- **Sophistication approach**: How can we signal quality through restraint? + +**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. + +## Refine the Design + +Systematically reduce intensity across these dimensions: + +### Color Refinement +- **Reduce saturation**: Shift from fully saturated to 70-85% saturation +- **Soften palette**: Replace bright colors with muted, sophisticated tones +- **Reduce color variety**: Use fewer colors more thoughtfully +- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) +- **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead + +### Visual Weight Reduction +- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate +- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness +- **White space**: Increase breathing room, reduce density +- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely + +### Simplification +- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose +- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes +- **Reduce layering**: Flatten visual hierarchy where possible +- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows + +### Motion Reduction +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing +- **Remove decorative animations**: Keep functional motion, remove flourishes +- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose + +### Composition Refinement +- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling +- **Align to grid**: Bring rogue elements back into systematic alignment +- **Even out spacing**: Replace extreme spacing variations with consistent rhythm + +**NEVER**: +- Make everything the same size/weight (hierarchy still matters) +- Remove all color (quiet ≠ grayscale) +- Eliminate all personality (maintain character through refinement) +- Sacrifice usability for aesthetics (functional elements still need clear affordances) +- Make everything small and light (some anchors needed) + +## Verify Quality + +Ensure refinement maintains quality: + +- **Still functional**: Can users still accomplish tasks easily? +- **Still distinctive**: Does it have character, or is it generic now? +- **Better reading**: Is text easier to read for extended periods? +- **Sophistication**: Does it feel more refined and premium? + +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.pi/skills/impeccable/reference/shape.md b/.pi/skills/impeccable/reference/shape.md new file mode 100644 index 000000000..0ae281943 --- /dev/null +++ b/.pi/skills/impeccable/reference/shape.md @@ -0,0 +1,82 @@ +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. + +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. + +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. + +## Philosophy + +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. + +## Phase 1: Discovery Interview + +**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. + +Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. + +### Purpose & Context +- What is this feature for? What problem does it solve? +- Who specifically will use it? (Not "users"; be specific: role, context, frequency) +- What does success look like? How will you know this feature is working? +- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) + +### Content & Data +- What content or data does this feature display or collect? +- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) +- What are the edge cases? (Empty state, error state, first-time use, power user) +- Is any content dynamic? What changes and how often? + +### Design Goals +- What's the single most important thing a user should do or understand here? +- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) +- Are there existing patterns in the product this should be consistent with? +- Are there specific examples (inside or outside the product) that capture what you're going for? + +### Constraints +- Are there technical constraints? (Framework, performance budget, browser support) +- Are there content constraints? (Localization, dynamic text length, user-generated content) +- Mobile/responsive requirements? +- Accessibility requirements beyond WCAG AA? + +### Anti-Goals +- What should this NOT be? What would be a wrong direction? +- What's the biggest risk of getting this wrong? + +## Phase 2: Design Brief + +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. + +### Brief Structure + +**1. Feature Summary** (2-3 sentences) +What this is, who it's for, what it needs to accomplish. + +**2. Primary User Action** +The single most important thing a user should do or understand here. + +**3. Design Direction** +How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. + +**4. Layout Strategy** +High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. + +**5. Key States** +List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. + +**6. Interaction Model** +How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? + +**7. Content Requirements** +What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. + +**8. Recommended References** +Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). + +**9. Open Questions** +Anything unresolved that the implementer should resolve during build. + +--- + +ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. + +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.pi/skills/impeccable/reference/teach.md b/.pi/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..2d9f768f1 --- /dev/null +++ b/.pi/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.pi/skills/impeccable/reference/typeset.md b/.pi/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.pi/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.pi/skills/impeccable/scripts/cleanup-deprecated.mjs b/.pi/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.pi/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.pi/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.pi/skills/impeccable/scripts/command-metadata.json b/.pi/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.pi/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.pi/skills/impeccable/scripts/pin.mjs b/.pi/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.pi/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.rovodev/skills/adapt/SKILL.md b/.rovodev/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.rovodev/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.rovodev/skills/animate/SKILL.md b/.rovodev/skills/animate/SKILL.md deleted file mode 100644 index 89933bfb5..000000000 --- a/.rovodev/skills/animate/SKILL.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. - ---- - -## Assess Animation Opportunities - -Analyze where motion would improve the experience: - -1. **Identify static areas**: - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - - **Lack of delight**: Functional but joyless interactions - - **Missed guidance**: Opportunities to direct attention or explain behavior - -2. **Understand the context**: - - What's the personality? (Playful vs serious, energetic vs calm) - - What's the performance budget? (Mobile-first? Complex page?) - - Who's the audience? (Motion-sensitive users? Power users who want speed?) - - What matters most? (One hero animation vs many micro-interactions?) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. - -## Plan Animation Strategy - -Create a purposeful animation plan: - -- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) -- **Feedback layer**: Which interactions need acknowledgment? -- **Transition layer**: Which state changes need smoothing? -- **Delight layer**: Where can we surprise and delight? - -**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. - -## Implement Animations - -Add motion systematically across these categories: - -### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations -- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer -- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management - -### Micro-interactions -- **Button feedback**: - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - - Click: Quick scale down then up (0.95 → 1), ripple effect - - Loading: Spinner or pulse state -- **Form interactions**: - - Input focus: Border color transition, slight scale or glow - - Validation: Shake on error, check mark on success, smooth color transitions -- **Toggle switches**: Smooth slide + color transition (200-300ms) -- **Checkboxes/radio**: Check mark animation, ripple effect -- **Like/favorite**: Scale + rotation, particle effects, color transition - -### State Transitions -- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) -- **Expand/collapse**: Height transition with overflow handling, icon rotation -- **Loading states**: Skeleton screen fades, spinner animations, progress bars -- **Success/error**: Color transitions, icon animations, gentle scale pulse -- **Enable/disable**: Opacity transitions, cursor changes - -### Navigation & Flow -- **Page transitions**: Crossfade between routes, shared element transitions -- **Tab switching**: Slide indicator, content fade/slide -- **Carousel/slider**: Smooth transforms, snap points, momentum -- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators - -### Feedback & Guidance -- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights -- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning -- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation -- **Focus flow**: Highlight path through form or workflow - -### Delight Moments -- **Empty states**: Subtle floating animations on illustrations -- **Completed actions**: Confetti, check mark flourish, success celebrations -- **Easter eggs**: Hidden interactions for discovery -- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches - -## Technical Implementation - -Use appropriate techniques for each animation: - -### Timing & Easing - -**Durations by purpose:** -- **100-150ms**: Instant feedback (button press, toggle) -- **200-300ms**: State changes (hover, menu open) -- **300-500ms**: Layout changes (accordion, modal) -- **500-800ms**: Entrance animations (page load) - -**Easing curves (use these, not CSS defaults):** -```css -/* Recommended - natural deceleration */ ---ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ ---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 */ -/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ -/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ -``` - -**Exit animations are faster than entrances.** Use ~75% of enter duration. - -### CSS Animations -```css -/* Prefer for simple, declarative animations */ -- transitions for state changes -- @keyframes for complex sequences -- transform + opacity only (GPU-accelerated) -``` - -### JavaScript Animation -```javascript -/* Use for complex, interactive animations */ -- Web Animations API for programmatic control -- Framer Motion for React -- GSAP for complex sequences -``` - -### Performance -- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties -- **will-change**: Add sparingly for known expensive animations -- **Reduce paint**: Minimize repaints, use `contain` where appropriate -- **Monitor FPS**: Ensure 60fps on target devices - -### Accessibility -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**NEVER**: -- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself -- Animate layout properties (width, height, top, left)—use transform instead -- 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 - -Test animations thoroughly: - -- **Smooth at 60fps**: No jank on target devices -- **Feels natural**: Easing curves feel organic, not robotic -- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) -- **Reduced motion works**: Animations disabled or simplified appropriately -- **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. \ No newline at end of file diff --git a/.rovodev/skills/audit/SKILL.md b/.rovodev/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.rovodev/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.rovodev/skills/bolder/SKILL.md b/.rovodev/skills/bolder/SKILL.md deleted file mode 100644 index e80f55ed1..000000000 --- a/.rovodev/skills/bolder/SKILL.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too safe or boring: - -1. **Identify weakness sources**: - - **Generic choices**: System fonts, basic colors, standard layouts - - **Timid scale**: Everything is medium-sized with no drama - - **Low contrast**: Everything has similar visual weight - - **Static**: No motion, no energy, no life - - **Predictable**: Standard patterns with no surprises - - **Flat hierarchy**: Nothing stands out or commands attention - -2. **Understand the context**: - - What's the brand personality? (How far can we push?) - - What's the purpose? (Marketing can be bolder than financial dashboards) - - Who's the audience? (What will resonate?) - - What are the constraints? (Brand guidelines, accessibility, performance) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. - -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." - -## Plan Amplification - -Create a strategy to increase impact while maintaining coherence: - -- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) -- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. -- **Risk budget**: How experimental can we be? Push boundaries within constraints. -- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) - -**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. - -## Amplify the Design - -Systematically increase impact across these dimensions: - -### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) -- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) -- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) - -### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) -- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop -- **Dominant color strategy**: Let one bold color own 60% of the design -- **Sharp accents**: High-contrast accent colors that pop -- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette -- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) - -### Spatial Drama -- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings -- **Break the grid**: Let hero elements escape containers and cross boundaries -- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry -- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) -- **Overlap**: Layer elements intentionally for depth - -### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) -- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) -- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) -- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) -- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand - -### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) - -### Composition Boldness -- **Hero moments**: Create clear focal points with dramatic treatment -- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements -- **Full-bleed elements**: Use full viewport width/height for impact -- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits - -**NEVER**: -- Add effects randomly without purpose (chaos ≠ bold) -- Sacrifice readability for aesthetics (body text must be readable) -- Make everything bold (then nothing is bold - need contrast) -- Ignore accessibility (bold design must still meet WCAG standards) -- Overwhelm with motion (animation fatigue is real) -- Copy trendy aesthetics blindly (bold means distinctive, not derivative) - -## Verify Quality - -Ensure amplification maintains usability and coherence: - -- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. -- **Still functional**: Can users accomplish tasks without distraction? -- **Coherent**: Does everything feel intentional and unified? -- **Memorable**: Will users remember this experience? -- **Performant**: Do all these effects run smoothly? -- **Accessible**: Does it still meet accessibility standards? - -**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." - -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/.rovodev/skills/clarify/SKILL.md b/.rovodev/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.rovodev/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.rovodev/skills/colorize/SKILL.md b/.rovodev/skills/colorize/SKILL.md deleted file mode 100644 index 76075804f..000000000 --- a/.rovodev/skills/colorize/SKILL.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. - ---- - -## Assess Color Opportunity - -Analyze the current state and identify opportunities: - -1. **Understand current state**: - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - - **Context**: What's appropriate for this domain and audience? - - **Brand**: Are there existing brand colors we should use? - -2. **Identify where color adds value**: - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - - **Hierarchy**: Drawing attention to important elements - - **Categorization**: Different sections, types, or states - - **Emotional tone**: Warmth, energy, trust, creativity - - **Wayfinding**: Helping users navigate and understand structure - - **Delight**: Moments of visual interest and personality - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. - -## Plan Color Strategy - -Create a purposeful color introduction plan: - -- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) -- **Dominant color**: Which color owns 60% of colored elements? -- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) -- **Application strategy**: Where does each color appear and why? - -**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. - -## Introduce Color Strategically - -Add color systematically across these dimensions: - -### Semantic Color -- **State indicators**: - - Success: Green tones (emerald, forest, mint) - - Error: Red/pink tones (rose, crimson, coral) - - Warning: Orange/amber tones - - Info: Blue tones (sky, ocean, indigo) - - Neutral: Gray/slate for inactive states - -- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) -- **Progress indicators**: Colored bars, rings, or charts showing completion or health - -### Accent Color Application -- **Primary actions**: Color the most important buttons/CTAs -- **Links**: Add color to clickable text (maintain accessibility) -- **Icons**: Colorize key icons for recognition and personality -- **Headers/titles**: Add color to section headers or key labels -- **Hover states**: Introduce color on interaction - -### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) -- **Colored sections**: Use subtle background colors to separate areas -- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) -- **Cards & surfaces**: Tint cards or surfaces slightly for warmth - -**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. - -### Data Visualization -- **Charts & graphs**: Use color to encode categories or values -- **Heatmaps**: Color intensity shows density or importance -- **Comparison**: Color coding for different datasets or timeframes - -### Borders & Accents -- **Accent borders**: Add colored left/top borders to cards or sections -- **Underlines**: Color underlines for emphasis or active states -- **Dividers**: Subtle colored dividers instead of gray lines -- **Focus rings**: Colored focus indicators matching brand - -### Typography Color -- **Colored headings**: Use brand colors for section headings (maintain contrast) -- **Highlight text**: Color for emphasis or categories -- **Labels & tags**: Small colored labels for metadata or categories - -### Decorative Elements -- **Illustrations**: Add colored illustrations or icons -- **Shapes**: Geometric shapes in brand colors as background elements -- **Gradients**: Colorful gradient overlays or mesh backgrounds -- **Blobs/organic shapes**: Soft colored shapes for visual interest - -## Balance & Refinement - -Ensure color addition improves rather than overwhelms: - -### Maintain Hierarchy -- **Dominant color** (60%): Primary brand color or most used accent -- **Secondary color** (30%): Supporting color for variety -- **Accent color** (10%): High contrast for key moments -- **Neutrals** (remaining): Gray/black/white for structure - -### Accessibility -- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) -- **Don't rely on color alone**: Use icons, labels, or patterns alongside color -- **Test for color blindness**: Verify red/green combinations work for all users - -### Cohesion -- **Consistent palette**: Use colors from defined palette, not arbitrary choices -- **Systematic application**: Same color meanings throughout (green always = success) -- **Temperature consistency**: Warm palette stays warm, cool stays cool - -**NEVER**: -- Use every color in the rainbow (choose 2-4 colors beyond neutrals) -- Apply color randomly without semantic meaning -- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead -- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication -- Use pure black (`#000`) or pure white (`#fff`) for large areas -- Violate WCAG contrast requirements -- Use color as the only indicator (accessibility issue) -- Make everything colorful (defeats the purpose) -- Default to purple-blue gradients (AI slop aesthetic) - -## Verify Color Addition - -Test that colorization improves the experience: - -- **Better hierarchy**: Does color guide attention appropriately? -- **Clearer meaning**: Does color help users understand states/categories? -- **More engaging**: Does the interface feel warmer and more inviting? -- **Still accessible**: Do all color combinations meet WCAG standards? -- **Not overwhelming**: Is color balanced and purposeful? - -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file diff --git a/.rovodev/skills/delight/SKILL.md b/.rovodev/skills/delight/SKILL.md deleted file mode 100644 index fedebff9c..000000000 --- a/.rovodev/skills/delight/SKILL.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). - ---- - -## 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, ask the user directly 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 - -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file diff --git a/.rovodev/skills/distill/SKILL.md b/.rovodev/skills/distill/SKILL.md deleted file mode 100644 index f3f721c99..000000000 --- a/.rovodev/skills/distill/SKILL.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## 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, ask the user directly 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 - -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file diff --git a/.rovodev/skills/harden/SKILL.md b/.rovodev/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.rovodev/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.rovodev/skills/impeccable/SKILL.md b/.rovodev/skills/impeccable/SKILL.md index 6fe09857d..5a380eafa 100644 --- a/.rovodev/skills/impeccable/SKILL.md +++ b/.rovodev/skills/impeccable/SKILL.md @@ -1,16 +1,20 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. +allowed-tools: + - Bash(npx impeccable *) --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +27,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +36,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +272,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +286,96 @@ Remember: Rovo Dev is capable of extraordinary creative work. Don't hold back. S --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .rovodev/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.rovodev/skills/impeccable/reference/adapt.md b/.rovodev/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.rovodev/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.rovodev/skills/impeccable/reference/animate.md b/.rovodev/skills/impeccable/reference/animate.md new file mode 100644 index 000000000..0186ce081 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/animate.md @@ -0,0 +1,166 @@ +> **Additional context needed**: performance constraints. + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--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 */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- 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 + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **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. diff --git a/.rovodev/skills/impeccable/reference/audit.md b/.rovodev/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.rovodev/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.rovodev/skills/impeccable/reference/bolder.md b/.rovodev/skills/impeccable/reference/bolder.md new file mode 100644 index 000000000..cb3481663 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/bolder.md @@ -0,0 +1,106 @@ +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.rovodev/skills/impeccable/reference/clarify.md b/.rovodev/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.rovodev/skills/critique/reference/cognitive-load.md b/.rovodev/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .rovodev/skills/critique/reference/cognitive-load.md rename to .rovodev/skills/impeccable/reference/cognitive-load.md diff --git a/.rovodev/skills/impeccable/reference/colorize.md b/.rovodev/skills/impeccable/reference/colorize.md new file mode 100644 index 000000000..a4ce5072e --- /dev/null +++ b/.rovodev/skills/impeccable/reference/colorize.md @@ -0,0 +1,134 @@ +> **Additional context needed**: existing brand colors. + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.rovodev/skills/impeccable/reference/craft.md b/.rovodev/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.rovodev/skills/impeccable/reference/craft.md +++ b/.rovodev/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.rovodev/skills/critique/SKILL.md b/.rovodev/skills/impeccable/reference/critique.md similarity index 84% rename from .rovodev/skills/critique/SKILL.md rename to .rovodev/skills/impeccable/reference/critique.md index 772383bfa..c282a6c80 100644 --- a/.rovodev/skills/critique/SKILL.md +++ b/.rovodev/skills/impeccable/reference/critique.md @@ -1,20 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" -allowed-tools: - - Bash(npx impeccable *) ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -32,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -46,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -96,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -142,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *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. @@ -178,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -198,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -211,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.rovodev/skills/impeccable/reference/delight.md b/.rovodev/skills/impeccable/reference/delight.md new file mode 100644 index 000000000..8a781e70e --- /dev/null +++ b/.rovodev/skills/impeccable/reference/delight.md @@ -0,0 +1,295 @@ +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + + +--- + +## 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, ask the user directly 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 + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.rovodev/skills/impeccable/reference/distill.md b/.rovodev/skills/impeccable/reference/distill.md new file mode 100644 index 000000000..4f47dc0b4 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/distill.md @@ -0,0 +1,111 @@ +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + + +--- + +## 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, ask the user directly 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 + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.rovodev/skills/impeccable/reference/harden.md b/.rovodev/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.rovodev/skills/critique/reference/heuristics-scoring.md b/.rovodev/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .rovodev/skills/critique/reference/heuristics-scoring.md rename to .rovodev/skills/impeccable/reference/heuristics-scoring.md diff --git a/.rovodev/skills/impeccable/reference/layout.md b/.rovodev/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.rovodev/skills/impeccable/reference/optimize.md b/.rovodev/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.rovodev/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.rovodev/skills/impeccable/reference/overdrive.md b/.rovodev/skills/impeccable/reference/overdrive.md new file mode 100644 index 000000000..d84a147dc --- /dev/null +++ b/.rovodev/skills/impeccable/reference/overdrive.md @@ -0,0 +1,130 @@ +Start your response with: + +``` +──────────── ⚡ OVERDRIVE ───────────── +》》》 Entering overdrive mode... +``` + +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. + +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. + +### Propose Before Building + +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: + +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). +3. Only proceed with the direction the user confirms. + +Skipping this step risks building something embarrassing that needs to be thrown away. + +### Iterate with Browser Automation + +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. + +--- + +## Assess What "Extraordinary" Means Here + +The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** + +### For visual/marketing surfaces +Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. + +### For functional UI +Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. + +### For performance-critical UI +The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. + +### For data-heavy interfaces +Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. + +**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. + +## The Toolkit + +Organized by what you're trying to achieve, not by technology name. + +### Make transitions feel cinematic +- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. +- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes +- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. + +### Tie animation to scroll position +- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) + +### Render beyond CSS +- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. +- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. +- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. + +### Make data feel alive +- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. +- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. +- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. + +### Animate complex properties +- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. +- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. + +### Push performance boundaries +- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. +- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. +- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. + +### Interact with the device +- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. +- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. + +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. + +## Implement with Discipline + +### Progressive enhancement is non-negotiable + +Every technique must degrade gracefully. The experience without the enhancement must still be good. + +```css +@supports (animation-timeline: scroll()) { + .hero { animation-timeline: scroll(); } +} +``` + +```javascript +if ('gpu' in navigator) { /* WebGPU */ } +else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } +/* CSS-only fallback must still look good */ +``` + +### Performance rules + +- Target 60fps. If dropping below 50, simplify. +- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. +- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. +- Pause off-screen rendering. Kill what you can't see. +- Test on real mid-range devices, not just your development machine. + +### Polish is the difference + +The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. + +**NEVER**: +- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion +- Ship effects that cause jank on mid-range devices +- Use bleeding-edge APIs without a functional fallback +- Add sound without explicit user opt-in +- Use technical ambition to mask weak design fundamentals; fix those first with other commands +- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise + +## Verify the Result + +- **The wow test**: Show it to someone who hasn't seen it. Do they react? +- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? +- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? +- **The accessibility test**: Enable reduced motion. Still beautiful? +- **The context test**: Does this make sense for THIS brand and audience? + +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.rovodev/skills/critique/reference/personas.md b/.rovodev/skills/impeccable/reference/personas.md similarity index 100% rename from .rovodev/skills/critique/reference/personas.md rename to .rovodev/skills/impeccable/reference/personas.md diff --git a/.rovodev/skills/impeccable/reference/polish.md b/.rovodev/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.rovodev/skills/impeccable/reference/quieter.md b/.rovodev/skills/impeccable/reference/quieter.md new file mode 100644 index 000000000..a8ad41809 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/quieter.md @@ -0,0 +1,92 @@ +Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. + + +--- + +## Assess Current State + +Analyze what makes the design feel too intense: + +1. **Identify intensity sources**: + - **Color saturation**: Overly bright or saturated colors + - **Contrast extremes**: Too much high-contrast juxtaposition + - **Visual weight**: Too many bold, heavy elements competing + - **Animation excess**: Too much motion or overly dramatic effects + - **Complexity**: Too many visual elements, patterns, or decorations + - **Scale**: Everything is large and loud with no hierarchy + +2. **Understand the context**: + - What's the purpose? (Marketing vs tool vs reading experience) + - Who's the audience? (Some contexts need energy) + - What's working? (Don't throw away good ideas) + - What's the core message? (Preserve what matters) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. + +## Plan Refinement + +Create a strategy to reduce intensity while maintaining impact: + +- **Color approach**: Desaturate or shift to more sophisticated tones? +- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? +- **Simplification approach**: What can be removed entirely? +- **Sophistication approach**: How can we signal quality through restraint? + +**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. + +## Refine the Design + +Systematically reduce intensity across these dimensions: + +### Color Refinement +- **Reduce saturation**: Shift from fully saturated to 70-85% saturation +- **Soften palette**: Replace bright colors with muted, sophisticated tones +- **Reduce color variety**: Use fewer colors more thoughtfully +- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) +- **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead + +### Visual Weight Reduction +- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate +- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness +- **White space**: Increase breathing room, reduce density +- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely + +### Simplification +- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose +- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes +- **Reduce layering**: Flatten visual hierarchy where possible +- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows + +### Motion Reduction +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing +- **Remove decorative animations**: Keep functional motion, remove flourishes +- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose + +### Composition Refinement +- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling +- **Align to grid**: Bring rogue elements back into systematic alignment +- **Even out spacing**: Replace extreme spacing variations with consistent rhythm + +**NEVER**: +- Make everything the same size/weight (hierarchy still matters) +- Remove all color (quiet ≠ grayscale) +- Eliminate all personality (maintain character through refinement) +- Sacrifice usability for aesthetics (functional elements still need clear affordances) +- Make everything small and light (some anchors needed) + +## Verify Quality + +Ensure refinement maintains quality: + +- **Still functional**: Can users still accomplish tasks easily? +- **Still distinctive**: Does it have character, or is it generic now? +- **Better reading**: Is text easier to read for extended periods? +- **Sophistication**: Does it feel more refined and premium? + +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.rovodev/skills/impeccable/reference/shape.md b/.rovodev/skills/impeccable/reference/shape.md new file mode 100644 index 000000000..0ae281943 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/shape.md @@ -0,0 +1,82 @@ +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. + +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. + +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. + +## Philosophy + +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. + +## Phase 1: Discovery Interview + +**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. + +Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. + +### Purpose & Context +- What is this feature for? What problem does it solve? +- Who specifically will use it? (Not "users"; be specific: role, context, frequency) +- What does success look like? How will you know this feature is working? +- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) + +### Content & Data +- What content or data does this feature display or collect? +- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) +- What are the edge cases? (Empty state, error state, first-time use, power user) +- Is any content dynamic? What changes and how often? + +### Design Goals +- What's the single most important thing a user should do or understand here? +- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) +- Are there existing patterns in the product this should be consistent with? +- Are there specific examples (inside or outside the product) that capture what you're going for? + +### Constraints +- Are there technical constraints? (Framework, performance budget, browser support) +- Are there content constraints? (Localization, dynamic text length, user-generated content) +- Mobile/responsive requirements? +- Accessibility requirements beyond WCAG AA? + +### Anti-Goals +- What should this NOT be? What would be a wrong direction? +- What's the biggest risk of getting this wrong? + +## Phase 2: Design Brief + +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. + +### Brief Structure + +**1. Feature Summary** (2-3 sentences) +What this is, who it's for, what it needs to accomplish. + +**2. Primary User Action** +The single most important thing a user should do or understand here. + +**3. Design Direction** +How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. + +**4. Layout Strategy** +High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. + +**5. Key States** +List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. + +**6. Interaction Model** +How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? + +**7. Content Requirements** +What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. + +**8. Recommended References** +Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). + +**9. Open Questions** +Anything unresolved that the implementer should resolve during build. + +--- + +ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. + +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.rovodev/skills/impeccable/reference/teach.md b/.rovodev/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..2d9f768f1 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to AGENTS.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.rovodev/skills/impeccable/reference/typeset.md b/.rovodev/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.rovodev/skills/impeccable/scripts/cleanup-deprecated.mjs b/.rovodev/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.rovodev/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.rovodev/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.rovodev/skills/impeccable/scripts/command-metadata.json b/.rovodev/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.rovodev/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.rovodev/skills/impeccable/scripts/pin.mjs b/.rovodev/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.rovodev/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.rovodev/skills/layout/SKILL.md b/.rovodev/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.rovodev/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.rovodev/skills/optimize/SKILL.md b/.rovodev/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.rovodev/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.rovodev/skills/overdrive/SKILL.md b/.rovodev/skills/overdrive/SKILL.md deleted file mode 100644 index 862a4c9c4..000000000 --- a/.rovodev/skills/overdrive/SKILL.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Start your response with: - -``` -──────────── ⚡ OVERDRIVE ───────────── -》》》 Entering overdrive mode... -``` - -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. - -### Propose Before Building - -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: - -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. -2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). -3. Only proceed with the direction the user confirms. - -Skipping this step risks building something embarrassing that needs to be thrown away. - -### Iterate with Browser Automation - -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. - ---- - -## Assess What "Extraordinary" Means Here - -The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** - -### For visual/marketing surfaces -Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. - -### For functional UI -Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. - -### For performance-critical UI -The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. - -### For data-heavy interfaces -Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. - -**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. - -## The Toolkit - -Organized by what you're trying to achieve, not by technology name. - -### Make transitions feel cinematic -- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. -- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes -- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. - -### Tie animation to scroll position -- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) - -### Render beyond CSS -- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. -- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. -- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. - -### Make data feel alive -- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. -- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. -- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. - -### Animate complex properties -- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. -- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. - -### Push performance boundaries -- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. -- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. -- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. - -### Interact with the device -- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. -- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. - -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. - -## Implement with Discipline - -### Progressive enhancement is non-negotiable - -Every technique must degrade gracefully. The experience without the enhancement must still be good. - -```css -@supports (animation-timeline: scroll()) { - .hero { animation-timeline: scroll(); } -} -``` - -```javascript -if ('gpu' in navigator) { /* WebGPU */ } -else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } -/* CSS-only fallback must still look good */ -``` - -### Performance rules - -- Target 60fps. If dropping below 50, simplify. -- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. -- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. -- Pause off-screen rendering. Kill what you can't see. -- Test on real mid-range devices, not just your development machine. - -### Polish is the difference - -The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. - -**NEVER**: -- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion -- Ship effects that cause jank on mid-range devices -- Use bleeding-edge APIs without a functional fallback -- Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills -- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise - -## Verify the Result - -- **The wow test**: Show it to someone who hasn't seen it. Do they react? -- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? -- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? -- **The accessibility test**: Enable reduced motion. Still beautiful? -- **The context test**: Does this make sense for THIS brand and audience? - -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file diff --git a/.rovodev/skills/polish/SKILL.md b/.rovodev/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.rovodev/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.rovodev/skills/quieter/SKILL.md b/.rovodev/skills/quieter/SKILL.md deleted file mode 100644 index 373ae6869..000000000 --- a/.rovodev/skills/quieter/SKILL.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too intense: - -1. **Identify intensity sources**: - - **Color saturation**: Overly bright or saturated colors - - **Contrast extremes**: Too much high-contrast juxtaposition - - **Visual weight**: Too many bold, heavy elements competing - - **Animation excess**: Too much motion or overly dramatic effects - - **Complexity**: Too many visual elements, patterns, or decorations - - **Scale**: Everything is large and loud with no hierarchy - -2. **Understand the context**: - - What's the purpose? (Marketing vs tool vs reading experience) - - Who's the audience? (Some contexts need energy) - - What's working? (Don't throw away good ideas) - - What's the core message? (Preserve what matters) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. - -## Plan Refinement - -Create a strategy to reduce intensity while maintaining impact: - -- **Color approach**: Desaturate or shift to more sophisticated tones? -- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? -- **Simplification approach**: What can be removed entirely? -- **Sophistication approach**: How can we signal quality through restraint? - -**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. - -## Refine the Design - -Systematically reduce intensity across these dimensions: - -### Color Refinement -- **Reduce saturation**: Shift from fully saturated to 70-85% saturation -- **Soften palette**: Replace bright colors with muted, sophisticated tones -- **Reduce color variety**: Use fewer colors more thoughtfully -- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) -- **Gentler contrasts**: High contrast only where it matters most -- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness -- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead - -### Visual Weight Reduction -- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate -- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness -- **White space**: Increase breathing room, reduce density -- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely - -### Simplification -- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose -- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes -- **Reduce layering**: Flatten visual hierarchy where possible -- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows - -### Motion Reduction -- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing -- **Remove decorative animations**: Keep functional motion, remove flourishes -- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback -- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic -- **Remove animations entirely** if they're not serving a clear purpose - -### Composition Refinement -- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling -- **Align to grid**: Bring rogue elements back into systematic alignment -- **Even out spacing**: Replace extreme spacing variations with consistent rhythm - -**NEVER**: -- Make everything the same size/weight (hierarchy still matters) -- Remove all color (quiet ≠ grayscale) -- Eliminate all personality (maintain character through refinement) -- Sacrifice usability for aesthetics (functional elements still need clear affordances) -- Make everything small and light (some anchors needed) - -## Verify Quality - -Ensure refinement maintains quality: - -- **Still functional**: Can users still accomplish tasks easily? -- **Still distinctive**: Does it have character, or is it generic now? -- **Better reading**: Is text easier to read for extended periods? -- **Sophistication**: Does it feel more refined and premium? - -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file diff --git a/.rovodev/skills/shape/SKILL.md b/.rovodev/skills/shape/SKILL.md deleted file mode 100644 index 7e83008b5..000000000 --- a/.rovodev/skills/shape/SKILL.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. - -## Philosophy - -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. - -## Phase 1: Discovery Interview - -**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. - -Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. - -### Purpose & Context -- What is this feature for? What problem does it solve? -- Who specifically will use it? (Not "users"; be specific: role, context, frequency) -- What does success look like? How will you know this feature is working? -- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) - -### Content & Data -- What content or data does this feature display or collect? -- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) -- What are the edge cases? (Empty state, error state, first-time use, power user) -- Is any content dynamic? What changes and how often? - -### Design Goals -- What's the single most important thing a user should do or understand here? -- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) -- Are there existing patterns in the product this should be consistent with? -- Are there specific examples (inside or outside the product) that capture what you're going for? - -### Constraints -- Are there technical constraints? (Framework, performance budget, browser support) -- Are there content constraints? (Localization, dynamic text length, user-generated content) -- Mobile/responsive requirements? -- Accessibility requirements beyond WCAG AA? - -### Anti-Goals -- What should this NOT be? What would be a wrong direction? -- What's the biggest risk of getting this wrong? - -## Phase 2: Design Brief - -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. - -### Brief Structure - -**1. Feature Summary** (2-3 sentences) -What this is, who it's for, what it needs to accomplish. - -**2. Primary User Action** -The single most important thing a user should do or understand here. - -**3. Design Direction** -How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. - -**4. Layout Strategy** -High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. - -**5. Key States** -List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. - -**6. Interaction Model** -How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? - -**7. Content Requirements** -What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. - -**8. Recommended References** -Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). - -**9. Open Questions** -Anything unresolved that the implementer should resolve during build. - ---- - -ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. - -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file diff --git a/.rovodev/skills/typeset/SKILL.md b/.rovodev/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.rovodev/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.trae-cn/skills/adapt/SKILL.md b/.trae-cn/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.trae-cn/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.trae-cn/skills/animate/SKILL.md b/.trae-cn/skills/animate/SKILL.md deleted file mode 100644 index 89933bfb5..000000000 --- a/.trae-cn/skills/animate/SKILL.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. - ---- - -## Assess Animation Opportunities - -Analyze where motion would improve the experience: - -1. **Identify static areas**: - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - - **Lack of delight**: Functional but joyless interactions - - **Missed guidance**: Opportunities to direct attention or explain behavior - -2. **Understand the context**: - - What's the personality? (Playful vs serious, energetic vs calm) - - What's the performance budget? (Mobile-first? Complex page?) - - Who's the audience? (Motion-sensitive users? Power users who want speed?) - - What matters most? (One hero animation vs many micro-interactions?) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. - -## Plan Animation Strategy - -Create a purposeful animation plan: - -- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) -- **Feedback layer**: Which interactions need acknowledgment? -- **Transition layer**: Which state changes need smoothing? -- **Delight layer**: Where can we surprise and delight? - -**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. - -## Implement Animations - -Add motion systematically across these categories: - -### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations -- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer -- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management - -### Micro-interactions -- **Button feedback**: - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - - Click: Quick scale down then up (0.95 → 1), ripple effect - - Loading: Spinner or pulse state -- **Form interactions**: - - Input focus: Border color transition, slight scale or glow - - Validation: Shake on error, check mark on success, smooth color transitions -- **Toggle switches**: Smooth slide + color transition (200-300ms) -- **Checkboxes/radio**: Check mark animation, ripple effect -- **Like/favorite**: Scale + rotation, particle effects, color transition - -### State Transitions -- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) -- **Expand/collapse**: Height transition with overflow handling, icon rotation -- **Loading states**: Skeleton screen fades, spinner animations, progress bars -- **Success/error**: Color transitions, icon animations, gentle scale pulse -- **Enable/disable**: Opacity transitions, cursor changes - -### Navigation & Flow -- **Page transitions**: Crossfade between routes, shared element transitions -- **Tab switching**: Slide indicator, content fade/slide -- **Carousel/slider**: Smooth transforms, snap points, momentum -- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators - -### Feedback & Guidance -- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights -- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning -- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation -- **Focus flow**: Highlight path through form or workflow - -### Delight Moments -- **Empty states**: Subtle floating animations on illustrations -- **Completed actions**: Confetti, check mark flourish, success celebrations -- **Easter eggs**: Hidden interactions for discovery -- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches - -## Technical Implementation - -Use appropriate techniques for each animation: - -### Timing & Easing - -**Durations by purpose:** -- **100-150ms**: Instant feedback (button press, toggle) -- **200-300ms**: State changes (hover, menu open) -- **300-500ms**: Layout changes (accordion, modal) -- **500-800ms**: Entrance animations (page load) - -**Easing curves (use these, not CSS defaults):** -```css -/* Recommended - natural deceleration */ ---ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ ---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 */ -/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ -/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ -``` - -**Exit animations are faster than entrances.** Use ~75% of enter duration. - -### CSS Animations -```css -/* Prefer for simple, declarative animations */ -- transitions for state changes -- @keyframes for complex sequences -- transform + opacity only (GPU-accelerated) -``` - -### JavaScript Animation -```javascript -/* Use for complex, interactive animations */ -- Web Animations API for programmatic control -- Framer Motion for React -- GSAP for complex sequences -``` - -### Performance -- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties -- **will-change**: Add sparingly for known expensive animations -- **Reduce paint**: Minimize repaints, use `contain` where appropriate -- **Monitor FPS**: Ensure 60fps on target devices - -### Accessibility -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**NEVER**: -- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself -- Animate layout properties (width, height, top, left)—use transform instead -- 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 - -Test animations thoroughly: - -- **Smooth at 60fps**: No jank on target devices -- **Feels natural**: Easing curves feel organic, not robotic -- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) -- **Reduced motion works**: Animations disabled or simplified appropriately -- **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. \ No newline at end of file diff --git a/.trae-cn/skills/audit/SKILL.md b/.trae-cn/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.trae-cn/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.trae-cn/skills/bolder/SKILL.md b/.trae-cn/skills/bolder/SKILL.md deleted file mode 100644 index e80f55ed1..000000000 --- a/.trae-cn/skills/bolder/SKILL.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too safe or boring: - -1. **Identify weakness sources**: - - **Generic choices**: System fonts, basic colors, standard layouts - - **Timid scale**: Everything is medium-sized with no drama - - **Low contrast**: Everything has similar visual weight - - **Static**: No motion, no energy, no life - - **Predictable**: Standard patterns with no surprises - - **Flat hierarchy**: Nothing stands out or commands attention - -2. **Understand the context**: - - What's the brand personality? (How far can we push?) - - What's the purpose? (Marketing can be bolder than financial dashboards) - - Who's the audience? (What will resonate?) - - What are the constraints? (Brand guidelines, accessibility, performance) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. - -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." - -## Plan Amplification - -Create a strategy to increase impact while maintaining coherence: - -- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) -- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. -- **Risk budget**: How experimental can we be? Push boundaries within constraints. -- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) - -**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. - -## Amplify the Design - -Systematically increase impact across these dimensions: - -### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) -- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) -- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) - -### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) -- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop -- **Dominant color strategy**: Let one bold color own 60% of the design -- **Sharp accents**: High-contrast accent colors that pop -- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette -- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) - -### Spatial Drama -- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings -- **Break the grid**: Let hero elements escape containers and cross boundaries -- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry -- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) -- **Overlap**: Layer elements intentionally for depth - -### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) -- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) -- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) -- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) -- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand - -### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) - -### Composition Boldness -- **Hero moments**: Create clear focal points with dramatic treatment -- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements -- **Full-bleed elements**: Use full viewport width/height for impact -- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits - -**NEVER**: -- Add effects randomly without purpose (chaos ≠ bold) -- Sacrifice readability for aesthetics (body text must be readable) -- Make everything bold (then nothing is bold - need contrast) -- Ignore accessibility (bold design must still meet WCAG standards) -- Overwhelm with motion (animation fatigue is real) -- Copy trendy aesthetics blindly (bold means distinctive, not derivative) - -## Verify Quality - -Ensure amplification maintains usability and coherence: - -- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. -- **Still functional**: Can users accomplish tasks without distraction? -- **Coherent**: Does everything feel intentional and unified? -- **Memorable**: Will users remember this experience? -- **Performant**: Do all these effects run smoothly? -- **Accessible**: Does it still meet accessibility standards? - -**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." - -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/.trae-cn/skills/clarify/SKILL.md b/.trae-cn/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.trae-cn/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.trae-cn/skills/colorize/SKILL.md b/.trae-cn/skills/colorize/SKILL.md deleted file mode 100644 index 76075804f..000000000 --- a/.trae-cn/skills/colorize/SKILL.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. - ---- - -## Assess Color Opportunity - -Analyze the current state and identify opportunities: - -1. **Understand current state**: - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - - **Context**: What's appropriate for this domain and audience? - - **Brand**: Are there existing brand colors we should use? - -2. **Identify where color adds value**: - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - - **Hierarchy**: Drawing attention to important elements - - **Categorization**: Different sections, types, or states - - **Emotional tone**: Warmth, energy, trust, creativity - - **Wayfinding**: Helping users navigate and understand structure - - **Delight**: Moments of visual interest and personality - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. - -## Plan Color Strategy - -Create a purposeful color introduction plan: - -- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) -- **Dominant color**: Which color owns 60% of colored elements? -- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) -- **Application strategy**: Where does each color appear and why? - -**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. - -## Introduce Color Strategically - -Add color systematically across these dimensions: - -### Semantic Color -- **State indicators**: - - Success: Green tones (emerald, forest, mint) - - Error: Red/pink tones (rose, crimson, coral) - - Warning: Orange/amber tones - - Info: Blue tones (sky, ocean, indigo) - - Neutral: Gray/slate for inactive states - -- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) -- **Progress indicators**: Colored bars, rings, or charts showing completion or health - -### Accent Color Application -- **Primary actions**: Color the most important buttons/CTAs -- **Links**: Add color to clickable text (maintain accessibility) -- **Icons**: Colorize key icons for recognition and personality -- **Headers/titles**: Add color to section headers or key labels -- **Hover states**: Introduce color on interaction - -### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) -- **Colored sections**: Use subtle background colors to separate areas -- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) -- **Cards & surfaces**: Tint cards or surfaces slightly for warmth - -**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. - -### Data Visualization -- **Charts & graphs**: Use color to encode categories or values -- **Heatmaps**: Color intensity shows density or importance -- **Comparison**: Color coding for different datasets or timeframes - -### Borders & Accents -- **Accent borders**: Add colored left/top borders to cards or sections -- **Underlines**: Color underlines for emphasis or active states -- **Dividers**: Subtle colored dividers instead of gray lines -- **Focus rings**: Colored focus indicators matching brand - -### Typography Color -- **Colored headings**: Use brand colors for section headings (maintain contrast) -- **Highlight text**: Color for emphasis or categories -- **Labels & tags**: Small colored labels for metadata or categories - -### Decorative Elements -- **Illustrations**: Add colored illustrations or icons -- **Shapes**: Geometric shapes in brand colors as background elements -- **Gradients**: Colorful gradient overlays or mesh backgrounds -- **Blobs/organic shapes**: Soft colored shapes for visual interest - -## Balance & Refinement - -Ensure color addition improves rather than overwhelms: - -### Maintain Hierarchy -- **Dominant color** (60%): Primary brand color or most used accent -- **Secondary color** (30%): Supporting color for variety -- **Accent color** (10%): High contrast for key moments -- **Neutrals** (remaining): Gray/black/white for structure - -### Accessibility -- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) -- **Don't rely on color alone**: Use icons, labels, or patterns alongside color -- **Test for color blindness**: Verify red/green combinations work for all users - -### Cohesion -- **Consistent palette**: Use colors from defined palette, not arbitrary choices -- **Systematic application**: Same color meanings throughout (green always = success) -- **Temperature consistency**: Warm palette stays warm, cool stays cool - -**NEVER**: -- Use every color in the rainbow (choose 2-4 colors beyond neutrals) -- Apply color randomly without semantic meaning -- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead -- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication -- Use pure black (`#000`) or pure white (`#fff`) for large areas -- Violate WCAG contrast requirements -- Use color as the only indicator (accessibility issue) -- Make everything colorful (defeats the purpose) -- Default to purple-blue gradients (AI slop aesthetic) - -## Verify Color Addition - -Test that colorization improves the experience: - -- **Better hierarchy**: Does color guide attention appropriately? -- **Clearer meaning**: Does color help users understand states/categories? -- **More engaging**: Does the interface feel warmer and more inviting? -- **Still accessible**: Do all color combinations meet WCAG standards? -- **Not overwhelming**: Is color balanced and purposeful? - -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file diff --git a/.trae-cn/skills/delight/SKILL.md b/.trae-cn/skills/delight/SKILL.md deleted file mode 100644 index fedebff9c..000000000 --- a/.trae-cn/skills/delight/SKILL.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). - ---- - -## 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, ask the user directly 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 - -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file diff --git a/.trae-cn/skills/distill/SKILL.md b/.trae-cn/skills/distill/SKILL.md deleted file mode 100644 index f3f721c99..000000000 --- a/.trae-cn/skills/distill/SKILL.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## 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, ask the user directly 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 - -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file diff --git a/.trae-cn/skills/harden/SKILL.md b/.trae-cn/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.trae-cn/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.trae-cn/skills/impeccable/SKILL.md b/.trae-cn/skills/impeccable/SKILL.md index ad24d7747..5ef54ec67 100644 --- a/.trae-cn/skills/impeccable/SKILL.md +++ b/.trae-cn/skills/impeccable/SKILL.md @@ -1,16 +1,18 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +25,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +34,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +270,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +284,96 @@ Remember: the model is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .trae-cn/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to RULES.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.trae-cn/skills/impeccable/reference/adapt.md b/.trae-cn/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.trae-cn/skills/impeccable/reference/animate.md b/.trae-cn/skills/impeccable/reference/animate.md new file mode 100644 index 000000000..0186ce081 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/animate.md @@ -0,0 +1,166 @@ +> **Additional context needed**: performance constraints. + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--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 */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- 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 + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **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. diff --git a/.trae-cn/skills/impeccable/reference/audit.md b/.trae-cn/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.trae-cn/skills/impeccable/reference/bolder.md b/.trae-cn/skills/impeccable/reference/bolder.md new file mode 100644 index 000000000..cb3481663 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/bolder.md @@ -0,0 +1,106 @@ +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.trae-cn/skills/impeccable/reference/clarify.md b/.trae-cn/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.trae-cn/skills/critique/reference/cognitive-load.md b/.trae-cn/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .trae-cn/skills/critique/reference/cognitive-load.md rename to .trae-cn/skills/impeccable/reference/cognitive-load.md diff --git a/.trae-cn/skills/impeccable/reference/colorize.md b/.trae-cn/skills/impeccable/reference/colorize.md new file mode 100644 index 000000000..a4ce5072e --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/colorize.md @@ -0,0 +1,134 @@ +> **Additional context needed**: existing brand colors. + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.trae-cn/skills/impeccable/reference/craft.md b/.trae-cn/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.trae-cn/skills/impeccable/reference/craft.md +++ b/.trae-cn/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.trae/skills/critique/SKILL.md b/.trae-cn/skills/impeccable/reference/critique.md similarity index 84% rename from .trae/skills/critique/SKILL.md rename to .trae-cn/skills/impeccable/reference/critique.md index e89e7b281..8866153fc 100644 --- a/.trae/skills/critique/SKILL.md +++ b/.trae-cn/skills/impeccable/reference/critique.md @@ -1,18 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -30,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -44,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -94,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -140,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `RULES.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -176,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -196,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -209,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.trae-cn/skills/impeccable/reference/delight.md b/.trae-cn/skills/impeccable/reference/delight.md new file mode 100644 index 000000000..8a781e70e --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/delight.md @@ -0,0 +1,295 @@ +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + + +--- + +## 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, ask the user directly 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 + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.trae-cn/skills/impeccable/reference/distill.md b/.trae-cn/skills/impeccable/reference/distill.md new file mode 100644 index 000000000..4f47dc0b4 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/distill.md @@ -0,0 +1,111 @@ +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + + +--- + +## 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, ask the user directly 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 + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.trae-cn/skills/impeccable/reference/harden.md b/.trae-cn/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.trae-cn/skills/critique/reference/heuristics-scoring.md b/.trae-cn/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .trae-cn/skills/critique/reference/heuristics-scoring.md rename to .trae-cn/skills/impeccable/reference/heuristics-scoring.md diff --git a/.trae-cn/skills/impeccable/reference/layout.md b/.trae-cn/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.trae-cn/skills/impeccable/reference/optimize.md b/.trae-cn/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.trae-cn/skills/impeccable/reference/overdrive.md b/.trae-cn/skills/impeccable/reference/overdrive.md new file mode 100644 index 000000000..d84a147dc --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/overdrive.md @@ -0,0 +1,130 @@ +Start your response with: + +``` +──────────── ⚡ OVERDRIVE ───────────── +》》》 Entering overdrive mode... +``` + +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. + +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. + +### Propose Before Building + +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: + +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). +3. Only proceed with the direction the user confirms. + +Skipping this step risks building something embarrassing that needs to be thrown away. + +### Iterate with Browser Automation + +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. + +--- + +## Assess What "Extraordinary" Means Here + +The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** + +### For visual/marketing surfaces +Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. + +### For functional UI +Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. + +### For performance-critical UI +The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. + +### For data-heavy interfaces +Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. + +**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. + +## The Toolkit + +Organized by what you're trying to achieve, not by technology name. + +### Make transitions feel cinematic +- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. +- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes +- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. + +### Tie animation to scroll position +- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) + +### Render beyond CSS +- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. +- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. +- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. + +### Make data feel alive +- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. +- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. +- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. + +### Animate complex properties +- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. +- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. + +### Push performance boundaries +- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. +- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. +- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. + +### Interact with the device +- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. +- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. + +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. + +## Implement with Discipline + +### Progressive enhancement is non-negotiable + +Every technique must degrade gracefully. The experience without the enhancement must still be good. + +```css +@supports (animation-timeline: scroll()) { + .hero { animation-timeline: scroll(); } +} +``` + +```javascript +if ('gpu' in navigator) { /* WebGPU */ } +else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } +/* CSS-only fallback must still look good */ +``` + +### Performance rules + +- Target 60fps. If dropping below 50, simplify. +- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. +- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. +- Pause off-screen rendering. Kill what you can't see. +- Test on real mid-range devices, not just your development machine. + +### Polish is the difference + +The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. + +**NEVER**: +- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion +- Ship effects that cause jank on mid-range devices +- Use bleeding-edge APIs without a functional fallback +- Add sound without explicit user opt-in +- Use technical ambition to mask weak design fundamentals; fix those first with other commands +- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise + +## Verify the Result + +- **The wow test**: Show it to someone who hasn't seen it. Do they react? +- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? +- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? +- **The accessibility test**: Enable reduced motion. Still beautiful? +- **The context test**: Does this make sense for THIS brand and audience? + +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.trae-cn/skills/critique/reference/personas.md b/.trae-cn/skills/impeccable/reference/personas.md similarity index 100% rename from .trae-cn/skills/critique/reference/personas.md rename to .trae-cn/skills/impeccable/reference/personas.md diff --git a/.trae-cn/skills/impeccable/reference/polish.md b/.trae-cn/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.trae-cn/skills/impeccable/reference/quieter.md b/.trae-cn/skills/impeccable/reference/quieter.md new file mode 100644 index 000000000..a8ad41809 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/quieter.md @@ -0,0 +1,92 @@ +Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. + + +--- + +## Assess Current State + +Analyze what makes the design feel too intense: + +1. **Identify intensity sources**: + - **Color saturation**: Overly bright or saturated colors + - **Contrast extremes**: Too much high-contrast juxtaposition + - **Visual weight**: Too many bold, heavy elements competing + - **Animation excess**: Too much motion or overly dramatic effects + - **Complexity**: Too many visual elements, patterns, or decorations + - **Scale**: Everything is large and loud with no hierarchy + +2. **Understand the context**: + - What's the purpose? (Marketing vs tool vs reading experience) + - Who's the audience? (Some contexts need energy) + - What's working? (Don't throw away good ideas) + - What's the core message? (Preserve what matters) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. + +## Plan Refinement + +Create a strategy to reduce intensity while maintaining impact: + +- **Color approach**: Desaturate or shift to more sophisticated tones? +- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? +- **Simplification approach**: What can be removed entirely? +- **Sophistication approach**: How can we signal quality through restraint? + +**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. + +## Refine the Design + +Systematically reduce intensity across these dimensions: + +### Color Refinement +- **Reduce saturation**: Shift from fully saturated to 70-85% saturation +- **Soften palette**: Replace bright colors with muted, sophisticated tones +- **Reduce color variety**: Use fewer colors more thoughtfully +- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) +- **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead + +### Visual Weight Reduction +- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate +- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness +- **White space**: Increase breathing room, reduce density +- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely + +### Simplification +- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose +- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes +- **Reduce layering**: Flatten visual hierarchy where possible +- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows + +### Motion Reduction +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing +- **Remove decorative animations**: Keep functional motion, remove flourishes +- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose + +### Composition Refinement +- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling +- **Align to grid**: Bring rogue elements back into systematic alignment +- **Even out spacing**: Replace extreme spacing variations with consistent rhythm + +**NEVER**: +- Make everything the same size/weight (hierarchy still matters) +- Remove all color (quiet ≠ grayscale) +- Eliminate all personality (maintain character through refinement) +- Sacrifice usability for aesthetics (functional elements still need clear affordances) +- Make everything small and light (some anchors needed) + +## Verify Quality + +Ensure refinement maintains quality: + +- **Still functional**: Can users still accomplish tasks easily? +- **Still distinctive**: Does it have character, or is it generic now? +- **Better reading**: Is text easier to read for extended periods? +- **Sophistication**: Does it feel more refined and premium? + +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.trae-cn/skills/impeccable/reference/shape.md b/.trae-cn/skills/impeccable/reference/shape.md new file mode 100644 index 000000000..0ae281943 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/shape.md @@ -0,0 +1,82 @@ +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. + +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. + +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. + +## Philosophy + +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. + +## Phase 1: Discovery Interview + +**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. + +Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. + +### Purpose & Context +- What is this feature for? What problem does it solve? +- Who specifically will use it? (Not "users"; be specific: role, context, frequency) +- What does success look like? How will you know this feature is working? +- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) + +### Content & Data +- What content or data does this feature display or collect? +- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) +- What are the edge cases? (Empty state, error state, first-time use, power user) +- Is any content dynamic? What changes and how often? + +### Design Goals +- What's the single most important thing a user should do or understand here? +- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) +- Are there existing patterns in the product this should be consistent with? +- Are there specific examples (inside or outside the product) that capture what you're going for? + +### Constraints +- Are there technical constraints? (Framework, performance budget, browser support) +- Are there content constraints? (Localization, dynamic text length, user-generated content) +- Mobile/responsive requirements? +- Accessibility requirements beyond WCAG AA? + +### Anti-Goals +- What should this NOT be? What would be a wrong direction? +- What's the biggest risk of getting this wrong? + +## Phase 2: Design Brief + +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. + +### Brief Structure + +**1. Feature Summary** (2-3 sentences) +What this is, who it's for, what it needs to accomplish. + +**2. Primary User Action** +The single most important thing a user should do or understand here. + +**3. Design Direction** +How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. + +**4. Layout Strategy** +High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. + +**5. Key States** +List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. + +**6. Interaction Model** +How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? + +**7. Content Requirements** +What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. + +**8. Recommended References** +Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). + +**9. Open Questions** +Anything unresolved that the implementer should resolve during build. + +--- + +ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. + +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.trae-cn/skills/impeccable/reference/teach.md b/.trae-cn/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..972ca25be --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to RULES.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.trae-cn/skills/impeccable/reference/typeset.md b/.trae-cn/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.trae-cn/skills/impeccable/scripts/cleanup-deprecated.mjs b/.trae-cn/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.trae-cn/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.trae-cn/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.trae-cn/skills/impeccable/scripts/command-metadata.json b/.trae-cn/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.trae-cn/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.trae-cn/skills/impeccable/scripts/pin.mjs b/.trae-cn/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.trae-cn/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.trae-cn/skills/layout/SKILL.md b/.trae-cn/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.trae-cn/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.trae-cn/skills/optimize/SKILL.md b/.trae-cn/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.trae-cn/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.trae-cn/skills/overdrive/SKILL.md b/.trae-cn/skills/overdrive/SKILL.md deleted file mode 100644 index 862a4c9c4..000000000 --- a/.trae-cn/skills/overdrive/SKILL.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Start your response with: - -``` -──────────── ⚡ OVERDRIVE ───────────── -》》》 Entering overdrive mode... -``` - -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. - -### Propose Before Building - -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: - -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. -2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). -3. Only proceed with the direction the user confirms. - -Skipping this step risks building something embarrassing that needs to be thrown away. - -### Iterate with Browser Automation - -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. - ---- - -## Assess What "Extraordinary" Means Here - -The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** - -### For visual/marketing surfaces -Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. - -### For functional UI -Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. - -### For performance-critical UI -The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. - -### For data-heavy interfaces -Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. - -**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. - -## The Toolkit - -Organized by what you're trying to achieve, not by technology name. - -### Make transitions feel cinematic -- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. -- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes -- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. - -### Tie animation to scroll position -- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) - -### Render beyond CSS -- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. -- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. -- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. - -### Make data feel alive -- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. -- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. -- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. - -### Animate complex properties -- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. -- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. - -### Push performance boundaries -- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. -- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. -- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. - -### Interact with the device -- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. -- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. - -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. - -## Implement with Discipline - -### Progressive enhancement is non-negotiable - -Every technique must degrade gracefully. The experience without the enhancement must still be good. - -```css -@supports (animation-timeline: scroll()) { - .hero { animation-timeline: scroll(); } -} -``` - -```javascript -if ('gpu' in navigator) { /* WebGPU */ } -else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } -/* CSS-only fallback must still look good */ -``` - -### Performance rules - -- Target 60fps. If dropping below 50, simplify. -- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. -- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. -- Pause off-screen rendering. Kill what you can't see. -- Test on real mid-range devices, not just your development machine. - -### Polish is the difference - -The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. - -**NEVER**: -- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion -- Ship effects that cause jank on mid-range devices -- Use bleeding-edge APIs without a functional fallback -- Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills -- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise - -## Verify the Result - -- **The wow test**: Show it to someone who hasn't seen it. Do they react? -- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? -- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? -- **The accessibility test**: Enable reduced motion. Still beautiful? -- **The context test**: Does this make sense for THIS brand and audience? - -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file diff --git a/.trae-cn/skills/polish/SKILL.md b/.trae-cn/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.trae-cn/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.trae-cn/skills/quieter/SKILL.md b/.trae-cn/skills/quieter/SKILL.md deleted file mode 100644 index 373ae6869..000000000 --- a/.trae-cn/skills/quieter/SKILL.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too intense: - -1. **Identify intensity sources**: - - **Color saturation**: Overly bright or saturated colors - - **Contrast extremes**: Too much high-contrast juxtaposition - - **Visual weight**: Too many bold, heavy elements competing - - **Animation excess**: Too much motion or overly dramatic effects - - **Complexity**: Too many visual elements, patterns, or decorations - - **Scale**: Everything is large and loud with no hierarchy - -2. **Understand the context**: - - What's the purpose? (Marketing vs tool vs reading experience) - - Who's the audience? (Some contexts need energy) - - What's working? (Don't throw away good ideas) - - What's the core message? (Preserve what matters) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. - -## Plan Refinement - -Create a strategy to reduce intensity while maintaining impact: - -- **Color approach**: Desaturate or shift to more sophisticated tones? -- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? -- **Simplification approach**: What can be removed entirely? -- **Sophistication approach**: How can we signal quality through restraint? - -**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. - -## Refine the Design - -Systematically reduce intensity across these dimensions: - -### Color Refinement -- **Reduce saturation**: Shift from fully saturated to 70-85% saturation -- **Soften palette**: Replace bright colors with muted, sophisticated tones -- **Reduce color variety**: Use fewer colors more thoughtfully -- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) -- **Gentler contrasts**: High contrast only where it matters most -- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness -- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead - -### Visual Weight Reduction -- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate -- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness -- **White space**: Increase breathing room, reduce density -- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely - -### Simplification -- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose -- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes -- **Reduce layering**: Flatten visual hierarchy where possible -- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows - -### Motion Reduction -- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing -- **Remove decorative animations**: Keep functional motion, remove flourishes -- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback -- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic -- **Remove animations entirely** if they're not serving a clear purpose - -### Composition Refinement -- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling -- **Align to grid**: Bring rogue elements back into systematic alignment -- **Even out spacing**: Replace extreme spacing variations with consistent rhythm - -**NEVER**: -- Make everything the same size/weight (hierarchy still matters) -- Remove all color (quiet ≠ grayscale) -- Eliminate all personality (maintain character through refinement) -- Sacrifice usability for aesthetics (functional elements still need clear affordances) -- Make everything small and light (some anchors needed) - -## Verify Quality - -Ensure refinement maintains quality: - -- **Still functional**: Can users still accomplish tasks easily? -- **Still distinctive**: Does it have character, or is it generic now? -- **Better reading**: Is text easier to read for extended periods? -- **Sophistication**: Does it feel more refined and premium? - -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file diff --git a/.trae-cn/skills/shape/SKILL.md b/.trae-cn/skills/shape/SKILL.md deleted file mode 100644 index 7e83008b5..000000000 --- a/.trae-cn/skills/shape/SKILL.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. - -## Philosophy - -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. - -## Phase 1: Discovery Interview - -**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. - -Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. - -### Purpose & Context -- What is this feature for? What problem does it solve? -- Who specifically will use it? (Not "users"; be specific: role, context, frequency) -- What does success look like? How will you know this feature is working? -- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) - -### Content & Data -- What content or data does this feature display or collect? -- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) -- What are the edge cases? (Empty state, error state, first-time use, power user) -- Is any content dynamic? What changes and how often? - -### Design Goals -- What's the single most important thing a user should do or understand here? -- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) -- Are there existing patterns in the product this should be consistent with? -- Are there specific examples (inside or outside the product) that capture what you're going for? - -### Constraints -- Are there technical constraints? (Framework, performance budget, browser support) -- Are there content constraints? (Localization, dynamic text length, user-generated content) -- Mobile/responsive requirements? -- Accessibility requirements beyond WCAG AA? - -### Anti-Goals -- What should this NOT be? What would be a wrong direction? -- What's the biggest risk of getting this wrong? - -## Phase 2: Design Brief - -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. - -### Brief Structure - -**1. Feature Summary** (2-3 sentences) -What this is, who it's for, what it needs to accomplish. - -**2. Primary User Action** -The single most important thing a user should do or understand here. - -**3. Design Direction** -How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. - -**4. Layout Strategy** -High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. - -**5. Key States** -List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. - -**6. Interaction Model** -How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? - -**7. Content Requirements** -What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. - -**8. Recommended References** -Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). - -**9. Open Questions** -Anything unresolved that the implementer should resolve during build. - ---- - -ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. - -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file diff --git a/.trae-cn/skills/typeset/SKILL.md b/.trae-cn/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.trae-cn/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/.trae/skills/adapt/SKILL.md b/.trae/skills/adapt/SKILL.md deleted file mode 100644 index 21a424162..000000000 --- a/.trae/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility. -version: 2.1.1 -user-invocable: true -argument-hint: "[target] [context (mobile, tablet, print...)]" ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. \ No newline at end of file diff --git a/.trae/skills/animate/SKILL.md b/.trae/skills/animate/SKILL.md deleted file mode 100644 index 89933bfb5..000000000 --- a/.trae/skills/animate/SKILL.md +++ /dev/null @@ -1,175 +0,0 @@ ---- -name: animate -description: Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: performance constraints. - ---- - -## Assess Animation Opportunities - -Analyze where motion would improve the experience: - -1. **Identify static areas**: - - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) - - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) - - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious - - **Lack of delight**: Functional but joyless interactions - - **Missed guidance**: Opportunities to direct attention or explain behavior - -2. **Understand the context**: - - What's the personality? (Playful vs serious, energetic vs calm) - - What's the performance budget? (Mobile-first? Complex page?) - - Who's the audience? (Motion-sensitive users? Power users who want speed?) - - What matters most? (One hero animation vs many micro-interactions?) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. - -## Plan Animation Strategy - -Create a purposeful animation plan: - -- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) -- **Feedback layer**: Which interactions need acknowledgment? -- **Transition layer**: Which state changes need smoothing? -- **Delight layer**: Where can we surprise and delight? - -**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. - -## Implement Animations - -Add motion systematically across these categories: - -### Entrance Animations -- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations -- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) -- **Content reveals**: Scroll-triggered animations using intersection observer -- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management - -### Micro-interactions -- **Button feedback**: - - Hover: Subtle scale (1.02-1.05), color shift, shadow increase - - Click: Quick scale down then up (0.95 → 1), ripple effect - - Loading: Spinner or pulse state -- **Form interactions**: - - Input focus: Border color transition, slight scale or glow - - Validation: Shake on error, check mark on success, smooth color transitions -- **Toggle switches**: Smooth slide + color transition (200-300ms) -- **Checkboxes/radio**: Check mark animation, ripple effect -- **Like/favorite**: Scale + rotation, particle effects, color transition - -### State Transitions -- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) -- **Expand/collapse**: Height transition with overflow handling, icon rotation -- **Loading states**: Skeleton screen fades, spinner animations, progress bars -- **Success/error**: Color transitions, icon animations, gentle scale pulse -- **Enable/disable**: Opacity transitions, cursor changes - -### Navigation & Flow -- **Page transitions**: Crossfade between routes, shared element transitions -- **Tab switching**: Slide indicator, content fade/slide -- **Carousel/slider**: Smooth transforms, snap points, momentum -- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators - -### Feedback & Guidance -- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights -- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning -- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation -- **Focus flow**: Highlight path through form or workflow - -### Delight Moments -- **Empty states**: Subtle floating animations on illustrations -- **Completed actions**: Confetti, check mark flourish, success celebrations -- **Easter eggs**: Hidden interactions for discovery -- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches - -## Technical Implementation - -Use appropriate techniques for each animation: - -### Timing & Easing - -**Durations by purpose:** -- **100-150ms**: Instant feedback (button press, toggle) -- **200-300ms**: State changes (hover, menu open) -- **300-500ms**: Layout changes (accordion, modal) -- **500-800ms**: Entrance animations (page load) - -**Easing curves (use these, not CSS defaults):** -```css -/* Recommended - natural deceleration */ ---ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ ---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 */ -/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ -/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ -``` - -**Exit animations are faster than entrances.** Use ~75% of enter duration. - -### CSS Animations -```css -/* Prefer for simple, declarative animations */ -- transitions for state changes -- @keyframes for complex sequences -- transform + opacity only (GPU-accelerated) -``` - -### JavaScript Animation -```javascript -/* Use for complex, interactive animations */ -- Web Animations API for programmatic control -- Framer Motion for React -- GSAP for complex sequences -``` - -### Performance -- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties -- **will-change**: Add sparingly for known expensive animations -- **Reduce paint**: Minimize repaints, use `contain` where appropriate -- **Monitor FPS**: Ensure 60fps on target devices - -### Accessibility -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**NEVER**: -- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself -- Animate layout properties (width, height, top, left)—use transform instead -- 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 - -Test animations thoroughly: - -- **Smooth at 60fps**: No jank on target devices -- **Feels natural**: Easing curves feel organic, not robotic -- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) -- **Reduced motion works**: Animations disabled or simplified appropriately -- **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. \ No newline at end of file diff --git a/.trae/skills/audit/SKILL.md b/.trae/skills/audit/SKILL.md deleted file mode 100644 index ea30301c1..000000000 --- a/.trae/skills/audit/SKILL.md +++ /dev/null @@ -1,148 +0,0 @@ ---- -name: audit -description: Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -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. - -## Diagnostic Scan - -Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. - -### 1. Accessibility (A11y) - -**Check for**: -- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) -- **Missing ARIA**: Interactive elements without proper roles, labels, or states -- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps -- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons -- **Alt text**: Missing or poor image descriptions -- **Form issues**: Inputs without labels, poor error messaging, missing required indicators - -**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) - -### 2. Performance - -**Check for**: -- **Layout thrashing**: Reading/writing layout properties in loops -- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity -- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change -- **Bundle size**: Unnecessary imports, unused dependencies -- **Render performance**: Unnecessary re-renders, missing memoization - -**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) - -### 3. Theming - -**Check for**: -- **Hard-coded colors**: Colors not using design tokens -- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme -- **Inconsistent tokens**: Using wrong tokens, mixing token types -- **Theme switching issues**: Values that don't update on theme change - -**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) - -### 4. Responsive Design - -**Check for**: -- **Fixed widths**: Hard-coded widths that break on mobile -- **Touch targets**: Interactive elements < 44x44px -- **Horizontal scroll**: Content overflow on narrow viewports -- **Text scaling**: Layouts that break when text size increases -- **Missing breakpoints**: No mobile/tablet variants - -**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) - -### 5. Anti-Patterns (CRITICAL) - -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). - -**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) - -## Generate Report - -### Audit Health Score - -| # | Dimension | Score | Key Finding | -|---|-----------|-------|-------------| -| 1 | Accessibility | ? | [most critical a11y issue or "--"] | -| 2 | Performance | ? | | -| 3 | Responsive Design | ? | | -| 4 | Theming | ? | | -| 5 | Anti-Patterns | ? | | -| **Total** | | **??/20** | **[Rating band]** | - -**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) - -### Anti-Patterns Verdict -**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. - -### Executive Summary -- Audit Health Score: **??/20** ([rating band]) -- Total issues found (count by severity: P0/P1/P2/P3) -- Top 3-5 critical issues -- Recommended next steps - -### 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 - -For each issue, document: -- **[P?] Issue name** -- **Location**: Component, file, line -- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern -- **Impact**: How it affects users -- **WCAG/Standard**: Which standard it violates (if applicable) -- **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) - -### Patterns & Systemic Issues - -Identify recurring problems that indicate systemic gaps rather than one-off mistakes: -- "Hard-coded colors appear in 15+ components, should use design tokens" -- "Touch targets consistently too small (<44px) throughout mobile experience" - -### Positive Findings - -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) - -**Rules**: Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive. Map findings to the most appropriate command. End with `/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 `/audit` after fixes to see your score improve. - -**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. - -**NEVER**: -- Report issues without explaining impact (why does this matter?) -- Provide generic recommendations (be specific and actionable) -- Skip positive findings (celebrate what works) -- 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. \ No newline at end of file diff --git a/.trae/skills/bolder/SKILL.md b/.trae/skills/bolder/SKILL.md deleted file mode 100644 index e80f55ed1..000000000 --- a/.trae/skills/bolder/SKILL.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -name: bolder -description: Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too safe or boring: - -1. **Identify weakness sources**: - - **Generic choices**: System fonts, basic colors, standard layouts - - **Timid scale**: Everything is medium-sized with no drama - - **Low contrast**: Everything has similar visual weight - - **Static**: No motion, no energy, no life - - **Predictable**: Standard patterns with no surprises - - **Flat hierarchy**: Nothing stands out or commands attention - -2. **Understand the context**: - - What's the brand personality? (How far can we push?) - - What's the purpose? (Marketing can be bolder than financial dashboards) - - Who's the audience? (What will resonate?) - - What are the constraints? (Brand guidelines, accessibility, performance) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. - -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." - -## Plan Amplification - -Create a strategy to increase impact while maintaining coherence: - -- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) -- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. -- **Risk budget**: How experimental can we be? Push boundaries within constraints. -- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) - -**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. - -## Amplify the Design - -Systematically increase impact across these dimensions: - -### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) -- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) -- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 -- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) - -### Color Intensification -- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) -- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop -- **Dominant color strategy**: Let one bold color own 60% of the design -- **Sharp accents**: High-contrast accent colors that pop -- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette -- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) - -### Spatial Drama -- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings -- **Break the grid**: Let hero elements escape containers and cross boundaries -- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry -- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) -- **Overlap**: Layer elements intentionally for depth - -### Visual Effects -- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) -- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) -- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) -- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) -- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand - -### Motion & Animation -- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays -- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences -- **Micro-interactions**: Satisfying hover effects, click feedback, state changes -- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) - -### Composition Boldness -- **Hero moments**: Create clear focal points with dramatic treatment -- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements -- **Full-bleed elements**: Use full viewport width/height for impact -- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits - -**NEVER**: -- Add effects randomly without purpose (chaos ≠ bold) -- Sacrifice readability for aesthetics (body text must be readable) -- Make everything bold (then nothing is bold - need contrast) -- Ignore accessibility (bold design must still meet WCAG standards) -- Overwhelm with motion (animation fatigue is real) -- Copy trendy aesthetics blindly (bold means distinctive, not derivative) - -## Verify Quality - -Ensure amplification maintains usability and coherence: - -- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. -- **Still functional**: Can users accomplish tasks without distraction? -- **Coherent**: Does everything feel intentional and unified? -- **Memorable**: Will users remember this experience? -- **Performant**: Do all these effects run smoothly? -- **Accessible**: Does it still meet accessibility standards? - -**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." - -Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. \ No newline at end of file diff --git a/.trae/skills/clarify/SKILL.md b/.trae/skills/clarify/SKILL.md deleted file mode 100644 index f0013b2cf..000000000 --- a/.trae/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. \ No newline at end of file diff --git a/.trae/skills/colorize/SKILL.md b/.trae/skills/colorize/SKILL.md deleted file mode 100644 index 76075804f..000000000 --- a/.trae/skills/colorize/SKILL.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -name: colorize -description: Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: existing brand colors. - ---- - -## Assess Color Opportunity - -Analyze the current state and identify opportunities: - -1. **Understand current state**: - - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? - - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? - - **Context**: What's appropriate for this domain and audience? - - **Brand**: Are there existing brand colors we should use? - -2. **Identify where color adds value**: - - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) - - **Hierarchy**: Drawing attention to important elements - - **Categorization**: Different sections, types, or states - - **Emotional tone**: Warmth, energy, trust, creativity - - **Wayfinding**: Helping users navigate and understand structure - - **Delight**: Moments of visual interest and personality - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. - -## Plan Color Strategy - -Create a purposeful color introduction plan: - -- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) -- **Dominant color**: Which color owns 60% of colored elements? -- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) -- **Application strategy**: Where does each color appear and why? - -**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. - -## Introduce Color Strategically - -Add color systematically across these dimensions: - -### Semantic Color -- **State indicators**: - - Success: Green tones (emerald, forest, mint) - - Error: Red/pink tones (rose, crimson, coral) - - Warning: Orange/amber tones - - Info: Blue tones (sky, ocean, indigo) - - Neutral: Gray/slate for inactive states - -- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) -- **Progress indicators**: Colored bars, rings, or charts showing completion or health - -### Accent Color Application -- **Primary actions**: Color the most important buttons/CTAs -- **Links**: Add color to clickable text (maintain accessibility) -- **Icons**: Colorize key icons for recognition and personality -- **Headers/titles**: Add color to section headers or key labels -- **Hover states**: Introduce color on interaction - -### Background & Surfaces -- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) -- **Colored sections**: Use subtle background colors to separate areas -- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) -- **Cards & surfaces**: Tint cards or surfaces slightly for warmth - -**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. - -### Data Visualization -- **Charts & graphs**: Use color to encode categories or values -- **Heatmaps**: Color intensity shows density or importance -- **Comparison**: Color coding for different datasets or timeframes - -### Borders & Accents -- **Accent borders**: Add colored left/top borders to cards or sections -- **Underlines**: Color underlines for emphasis or active states -- **Dividers**: Subtle colored dividers instead of gray lines -- **Focus rings**: Colored focus indicators matching brand - -### Typography Color -- **Colored headings**: Use brand colors for section headings (maintain contrast) -- **Highlight text**: Color for emphasis or categories -- **Labels & tags**: Small colored labels for metadata or categories - -### Decorative Elements -- **Illustrations**: Add colored illustrations or icons -- **Shapes**: Geometric shapes in brand colors as background elements -- **Gradients**: Colorful gradient overlays or mesh backgrounds -- **Blobs/organic shapes**: Soft colored shapes for visual interest - -## Balance & Refinement - -Ensure color addition improves rather than overwhelms: - -### Maintain Hierarchy -- **Dominant color** (60%): Primary brand color or most used accent -- **Secondary color** (30%): Supporting color for variety -- **Accent color** (10%): High contrast for key moments -- **Neutrals** (remaining): Gray/black/white for structure - -### Accessibility -- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) -- **Don't rely on color alone**: Use icons, labels, or patterns alongside color -- **Test for color blindness**: Verify red/green combinations work for all users - -### Cohesion -- **Consistent palette**: Use colors from defined palette, not arbitrary choices -- **Systematic application**: Same color meanings throughout (green always = success) -- **Temperature consistency**: Warm palette stays warm, cool stays cool - -**NEVER**: -- Use every color in the rainbow (choose 2-4 colors beyond neutrals) -- Apply color randomly without semantic meaning -- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead -- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication -- Use pure black (`#000`) or pure white (`#fff`) for large areas -- Violate WCAG contrast requirements -- Use color as the only indicator (accessibility issue) -- Make everything colorful (defeats the purpose) -- Default to purple-blue gradients (AI slop aesthetic) - -## Verify Color Addition - -Test that colorization improves the experience: - -- **Better hierarchy**: Does color guide attention appropriately? -- **Clearer meaning**: Does color help users understand states/categories? -- **More engaging**: Does the interface feel warmer and more inviting? -- **Still accessible**: Do all color combinations meet WCAG standards? -- **Not overwhelming**: Is color balanced and purposeful? - -Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. \ No newline at end of file diff --git a/.trae/skills/delight/SKILL.md b/.trae/skills/delight/SKILL.md deleted file mode 100644 index fedebff9c..000000000 --- a/.trae/skills/delight/SKILL.md +++ /dev/null @@ -1,304 +0,0 @@ ---- -name: delight -description: Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). - ---- - -## 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, ask the user directly 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 - -Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. \ No newline at end of file diff --git a/.trae/skills/distill/SKILL.md b/.trae/skills/distill/SKILL.md deleted file mode 100644 index f3f721c99..000000000 --- a/.trae/skills/distill/SKILL.md +++ /dev/null @@ -1,122 +0,0 @@ ---- -name: distill -description: Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## 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, ask the user directly 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 - -Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." \ No newline at end of file diff --git a/.trae/skills/harden/SKILL.md b/.trae/skills/harden/SKILL.md deleted file mode 100644 index 31b996fa8..000000000 --- a/.trae/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

Failed to load data. {error.message}

- - -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. \ No newline at end of file diff --git a/.trae/skills/impeccable/SKILL.md b/.trae/skills/impeccable/SKILL.md index 210b9c92f..005f325c3 100644 --- a/.trae/skills/impeccable/SKILL.md +++ b/.trae/skills/impeccable/SKILL.md @@ -1,16 +1,18 @@ --- name: impeccable -description: Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system. +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." version: 2.1.1 user-invocable: true -argument-hint: "[craft|teach|extract]" +argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -23,8 +25,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -34,7 +34,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -270,7 +270,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -284,82 +284,96 @@ Remember: the model is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `/impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `/impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `/impeccable craft [feature]` - Shape, then build a feature end-to-end +> `/impeccable shape [feature]` - Plan UX/UI before writing code +> `/impeccable teach` - Set up design context for this project (one-time) +> `/impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `/impeccable critique [target]` - UX design review with heuristic scoring +> `/impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `/impeccable polish [target]` - Final quality pass before shipping +> `/impeccable bolder [target]` - Amplify safe/bland designs +> `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `/impeccable distill [target]` - Strip to essence, remove complexity +> `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `/impeccable animate [target]` - Add purposeful animations and motion +> `/impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `/impeccable typeset [target]` - Improve typography hierarchy and fonts +> `/impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `/impeccable delight [target]` - Add personality and memorable touches +> `/impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `/impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `/impeccable adapt [target]` - Adapt for different devices and screen sizes +> `/impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) +> `/impeccable unpin ` - Remove a pinned shortcut +> +> Or use `/impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke /impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `/impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `/audit` instead of `/impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node .trae/skills/impeccable/scripts/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to RULES.md. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `/impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. \ No newline at end of file +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). \ No newline at end of file diff --git a/.trae/skills/impeccable/reference/adapt.md b/.trae/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/.trae/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/.trae/skills/impeccable/reference/animate.md b/.trae/skills/impeccable/reference/animate.md new file mode 100644 index 000000000..0186ce081 --- /dev/null +++ b/.trae/skills/impeccable/reference/animate.md @@ -0,0 +1,166 @@ +> **Additional context needed**: performance constraints. + +Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. + + +--- + +## Assess Animation Opportunities + +Analyze where motion would improve the experience: + +1. **Identify static areas**: + - **Missing feedback**: Actions without visual acknowledgment (button clicks, form submission, etc.) + - **Jarring transitions**: Instant state changes that feel abrupt (show/hide, page loads, route changes) + - **Unclear relationships**: Spatial or hierarchical relationships that aren't obvious + - **Lack of delight**: Functional but joyless interactions + - **Missed guidance**: Opportunities to direct attention or explain behavior + +2. **Understand the context**: + - What's the personality? (Playful vs serious, energetic vs calm) + - What's the performance budget? (Mobile-first? Complex page?) + - Who's the audience? (Motion-sensitive users? Power users who want speed?) + - What matters most? (One hero animation vs many micro-interactions?) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: Respect `prefers-reduced-motion`. Always provide non-animated alternatives for users who need them. + +## Plan Animation Strategy + +Create a purposeful animation plan: + +- **Hero moment**: What's the ONE signature animation? (Page load? Hero section? Key interaction?) +- **Feedback layer**: Which interactions need acknowledgment? +- **Transition layer**: Which state changes need smoothing? +- **Delight layer**: Where can we surprise and delight? + +**IMPORTANT**: One well-orchestrated experience beats scattered animations everywhere. Focus on high-impact moments. + +## Implement Animations + +Add motion systematically across these categories: + +### Entrance Animations +- **Page load choreography**: Stagger element reveals (100-150ms delays), fade + slide combinations +- **Hero section**: Dramatic entrance for primary content (scale, parallax, or creative effects) +- **Content reveals**: Scroll-triggered animations using intersection observer +- **Modal/drawer entry**: Smooth slide + fade, backdrop fade, focus management + +### Micro-interactions +- **Button feedback**: + - Hover: Subtle scale (1.02-1.05), color shift, shadow increase + - Click: Quick scale down then up (0.95 → 1), ripple effect + - Loading: Spinner or pulse state +- **Form interactions**: + - Input focus: Border color transition, slight scale or glow + - Validation: Shake on error, check mark on success, smooth color transitions +- **Toggle switches**: Smooth slide + color transition (200-300ms) +- **Checkboxes/radio**: Check mark animation, ripple effect +- **Like/favorite**: Scale + rotation, particle effects, color transition + +### State Transitions +- **Show/hide**: Fade + slide (not instant), appropriate timing (200-300ms) +- **Expand/collapse**: Height transition with overflow handling, icon rotation +- **Loading states**: Skeleton screen fades, spinner animations, progress bars +- **Success/error**: Color transitions, icon animations, gentle scale pulse +- **Enable/disable**: Opacity transitions, cursor changes + +### Navigation & Flow +- **Page transitions**: Crossfade between routes, shared element transitions +- **Tab switching**: Slide indicator, content fade/slide +- **Carousel/slider**: Smooth transforms, snap points, momentum +- **Scroll effects**: Parallax layers, sticky headers with state changes, scroll progress indicators + +### Feedback & Guidance +- **Hover hints**: Tooltip fade-ins, cursor changes, element highlights +- **Drag & drop**: Lift effect (shadow + scale), drop zone highlights, smooth repositioning +- **Copy/paste**: Brief highlight flash on paste, "copied" confirmation +- **Focus flow**: Highlight path through form or workflow + +### Delight Moments +- **Empty states**: Subtle floating animations on illustrations +- **Completed actions**: Confetti, check mark flourish, success celebrations +- **Easter eggs**: Hidden interactions for discovery +- **Contextual animation**: Weather effects, time-of-day themes, seasonal touches + +## Technical Implementation + +Use appropriate techniques for each animation: + +### Timing & Easing + +**Durations by purpose:** +- **100-150ms**: Instant feedback (button press, toggle) +- **200-300ms**: State changes (hover, menu open) +- **300-500ms**: Layout changes (accordion, modal) +- **500-800ms**: Entrance animations (page load) + +**Easing curves (use these, not CSS defaults):** +```css +/* Recommended - natural deceleration */ +--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* Smooth, refined */ +--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 */ +/* bounce: cubic-bezier(0.34, 1.56, 0.64, 1); */ +/* elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6); */ +``` + +**Exit animations are faster than entrances.** Use ~75% of enter duration. + +### CSS Animations +```css +/* Prefer for simple, declarative animations */ +- transitions for state changes +- @keyframes for complex sequences +- transform + opacity only (GPU-accelerated) +``` + +### JavaScript Animation +```javascript +/* Use for complex, interactive animations */ +- Web Animations API for programmatic control +- Framer Motion for React +- GSAP for complex sequences +``` + +### Performance +- **GPU acceleration**: Use `transform` and `opacity`, avoid layout properties +- **will-change**: Add sparingly for known expensive animations +- **Reduce paint**: Minimize repaints, use `contain` where appropriate +- **Monitor FPS**: Ensure 60fps on target devices + +### Accessibility +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**NEVER**: +- Use bounce or elastic easing curves—they feel dated and draw attention to the animation itself +- Animate layout properties (width, height, top, left)—use transform instead +- 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 + +Test animations thoroughly: + +- **Smooth at 60fps**: No jank on target devices +- **Feels natural**: Easing curves feel organic, not robotic +- **Appropriate timing**: Not too fast (jarring) or too slow (laggy) +- **Reduced motion works**: Animations disabled or simplified appropriately +- **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. diff --git a/.trae/skills/impeccable/reference/audit.md b/.trae/skills/impeccable/reference/audit.md new file mode 100644 index 000000000..206fafb5c --- /dev/null +++ b/.trae/skills/impeccable/reference/audit.md @@ -0,0 +1,134 @@ +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. + +## Diagnostic Scan + +Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the criteria below. + +### 1. Accessibility (A11y) + +**Check for**: +- **Contrast issues**: Text contrast ratios < 4.5:1 (or 7:1 for AAA) +- **Missing ARIA**: Interactive elements without proper roles, labels, or states +- **Keyboard navigation**: Missing focus indicators, illogical tab order, keyboard traps +- **Semantic HTML**: Improper heading hierarchy, missing landmarks, divs instead of buttons +- **Alt text**: Missing or poor image descriptions +- **Form issues**: Inputs without labels, poor error messaging, missing required indicators + +**Score 0-4**: 0=Inaccessible (fails WCAG A), 1=Major gaps (few ARIA labels, no keyboard nav), 2=Partial (some a11y effort, significant gaps), 3=Good (WCAG AA mostly met, minor gaps), 4=Excellent (WCAG AA fully met, approaches AAA) + +### 2. Performance + +**Check for**: +- **Layout thrashing**: Reading/writing layout properties in loops +- **Expensive animations**: Animating layout properties (width, height, top, left) instead of transform/opacity +- **Missing optimization**: Images without lazy loading, unoptimized assets, missing will-change +- **Bundle size**: Unnecessary imports, unused dependencies +- **Render performance**: Unnecessary re-renders, missing memoization + +**Score 0-4**: 0=Severe issues (layout thrash, unoptimized everything), 1=Major problems (no lazy loading, expensive animations), 2=Partial (some optimization, gaps remain), 3=Good (mostly optimized, minor improvements possible), 4=Excellent (fast, lean, well-optimized) + +### 3. Theming + +**Check for**: +- **Hard-coded colors**: Colors not using design tokens +- **Broken dark mode**: Missing dark mode variants, poor contrast in dark theme +- **Inconsistent tokens**: Using wrong tokens, mixing token types +- **Theme switching issues**: Values that don't update on theme change + +**Score 0-4**: 0=No theming (hard-coded everything), 1=Minimal tokens (mostly hard-coded), 2=Partial (tokens exist but inconsistently used), 3=Good (tokens used, minor hard-coded values), 4=Excellent (full token system, dark mode works perfectly) + +### 4. Responsive Design + +**Check for**: +- **Fixed widths**: Hard-coded widths that break on mobile +- **Touch targets**: Interactive elements < 44x44px +- **Horizontal scroll**: Content overflow on narrow viewports +- **Text scaling**: Layouts that break when text size increases +- **Missing breakpoints**: No mobile/tablet variants + +**Score 0-4**: 0=Desktop-only (breaks on mobile), 1=Major issues (some breakpoints, many failures), 2=Partial (works on mobile, rough edges), 3=Good (responsive, minor touch target or overflow issues), 4=Excellent (fluid, all viewports, proper touch targets) + +### 5. Anti-Patterns (CRITICAL) + +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). + +**Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) + +## Generate Report + +### Audit Health Score + +| # | Dimension | Score | Key Finding | +|---|-----------|-------|-------------| +| 1 | Accessibility | ? | [most critical a11y issue or "--"] | +| 2 | Performance | ? | | +| 3 | Responsive Design | ? | | +| 4 | Theming | ? | | +| 5 | Anti-Patterns | ? | | +| **Total** | | **??/20** | **[Rating band]** | + +**Rating bands**: 18-20 Excellent (minor polish), 14-17 Good (address weak dimensions), 10-13 Acceptable (significant work needed), 6-9 Poor (major overhaul), 0-5 Critical (fundamental issues) + +### Anti-Patterns Verdict +**Start here.** Pass/fail: Does this look AI-generated? List specific tells. Be brutally honest. + +### Executive Summary +- Audit Health Score: **??/20** ([rating band]) +- Total issues found (count by severity: P0/P1/P2/P3) +- Top 3-5 critical issues +- Recommended next steps + +### 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 + +For each issue, document: +- **[P?] Issue name** +- **Location**: Component, file, line +- **Category**: Accessibility / Performance / Theming / Responsive / Anti-Pattern +- **Impact**: How it affects users +- **WCAG/Standard**: Which standard it violates (if applicable) +- **Recommendation**: How to fix it +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) + +### Patterns & Systemic Issues + +Identify recurring problems that indicate systemic gaps rather than one-off mistakes: +- "Hard-coded colors appear in 15+ components, should use design tokens" +- "Touch targets consistently too small (<44px) throughout mobile experience" + +### Positive Findings + +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) + +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. + +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 audit` after fixes to see your score improve. + +**IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. + +**NEVER**: +- Report issues without explaining impact (why does this matter?) +- Provide generic recommendations (be specific and actionable) +- Skip positive findings (celebrate what works) +- 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. diff --git a/.trae/skills/impeccable/reference/bolder.md b/.trae/skills/impeccable/reference/bolder.md new file mode 100644 index 000000000..cb3481663 --- /dev/null +++ b/.trae/skills/impeccable/reference/bolder.md @@ -0,0 +1,106 @@ +Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. + + +--- + +## Assess Current State + +Analyze what makes the design feel too safe or boring: + +1. **Identify weakness sources**: + - **Generic choices**: System fonts, basic colors, standard layouts + - **Timid scale**: Everything is medium-sized with no drama + - **Low contrast**: Everything has similar visual weight + - **Static**: No motion, no energy, no life + - **Predictable**: Standard patterns with no surprises + - **Flat hierarchy**: Nothing stands out or commands attention + +2. **Understand the context**: + - What's the brand personality? (How far can we push?) + - What's the purpose? (Marketing can be bolder than financial dashboards) + - Who's the audience? (What will resonate?) + - What are the constraints? (Brand guidelines, accessibility, performance) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. + +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." + +## Plan Amplification + +Create a strategy to increase impact while maintaining coherence: + +- **Focal point**: What should be the hero moment? (Pick ONE, make it amazing) +- **Personality direction**: Maximalist chaos? Elegant drama? Playful energy? Dark moody? Choose a lane. +- **Risk budget**: How experimental can we be? Push boundaries within constraints. +- **Hierarchy amplification**: Make big things BIGGER, small things smaller (increase contrast) + +**IMPORTANT**: Bold design must still be usable. Impact without function is just decoration. + +## Amplify the Design + +Systematically increase impact across these dimensions: + +### Typography Amplification +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) +- **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) +- **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 +- **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) + +### Color Intensification +- **Increase saturation**: Shift to more vibrant, energetic colors (but not neon) +- **Bold palette**: Introduce unexpected color combinations—avoid the purple-blue gradient AI slop +- **Dominant color strategy**: Let one bold color own 60% of the design +- **Sharp accents**: High-contrast accent colors that pop +- **Tinted neutrals**: Replace pure grays with tinted grays that harmonize with your palette +- **Rich gradients**: Intentional multi-stop gradients (not generic purple-to-blue) + +### Spatial Drama +- **Extreme scale jumps**: Make important elements 3-5x larger than surroundings +- **Break the grid**: Let hero elements escape containers and cross boundaries +- **Asymmetric layouts**: Replace centered, balanced layouts with tension-filled asymmetry +- **Generous space**: Use white space dramatically (100-200px gaps, not 20-40px) +- **Overlap**: Layer elements intentionally for depth + +### Visual Effects +- **Dramatic shadows**: Large, soft shadows for elevation (but not generic drop shadows on rounded rectangles) +- **Background treatments**: Mesh patterns, noise textures, geometric patterns, intentional gradients (not purple-to-blue) +- **Texture & depth**: Grain, halftone, duotone, layered elements—NOT glassmorphism (it's overused AI slop) +- **Borders & frames**: Thick borders, decorative frames, custom shapes (not rounded rectangles with colored border on one side) +- **Custom elements**: Illustrative elements, custom icons, decorative details that reinforce brand + +### Motion & Animation +- **Entrance choreography**: Staggered, dramatic page load animations with 50-100ms delays +- **Scroll effects**: Parallax, reveal animations, scroll-triggered sequences +- **Micro-interactions**: Satisfying hover effects, click feedback, state changes +- **Transitions**: Smooth, noticeable transitions using ease-out-quart/quint/expo (not bounce or elastic—they cheapen the effect) + +### Composition Boldness +- **Hero moments**: Create clear focal points with dramatic treatment +- **Diagonal flows**: Escape horizontal/vertical rigidity with diagonal arrangements +- **Full-bleed elements**: Use full viewport width/height for impact +- **Unexpected proportions**: Golden ratio? Throw it out. Try 70/30, 80/20 splits + +**NEVER**: +- Add effects randomly without purpose (chaos ≠ bold) +- Sacrifice readability for aesthetics (body text must be readable) +- Make everything bold (then nothing is bold - need contrast) +- Ignore accessibility (bold design must still meet WCAG standards) +- Overwhelm with motion (animation fatigue is real) +- Copy trendy aesthetics blindly (bold means distinctive, not derivative) + +## Verify Quality + +Ensure amplification maintains usability and coherence: + +- **NOT AI slop**: Does this look like every other AI-generated "bold" design? If yes, start over. +- **Still functional**: Can users accomplish tasks without distraction? +- **Coherent**: Does everything feel intentional and unified? +- **Memorable**: Will users remember this experience? +- **Performant**: Do all these effects run smoothly? +- **Accessible**: Does it still meet accessibility standards? + +**The test**: If you showed this to someone and said "AI made this bolder," would they believe you immediately? If yes, you've failed. Bold means distinctive, not "more AI effects." + +Remember: Bold design is confident design. It takes risks, makes statements, and creates memorable experiences. But bold without strategy is just loud. Be intentional, be dramatic, be unforgettable. diff --git a/.trae/skills/impeccable/reference/clarify.md b/.trae/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/.trae/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/.trae/skills/critique/reference/cognitive-load.md b/.trae/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from .trae/skills/critique/reference/cognitive-load.md rename to .trae/skills/impeccable/reference/cognitive-load.md diff --git a/.trae/skills/impeccable/reference/colorize.md b/.trae/skills/impeccable/reference/colorize.md new file mode 100644 index 000000000..a4ce5072e --- /dev/null +++ b/.trae/skills/impeccable/reference/colorize.md @@ -0,0 +1,134 @@ +> **Additional context needed**: existing brand colors. + +Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. + + +--- + +## Assess Color Opportunity + +Analyze the current state and identify opportunities: + +1. **Understand current state**: + - **Color absence**: Pure grayscale? Limited neutrals? One timid accent? + - **Missed opportunities**: Where could color add meaning, hierarchy, or delight? + - **Context**: What's appropriate for this domain and audience? + - **Brand**: Are there existing brand colors we should use? + +2. **Identify where color adds value**: + - **Semantic meaning**: Success (green), error (red), warning (yellow/orange), info (blue) + - **Hierarchy**: Drawing attention to important elements + - **Categorization**: Different sections, types, or states + - **Emotional tone**: Warmth, energy, trust, creativity + - **Wayfinding**: Helping users navigate and understand structure + - **Delight**: Moments of visual interest and personality + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: More color ≠ better. Strategic color beats rainbow vomit every time. Every color should have a purpose. + +## Plan Color Strategy + +Create a purposeful color introduction plan: + +- **Color palette**: What colors match the brand/context? (Choose 2-4 colors max beyond neutrals) +- **Dominant color**: Which color owns 60% of colored elements? +- **Accent colors**: Which colors provide contrast and highlights? (30% and 10%) +- **Application strategy**: Where does each color appear and why? + +**IMPORTANT**: Color should enhance hierarchy and meaning, not create chaos. Less is more when it matters more. + +## Introduce Color Strategically + +Add color systematically across these dimensions: + +### Semantic Color +- **State indicators**: + - Success: Green tones (emerald, forest, mint) + - Error: Red/pink tones (rose, crimson, coral) + - Warning: Orange/amber tones + - Info: Blue tones (sky, ocean, indigo) + - Neutral: Gray/slate for inactive states + +- **Status badges**: Colored backgrounds or borders for states (active, pending, completed, etc.) +- **Progress indicators**: Colored bars, rings, or charts showing completion or health + +### Accent Color Application +- **Primary actions**: Color the most important buttons/CTAs +- **Links**: Add color to clickable text (maintain accessibility) +- **Icons**: Colorize key icons for recognition and personality +- **Headers/titles**: Add color to section headers or key labels +- **Hover states**: Introduce color on interaction + +### Background & Surfaces +- **Tinted backgrounds**: Replace pure gray (`#f5f5f5`) with warm neutrals (`oklch(97% 0.01 60)`) or cool tints (`oklch(97% 0.01 250)`) +- **Colored sections**: Use subtle background colors to separate areas +- **Gradient backgrounds**: Add depth with subtle, intentional gradients (not generic purple-blue) +- **Cards & surfaces**: Tint cards or surfaces slightly for warmth + +**Use OKLCH for color**: It's perceptually uniform, meaning equal steps in lightness *look* equal. Great for generating harmonious scales. + +### Data Visualization +- **Charts & graphs**: Use color to encode categories or values +- **Heatmaps**: Color intensity shows density or importance +- **Comparison**: Color coding for different datasets or timeframes + +### Borders & Accents +- **Accent borders**: Add colored left/top borders to cards or sections +- **Underlines**: Color underlines for emphasis or active states +- **Dividers**: Subtle colored dividers instead of gray lines +- **Focus rings**: Colored focus indicators matching brand + +### Typography Color +- **Colored headings**: Use brand colors for section headings (maintain contrast) +- **Highlight text**: Color for emphasis or categories +- **Labels & tags**: Small colored labels for metadata or categories + +### Decorative Elements +- **Illustrations**: Add colored illustrations or icons +- **Shapes**: Geometric shapes in brand colors as background elements +- **Gradients**: Colorful gradient overlays or mesh backgrounds +- **Blobs/organic shapes**: Soft colored shapes for visual interest + +## Balance & Refinement + +Ensure color addition improves rather than overwhelms: + +### Maintain Hierarchy +- **Dominant color** (60%): Primary brand color or most used accent +- **Secondary color** (30%): Supporting color for variety +- **Accent color** (10%): High contrast for key moments +- **Neutrals** (remaining): Gray/black/white for structure + +### Accessibility +- **Contrast ratios**: Ensure WCAG compliance (4.5:1 for text, 3:1 for UI components) +- **Don't rely on color alone**: Use icons, labels, or patterns alongside color +- **Test for color blindness**: Verify red/green combinations work for all users + +### Cohesion +- **Consistent palette**: Use colors from defined palette, not arbitrary choices +- **Systematic application**: Same color meanings throughout (green always = success) +- **Temperature consistency**: Warm palette stays warm, cool stays cool + +**NEVER**: +- Use every color in the rainbow (choose 2-4 colors beyond neutrals) +- Apply color randomly without semantic meaning +- Put gray text on colored backgrounds—it looks washed out; use a darker shade of the background color or transparency instead +- Use pure gray for neutrals—add subtle color tint (warm or cool) for sophistication +- Use pure black (`#000`) or pure white (`#fff`) for large areas +- Violate WCAG contrast requirements +- Use color as the only indicator (accessibility issue) +- Make everything colorful (defeats the purpose) +- Default to purple-blue gradients (AI slop aesthetic) + +## Verify Color Addition + +Test that colorization improves the experience: + +- **Better hierarchy**: Does color guide attention appropriately? +- **Clearer meaning**: Does color help users understand states/categories? +- **More engaging**: Does the interface feel warmer and more inviting? +- **Still accessible**: Do all color combinations meet WCAG standards? +- **Not overwhelming**: Is color balanced and purposeful? + +Remember: Color is emotional and powerful. Use it to create warmth, guide attention, communicate meaning, and express personality. But restraint and strategy matter more than saturation and variety. Be colorful, but be intentional. diff --git a/.trae/skills/impeccable/reference/craft.md b/.trae/skills/impeccable/reference/craft.md index 8cddbc9db..b038cf96d 100644 --- a/.trae/skills/impeccable/reference/craft.md +++ b/.trae/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run /shape, passing along whatever feature description the user provided. +Run /impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run /shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run /impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/.trae-cn/skills/critique/SKILL.md b/.trae/skills/impeccable/reference/critique.md similarity index 84% rename from .trae-cn/skills/critique/SKILL.md rename to .trae/skills/impeccable/reference/critique.md index e89e7b281..8866153fc 100644 --- a/.trae-cn/skills/critique/SKILL.md +++ b/.trae/skills/impeccable/reference/critique.md @@ -1,18 +1,6 @@ ---- -name: critique -description: Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component. -version: 2.1.1 -user-invocable: true -argument-hint: "[area (feature, page, component...)]" ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -30,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -44,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -94,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -140,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive) +- **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `RULES.md` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -176,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. ask the user directly to clarify what you cannot infer. These answers will shape the action plan. @@ -196,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -209,17 +197,17 @@ List recommended commands in priority order, based on the user's answers: ... **Rules for recommendations**: -- Only recommend commands from: /animate, /quieter, /shape, /optimize, /adapt, /clarify, /layout, /distill, /delight, /audit, /harden, /polish, /bolder, /typeset, /critique, /colorize, /overdrive +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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 `/polish` as the final step if any fixes were recommended +- 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 `/critique` after fixes to see your score improve. \ No newline at end of file +> Re-run `/impeccable critique` after fixes to see your score improve. diff --git a/.trae/skills/impeccable/reference/delight.md b/.trae/skills/impeccable/reference/delight.md new file mode 100644 index 000000000..8a781e70e --- /dev/null +++ b/.trae/skills/impeccable/reference/delight.md @@ -0,0 +1,295 @@ +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). + +Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. + + +--- + +## 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, ask the user directly 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 + +Remember: Delight is the difference between a tool and an experience. Add personality, surprise users positively, and create moments worth sharing. But always respect usability - delight should enhance, never obstruct. diff --git a/.trae/skills/impeccable/reference/distill.md b/.trae/skills/impeccable/reference/distill.md new file mode 100644 index 000000000..4f47dc0b4 --- /dev/null +++ b/.trae/skills/impeccable/reference/distill.md @@ -0,0 +1,111 @@ +Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. + + +--- + +## 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, ask the user directly 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 + +Remember: You have great taste and judgment. Simplification is an act of confidence - knowing what to keep and courage to remove the rest. As Antoine de Saint-Exupéry said: "Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away." diff --git a/.trae/skills/impeccable/reference/harden.md b/.trae/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/.trae/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

Failed to load data. {error.message}

+ + +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/.trae/skills/critique/reference/heuristics-scoring.md b/.trae/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from .trae/skills/critique/reference/heuristics-scoring.md rename to .trae/skills/impeccable/reference/heuristics-scoring.md diff --git a/.trae/skills/impeccable/reference/layout.md b/.trae/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/.trae/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/.trae/skills/impeccable/reference/optimize.md b/.trae/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/.trae/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/.trae/skills/impeccable/reference/overdrive.md b/.trae/skills/impeccable/reference/overdrive.md new file mode 100644 index 000000000..d84a147dc --- /dev/null +++ b/.trae/skills/impeccable/reference/overdrive.md @@ -0,0 +1,130 @@ +Start your response with: + +``` +──────────── ⚡ OVERDRIVE ───────────── +》》》 Entering overdrive mode... +``` + +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. + +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. + +### Propose Before Building + +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: + +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). +3. Only proceed with the direction the user confirms. + +Skipping this step risks building something embarrassing that needs to be thrown away. + +### Iterate with Browser Automation + +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. + +--- + +## Assess What "Extraordinary" Means Here + +The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** + +### For visual/marketing surfaces +Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. + +### For functional UI +Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. + +### For performance-critical UI +The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. + +### For data-heavy interfaces +Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. + +**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. + +## The Toolkit + +Organized by what you're trying to achieve, not by technology name. + +### Make transitions feel cinematic +- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. +- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes +- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. + +### Tie animation to scroll position +- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) + +### Render beyond CSS +- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. +- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. +- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. +- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. + +### Make data feel alive +- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. +- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. +- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. + +### Animate complex properties +- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. +- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. + +### Push performance boundaries +- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. +- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. +- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. + +### Interact with the device +- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. +- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. + +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. + +## Implement with Discipline + +### Progressive enhancement is non-negotiable + +Every technique must degrade gracefully. The experience without the enhancement must still be good. + +```css +@supports (animation-timeline: scroll()) { + .hero { animation-timeline: scroll(); } +} +``` + +```javascript +if ('gpu' in navigator) { /* WebGPU */ } +else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } +/* CSS-only fallback must still look good */ +``` + +### Performance rules + +- Target 60fps. If dropping below 50, simplify. +- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. +- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. +- Pause off-screen rendering. Kill what you can't see. +- Test on real mid-range devices, not just your development machine. + +### Polish is the difference + +The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. + +**NEVER**: +- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion +- Ship effects that cause jank on mid-range devices +- Use bleeding-edge APIs without a functional fallback +- Add sound without explicit user opt-in +- Use technical ambition to mask weak design fundamentals; fix those first with other commands +- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise + +## Verify the Result + +- **The wow test**: Show it to someone who hasn't seen it. Do they react? +- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? +- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? +- **The accessibility test**: Enable reduced motion. Still beautiful? +- **The context test**: Does this make sense for THIS brand and audience? + +Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. diff --git a/.trae/skills/critique/reference/personas.md b/.trae/skills/impeccable/reference/personas.md similarity index 100% rename from .trae/skills/critique/reference/personas.md rename to .trae/skills/impeccable/reference/personas.md diff --git a/.trae/skills/impeccable/reference/polish.md b/.trae/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/.trae/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/.trae/skills/impeccable/reference/quieter.md b/.trae/skills/impeccable/reference/quieter.md new file mode 100644 index 000000000..a8ad41809 --- /dev/null +++ b/.trae/skills/impeccable/reference/quieter.md @@ -0,0 +1,92 @@ +Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. + + +--- + +## Assess Current State + +Analyze what makes the design feel too intense: + +1. **Identify intensity sources**: + - **Color saturation**: Overly bright or saturated colors + - **Contrast extremes**: Too much high-contrast juxtaposition + - **Visual weight**: Too many bold, heavy elements competing + - **Animation excess**: Too much motion or overly dramatic effects + - **Complexity**: Too many visual elements, patterns, or decorations + - **Scale**: Everything is large and loud with no hierarchy + +2. **Understand the context**: + - What's the purpose? (Marketing vs tool vs reading experience) + - Who's the audience? (Some contexts need energy) + - What's working? (Don't throw away good ideas) + - What's the core message? (Preserve what matters) + +If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. + +**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. + +## Plan Refinement + +Create a strategy to reduce intensity while maintaining impact: + +- **Color approach**: Desaturate or shift to more sophisticated tones? +- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? +- **Simplification approach**: What can be removed entirely? +- **Sophistication approach**: How can we signal quality through restraint? + +**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. + +## Refine the Design + +Systematically reduce intensity across these dimensions: + +### Color Refinement +- **Reduce saturation**: Shift from fully saturated to 70-85% saturation +- **Soften palette**: Replace bright colors with muted, sophisticated tones +- **Reduce color variety**: Use fewer colors more thoughtfully +- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) +- **Gentler contrasts**: High contrast only where it matters most +- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness +- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead + +### Visual Weight Reduction +- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate +- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness +- **White space**: Increase breathing room, reduce density +- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely + +### Simplification +- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose +- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes +- **Reduce layering**: Flatten visual hierarchy where possible +- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows + +### Motion Reduction +- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing +- **Remove decorative animations**: Keep functional motion, remove flourishes +- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback +- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic +- **Remove animations entirely** if they're not serving a clear purpose + +### Composition Refinement +- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling +- **Align to grid**: Bring rogue elements back into systematic alignment +- **Even out spacing**: Replace extreme spacing variations with consistent rhythm + +**NEVER**: +- Make everything the same size/weight (hierarchy still matters) +- Remove all color (quiet ≠ grayscale) +- Eliminate all personality (maintain character through refinement) +- Sacrifice usability for aesthetics (functional elements still need clear affordances) +- Make everything small and light (some anchors needed) + +## Verify Quality + +Ensure refinement maintains quality: + +- **Still functional**: Can users still accomplish tasks easily? +- **Still distinctive**: Does it have character, or is it generic now? +- **Better reading**: Is text easier to read for extended periods? +- **Sophistication**: Does it feel more refined and premium? + +Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. diff --git a/.trae/skills/impeccable/reference/shape.md b/.trae/skills/impeccable/reference/shape.md new file mode 100644 index 000000000..0ae281943 --- /dev/null +++ b/.trae/skills/impeccable/reference/shape.md @@ -0,0 +1,82 @@ +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. + +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. + +**Output**: A design brief that can be handed off to /impeccable craft, or directly to /impeccable for freeform implementation. + +## Philosophy + +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. + +## Phase 1: Discovery Interview + +**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. + +Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. + +### Purpose & Context +- What is this feature for? What problem does it solve? +- Who specifically will use it? (Not "users"; be specific: role, context, frequency) +- What does success look like? How will you know this feature is working? +- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) + +### Content & Data +- What content or data does this feature display or collect? +- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) +- What are the edge cases? (Empty state, error state, first-time use, power user) +- Is any content dynamic? What changes and how often? + +### Design Goals +- What's the single most important thing a user should do or understand here? +- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) +- Are there existing patterns in the product this should be consistent with? +- Are there specific examples (inside or outside the product) that capture what you're going for? + +### Constraints +- Are there technical constraints? (Framework, performance budget, browser support) +- Are there content constraints? (Localization, dynamic text length, user-generated content) +- Mobile/responsive requirements? +- Accessibility requirements beyond WCAG AA? + +### Anti-Goals +- What should this NOT be? What would be a wrong direction? +- What's the biggest risk of getting this wrong? + +## Phase 2: Design Brief + +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. + +### Brief Structure + +**1. Feature Summary** (2-3 sentences) +What this is, who it's for, what it needs to accomplish. + +**2. Primary User Action** +The single most important thing a user should do or understand here. + +**3. Design Direction** +How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. + +**4. Layout Strategy** +High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. + +**5. Key States** +List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. + +**6. Interaction Model** +How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? + +**7. Content Requirements** +What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. + +**8. Recommended References** +Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). + +**9. Open Questions** +Anything unresolved that the implementer should resolve during build. + +--- + +ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. + +Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this command internally.) diff --git a/.trae/skills/impeccable/reference/teach.md b/.trae/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..972ca25be --- /dev/null +++ b/.trae/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +ask the user directly to clarify what you cannot infer. Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then ask the user directly to clarify what you cannot infer. whether they'd also like the Design Context appended to RULES.md. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/.trae/skills/impeccable/reference/typeset.md b/.trae/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/.trae/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/.trae/skills/impeccable/scripts/cleanup-deprecated.mjs b/.trae/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/.trae/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/.trae/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/.trae/skills/impeccable/scripts/command-metadata.json b/.trae/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/.trae/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/.trae/skills/impeccable/scripts/pin.mjs b/.trae/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/.trae/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/.trae/skills/layout/SKILL.md b/.trae/skills/layout/SKILL.md deleted file mode 100644 index 6e532e38a..000000000 --- a/.trae/skills/layout/SKILL.md +++ /dev/null @@ -1,125 +0,0 @@ ---- -name: layout -description: Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. \ No newline at end of file diff --git a/.trae/skills/optimize/SKILL.md b/.trae/skills/optimize/SKILL.md deleted file mode 100644 index d562cc53d..000000000 --- a/.trae/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. \ No newline at end of file diff --git a/.trae/skills/overdrive/SKILL.md b/.trae/skills/overdrive/SKILL.md deleted file mode 100644 index 862a4c9c4..000000000 --- a/.trae/skills/overdrive/SKILL.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -name: overdrive -description: Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Start your response with: - -``` -──────────── ⚡ OVERDRIVE ───────────── -》》》 Entering overdrive mode... -``` - -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. - -### Propose Before Building - -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: - -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. -2. **ask the user directly to clarify what you cannot infer.** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). -3. Only proceed with the direction the user confirms. - -Skipping this step risks building something embarrassing that needs to be thrown away. - -### Iterate with Browser Automation - -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. - ---- - -## Assess What "Extraordinary" Means Here - -The right kind of technical ambition depends entirely on what you're working with. Before choosing a technique, ask: **what would make a user of THIS specific interface say "wow, that's nice"?** - -### For visual/marketing surfaces -Pages, hero sections, landing pages, portfolios — the "wow" is often sensory: a scroll-driven reveal, a shader background, a cinematic page transition, generative art that responds to the cursor. - -### For functional UI -Tables, forms, dialogs, navigation — the "wow" is in how it FEELS: a dialog that morphs from the button that triggered it via View Transitions, a data table that renders 100k rows at 60fps via virtual scrolling, a form with streaming validation that feels instant, drag-and-drop with spring physics. - -### For performance-critical UI -The "wow" is invisible but felt: a search that filters 50k items without a flicker, a complex form that never blocks the main thread, an image editor that processes in near-real-time. The interface just never hesitates. - -### For data-heavy interfaces -Charts and dashboards — the "wow" is in fluidity: GPU-accelerated rendering via Canvas/WebGL for massive datasets, animated transitions between data states, force-directed graph layouts that settle naturally. - -**The common thread**: something about the implementation goes beyond what users expect from a web interface. The technique serves the experience, not the other way around. - -## The Toolkit - -Organized by what you're trying to achieve, not by technology name. - -### Make transitions feel cinematic -- **View Transitions API** (same-document: all browsers; cross-document: no Firefox) — shared element morphing between states. A list item expanding into a detail page. A button morphing into a dialog. This is the closest thing to native FLIP animations. -- **`@starting-style`** (all browsers) — animate elements from `display: none` to visible with CSS only, including entry keyframes -- **Spring physics** — natural motion with mass, tension, and damping instead of cubic-bezier. Libraries: motion (formerly Framer Motion), GSAP, or roll your own spring solver. - -### Tie animation to scroll position -- **Scroll-driven animations** (`animation-timeline: scroll()`) — CSS-only, no JS. Parallax, progress bars, reveal sequences all driven by scroll position. (Chrome/Edge/Safari; Firefox: flag only — always provide a static fallback) - -### Render beyond CSS -- **WebGL** (all browsers) — shader effects, post-processing, particle systems. Libraries: Three.js, OGL (lightweight), regl. Use for effects CSS can't express. -- **WebGPU** (Chrome/Edge; Safari partial; Firefox: flag only) — next-gen GPU compute. More powerful than WebGL but limited browser support. Always fall back to WebGL2. -- **Canvas 2D / OffscreenCanvas** — custom rendering, pixel manipulation, or moving heavy rendering off the main thread entirely via Web Workers + OffscreenCanvas. -- **SVG filter chains** — displacement maps, turbulence, morphology for organic distortion effects. CSS-animatable. - -### Make data feel alive -- **Virtual scrolling** — render only visible rows for tables/lists with tens of thousands of items. No library required for simple cases; TanStack Virtual for complex ones. -- **GPU-accelerated charts** — Canvas or WebGL-rendered data visualization for datasets too large for SVG/DOM. Libraries: deck.gl, regl-based custom renderers. -- **Animated data transitions** — morph between chart states rather than replacing. D3's `transition()` or View Transitions for DOM-based charts. - -### Animate complex properties -- **`@property`** (all browsers) — register custom CSS properties with types, enabling animation of gradients, colors, and complex values that CSS can't normally interpolate. -- **Web Animations API** (all browsers) — JavaScript-driven animations with the performance of CSS. Composable, cancellable, reversible. The foundation for complex choreography. - -### Push performance boundaries -- **Web Workers** — move computation off the main thread. Heavy data processing, image manipulation, search indexing — anything that would cause jank. -- **OffscreenCanvas** — render in a Worker thread. The main thread stays free while complex visuals render in the background. -- **WASM** — near-native performance for computation-heavy features. Image processing, physics simulations, codecs. - -### Interact with the device -- **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. -- **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. - -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. - -## Implement with Discipline - -### Progressive enhancement is non-negotiable - -Every technique must degrade gracefully. The experience without the enhancement must still be good. - -```css -@supports (animation-timeline: scroll()) { - .hero { animation-timeline: scroll(); } -} -``` - -```javascript -if ('gpu' in navigator) { /* WebGPU */ } -else if (canvas.getContext('webgl2')) { /* WebGL2 fallback */ } -/* CSS-only fallback must still look good */ -``` - -### Performance rules - -- Target 60fps. If dropping below 50, simplify. -- Respect `prefers-reduced-motion` — always. Provide a beautiful static alternative. -- Lazy-initialize heavy resources (WebGL contexts, WASM modules) only when near viewport. -- Pause off-screen rendering. Kill what you can't see. -- Test on real mid-range devices, not just your development machine. - -### Polish is the difference - -The gap between "cool" and "extraordinary" is in the last 20% of refinement: the easing curve on a spring animation, the timing offset in a staggered reveal, the subtle secondary motion that makes a transition feel physical. Don't ship the first version that works — ship the version that feels inevitable. - -**NEVER**: -- Ignore `prefers-reduced-motion` — this is an accessibility requirement, not a suggestion -- Ship effects that cause jank on mid-range devices -- Use bleeding-edge APIs without a functional fallback -- Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills -- Layer multiple competing extraordinary moments — focus creates impact, excess creates noise - -## Verify the Result - -- **The wow test**: Show it to someone who hasn't seen it. Do they react? -- **The removal test**: Take it away. Does the experience feel diminished, or does nobody notice? -- **The device test**: Run it on a phone, a tablet, a Chromebook. Still smooth? -- **The accessibility test**: Enable reduced motion. Still beautiful? -- **The context test**: Does this make sense for THIS brand and audience? - -Remember: "Technically extraordinary" isn't about using the newest API. It's about making an interface do something users didn't think a website could do. \ No newline at end of file diff --git a/.trae/skills/polish/SKILL.md b/.trae/skills/polish/SKILL.md deleted file mode 100644 index 360b367f1..000000000 --- a/.trae/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. \ No newline at end of file diff --git a/.trae/skills/quieter/SKILL.md b/.trae/skills/quieter/SKILL.md deleted file mode 100644 index 373ae6869..000000000 --- a/.trae/skills/quieter/SKILL.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -name: quieter -description: Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current State - -Analyze what makes the design feel too intense: - -1. **Identify intensity sources**: - - **Color saturation**: Overly bright or saturated colors - - **Contrast extremes**: Too much high-contrast juxtaposition - - **Visual weight**: Too many bold, heavy elements competing - - **Animation excess**: Too much motion or overly dramatic effects - - **Complexity**: Too many visual elements, patterns, or decorations - - **Scale**: Everything is large and loud with no hierarchy - -2. **Understand the context**: - - What's the purpose? (Marketing vs tool vs reading experience) - - Who's the audience? (Some contexts need energy) - - What's working? (Don't throw away good ideas) - - What's the core message? (Preserve what matters) - -If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer. - -**CRITICAL**: "Quieter" doesn't mean boring or generic. It means refined, sophisticated, and easier on the eyes. Think luxury, not laziness. - -## Plan Refinement - -Create a strategy to reduce intensity while maintaining impact: - -- **Color approach**: Desaturate or shift to more sophisticated tones? -- **Hierarchy approach**: Which elements should stay bold (very few), which should recede? -- **Simplification approach**: What can be removed entirely? -- **Sophistication approach**: How can we signal quality through restraint? - -**IMPORTANT**: Great quiet design is harder than great bold design. Subtlety requires precision. - -## Refine the Design - -Systematically reduce intensity across these dimensions: - -### Color Refinement -- **Reduce saturation**: Shift from fully saturated to 70-85% saturation -- **Soften palette**: Replace bright colors with muted, sophisticated tones -- **Reduce color variety**: Use fewer colors more thoughtfully -- **Neutral dominance**: Let neutrals do more work, use color as accent (10% rule) -- **Gentler contrasts**: High contrast only where it matters most -- **Tinted grays**: Use warm or cool tinted grays instead of pure gray—adds sophistication without loudness -- **Never gray on color**: If you have gray text on a colored background, use a darker shade of that color or transparency instead - -### Visual Weight Reduction -- **Typography**: Reduce font weights (900 → 600, 700 → 500), decrease sizes where appropriate -- **Hierarchy through subtlety**: Use weight, size, and space instead of color and boldness -- **White space**: Increase breathing room, reduce density -- **Borders & lines**: Reduce thickness, decrease opacity, or remove entirely - -### Simplification -- **Remove decorative elements**: Gradients, shadows, patterns, textures that don't serve purpose -- **Simplify shapes**: Reduce border radius extremes, simplify custom shapes -- **Reduce layering**: Flatten visual hierarchy where possible -- **Clean up effects**: Reduce or remove blur effects, glows, multiple shadows - -### Motion Reduction -- **Reduce animation intensity**: Shorter distances (10-20px instead of 40px), gentler easing -- **Remove decorative animations**: Keep functional motion, remove flourishes -- **Subtle micro-interactions**: Replace dramatic effects with gentle feedback -- **Refined easing**: Use ease-out-quart for smooth, understated motion—never bounce or elastic -- **Remove animations entirely** if they're not serving a clear purpose - -### Composition Refinement -- **Reduce scale jumps**: Smaller contrast between sizes creates calmer feeling -- **Align to grid**: Bring rogue elements back into systematic alignment -- **Even out spacing**: Replace extreme spacing variations with consistent rhythm - -**NEVER**: -- Make everything the same size/weight (hierarchy still matters) -- Remove all color (quiet ≠ grayscale) -- Eliminate all personality (maintain character through refinement) -- Sacrifice usability for aesthetics (functional elements still need clear affordances) -- Make everything small and light (some anchors needed) - -## Verify Quality - -Ensure refinement maintains quality: - -- **Still functional**: Can users still accomplish tasks easily? -- **Still distinctive**: Does it have character, or is it generic now? -- **Better reading**: Is text easier to read for extended periods? -- **Sophistication**: Does it feel more refined and premium? - -Remember: Quiet design is confident design. It doesn't need to shout. Less is more, but less is also harder. Refine with precision and maintain intentionality. \ No newline at end of file diff --git a/.trae/skills/shape/SKILL.md b/.trae/skills/shape/SKILL.md deleted file mode 100644 index 7e83008b5..000000000 --- a/.trae/skills/shape/SKILL.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -name: shape -description: Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written. -version: 2.1.1 -user-invocable: true -argument-hint: "[feature to shape]" ---- - -## MANDATORY PREPARATION - -Invoke /impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run /impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to /impeccable craft, /impeccable, or any other implementation skill. - -## Philosophy - -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. - -## Phase 1: Discovery Interview - -**Do NOT write any code or make any design decisions during this phase.** Your only job is to understand the feature deeply enough to make excellent design decisions later. - -Ask these questions in conversation, adapting based on answers. Don't dump them all at once; have a natural dialogue. ask the user directly to clarify what you cannot infer. - -### Purpose & Context -- What is this feature for? What problem does it solve? -- Who specifically will use it? (Not "users"; be specific: role, context, frequency) -- What does success look like? How will you know this feature is working? -- What's the user's state of mind when they reach this feature? (Rushed? Exploring? Anxious? Focused?) - -### Content & Data -- What content or data does this feature display or collect? -- What are the realistic ranges? (Minimum, typical, maximum, e.g., 0 items, 5 items, 500 items) -- What are the edge cases? (Empty state, error state, first-time use, power user) -- Is any content dynamic? What changes and how often? - -### Design Goals -- What's the single most important thing a user should do or understand here? -- What should this feel like? (Fast/efficient? Calm/trustworthy? Fun/playful? Premium/refined?) -- Are there existing patterns in the product this should be consistent with? -- Are there specific examples (inside or outside the product) that capture what you're going for? - -### Constraints -- Are there technical constraints? (Framework, performance budget, browser support) -- Are there content constraints? (Localization, dynamic text length, user-generated content) -- Mobile/responsive requirements? -- Accessibility requirements beyond WCAG AA? - -### Anti-Goals -- What should this NOT be? What would be a wrong direction? -- What's the biggest risk of getting this wrong? - -## Phase 2: Design Brief - -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. - -### Brief Structure - -**1. Feature Summary** (2-3 sentences) -What this is, who it's for, what it needs to accomplish. - -**2. Primary User Action** -The single most important thing a user should do or understand here. - -**3. Design Direction** -How this should feel. What aesthetic approach fits. Reference the project's design context from `.impeccable.md` and explain how this feature should express it. - -**4. Layout Strategy** -High-level spatial approach: what gets emphasis, what's secondary, how information flows. Describe the visual hierarchy and rhythm, not specific CSS. - -**5. Key States** -List every state the feature needs: default, empty, loading, error, success, edge cases. For each, note what the user needs to see and feel. - -**6. Interaction Model** -How users interact with this feature. What happens on click, hover, scroll? What feedback do they get? What's the flow from entry to completion? - -**7. Content Requirements** -What copy, labels, empty state messages, error messages, and microcopy are needed. Note any dynamic content and its realistic ranges. - -**8. Recommended References** -Based on the brief, list which impeccable reference files would be most valuable during implementation (e.g., spatial-design.md for complex layouts, motion-design.md for animated features, interaction-design.md for form-heavy features). - -**9. Open Questions** -Anything unresolved that the implementer should resolve during build. - ---- - -ask the user directly to clarify what you cannot infer. Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. - -Once confirmed, the brief is complete. The user can now hand it to /impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use /impeccable craft instead, which runs this skill internally.) \ No newline at end of file diff --git a/.trae/skills/typeset/SKILL.md b/.trae/skills/typeset/SKILL.md deleted file mode 100644 index 166d4b741..000000000 --- a/.trae/skills/typeset/SKILL.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -name: typeset -description: Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. -version: 2.1.1 -user-invocable: true -argument-hint: "[target]" ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md index 54a0d2c35..6252f0cb8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,6 +1,6 @@ # Impeccable -The vocabulary you didn't know you needed. 1 skill, 18 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI. +The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI. ## Repository Purpose diff --git a/CLAUDE.md b/CLAUDE.md index e95cff647..87349124c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -92,20 +92,26 @@ There are three independently versioned components. Only bump the one(s) that ac - Update for user-facing changes only, not internal build/tooling details - Use the most prominent version that changed (e.g. skills version for skill consolidation) -## Adding New Skills +## Adding New Sub-commands -When adding a new user-invocable skill, update the command count in **all** of these locations: +All commands are accessed through `/impeccable`. To add a new one: -- `public/index.html` → meta descriptions, hero box, section lead -- `public/cheatsheet.html` → meta description, subtitle, `commandCategories`, `commandRelationships` -- `public/js/data.js` → `commandProcessSteps`, `commandCategories`, `commandRelationships` -- `public/js/components/framework-viz.js` → `commandSymbols`, `commandNumbers` -- `public/js/demos/commands/` → new demo file + import in `index.js` -- `README.md` → intro, command count, commands table -- `NOTICE.md` → steering commands count -- `AGENTS.md` → intro command count -- `.claude-plugin/plugin.json` → description -- `.claude-plugin/marketplace.json` → metadata description + plugin description +1. Create `source/skills/impeccable/reference/.md` with the command's instructions +2. Add a row to the **Sub-command reference table** in `source/skills/impeccable/SKILL.md` +3. Add an entry to the **Command menu** section in the same file +4. Add the command name to `IMPECCABLE_SUB_COMMANDS` in `scripts/lib/utils.js` +5. Add it to `VALID_COMMANDS` in `source/skills/impeccable/scripts/pin.mjs` +6. Add its metadata to `source/skills/impeccable/scripts/command-metadata.json` + +The build system counts commands from the router table automatically. Update the command count in **all** of these locations: + +- `public/index.html` -- meta descriptions, hero box, section lead +- `public/cheatsheet.html` -- meta description, subtitle +- `README.md` -- intro, command count, commands table +- `NOTICE.md` -- command count +- `AGENTS.md` -- intro command count +- `.claude-plugin/plugin.json` -- description +- `.claude-plugin/marketplace.json` -- metadata description + plugin description ## Evals Framework (private, gitignored) diff --git a/NOTICE.md b/NOTICE.md index 04be4620b..2843ee71b 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -13,5 +13,5 @@ The `impeccable` skill in this project builds on Anthropic's original frontend-d This project extends the original with: - 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing) -- 18 steering commands +- 20 commands - Expanded patterns and anti-patterns diff --git a/README.md b/README.md index fdbe50d19..629065501 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Impeccable -The vocabulary you didn't know you needed. 1 skill, 18 commands, and curated anti-patterns for impeccable frontend design. +The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design. > **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles. @@ -12,7 +12,7 @@ Every LLM learned from the same generic templates. Without guidance, you get the Impeccable fights that bias with: - **An expanded skill** with 7 domain-specific reference files ([view source](source/skills/impeccable/)) -- **18 steering commands** to audit, review, polish, distill, animate, and more +- **20 commands** to audit, review, polish, distill, animate, and more - **Curated anti-patterns** that explicitly tell the AI what NOT to do ## What's Included @@ -31,65 +31,47 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou | [responsive-design](source/skills/impeccable/reference/responsive-design.md) | Mobile-first, fluid design, container queries | | [ux-writing](source/skills/impeccable/reference/ux-writing.md) | Button labels, error messages, empty states | -### 18 Commands +### 20 Commands + +All commands are accessed through `/impeccable`: | Command | What it does | |---------|--------------| -| `/impeccable teach` | One-time setup: gather design context, save to config | | `/impeccable craft` | Full shape-then-build flow with visual iteration | +| `/impeccable teach` | One-time setup: gather design context, save to config | | `/impeccable extract` | Pull reusable components and tokens into the design system | -| `/audit` | Run technical quality checks (a11y, performance, responsive) | -| `/critique` | UX design review: hierarchy, clarity, emotional resonance | -| `/polish` | Final pass, design system alignment, and shipping readiness | -| `/distill` | Strip to essence | -| `/clarify` | Improve unclear UX copy | -| `/optimize` | Performance improvements | -| `/harden` | Error handling, onboarding, i18n, edge cases | -| `/animate` | Add purposeful motion | -| `/colorize` | Introduce strategic color | -| `/bolder` | Amplify boring designs | -| `/quieter` | Tone down overly bold designs | -| `/delight` | Add moments of joy | -| `/adapt` | Adapt for different devices | -| `/typeset` | Fix font choices, hierarchy, sizing | -| `/layout` | Fix layout, spacing, visual rhythm | -| `/overdrive` | Add technically extraordinary effects | +| `/impeccable shape` | Plan UX/UI before writing code | +| `/impeccable critique` | UX design review: hierarchy, clarity, emotional resonance | +| `/impeccable audit` | Run technical quality checks (a11y, performance, responsive) | +| `/impeccable polish` | Final pass, design system alignment, and shipping readiness | +| `/impeccable bolder` | Amplify boring designs | +| `/impeccable quieter` | Tone down overly bold designs | +| `/impeccable distill` | Strip to essence | +| `/impeccable harden` | Error handling, onboarding, i18n, edge cases | +| `/impeccable animate` | Add purposeful motion | +| `/impeccable colorize` | Introduce strategic color | +| `/impeccable typeset` | Fix font choices, hierarchy, sizing | +| `/impeccable layout` | Fix layout, spacing, visual rhythm | +| `/impeccable delight` | Add moments of joy | +| `/impeccable overdrive` | Add technically extraordinary effects | +| `/impeccable clarify` | Improve unclear UX copy | +| `/impeccable adapt` | Adapt for different devices | +| `/impeccable optimize` | Performance improvements | + +Use `/impeccable pin ` to create standalone shortcuts (e.g., `pin audit` creates `/audit`). #### Usage Examples -**`/audit`** - Run quality checks, get a report (no edits) ``` -/audit blog # Audit blog hub + post pages -/audit dashboard # Check dashboard components -/audit checkout flow # Focus on checkout UX +/impeccable audit blog # Audit blog hub + post pages +/impeccable critique landing # UX design review +/impeccable polish settings # Final pass before shipping +/impeccable harden checkout # Add error handling + edge cases ``` -*When to use:* Before making changes, to understand what needs fixing. -**`/normalize`** - Align with design system +Or use `/impeccable` directly with a description: ``` -/normalize blog # Apply design tokens, fix spacing -/normalize buttons # Standardize button styles -``` -*When to use:* After audit, to fix inconsistencies. - -**`/critique`** - UX design review -``` -/critique landing page # Review landing page UX -/critique onboarding # Check onboarding flow -``` -*When to use:* When you want design feedback, not technical fixes. - -**`/polish`** - Final pass before shipping -``` -/polish feature modal # Clean up modal before release -/polish settings page # Final review of settings UI -``` -*When to use:* Last step before deploying to production. - -**Combining commands:** -``` -/audit /normalize /polish blog # Full workflow: audit → fix → polish -/critique /harden checkout # UX review + add error handling +/impeccable redo this hero section ``` ### Anti-Patterns diff --git a/content/site/anti-patterns-catalog.js b/content/site/anti-patterns-catalog.js index cae6dd9c7..b16fecf28 100644 --- a/content/site/anti-patterns-catalog.js +++ b/content/site/anti-patterns-catalog.js @@ -75,7 +75,7 @@ export const LAYER_LABELS = { export const LAYER_DESCRIPTIONS = { cli: 'Deterministic. Runs from `npx impeccable detect` on files, no browser required.', browser: 'Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.', - llm: 'Not caught by any deterministic detector. Flagged by /critique during its LLM design review.', + llm: 'Not caught by any deterministic detector. Flagged by /impeccable critique during its LLM design review.', }; // ─── Visual examples ───────────────────────────────────────────────── diff --git a/content/site/partials/header.html b/content/site/partials/header.html index f52c00a8d..87fdc4193 100644 --- a/content/site/partials/header.html +++ b/content/site/partials/header.html @@ -7,7 +7,7 @@
diff --git a/content/site/skills/adapt.md b/content/site/skills/adapt.md index 71786e04e..a6b4996bf 100644 --- a/content/site/skills/adapt.md +++ b/content/site/skills/adapt.md @@ -4,7 +4,7 @@ tagline: "Make designs work across screens, devices, and contexts without amputa ## When to use it -`/adapt` is for taking a design built for one context and making it work in another. Mobile from desktop, tablet from mobile, print from web, embedded from standalone, email from dashboard. Reach for it when the source design is solid but falls apart at other breakpoints, on touch, or in a different container. +`/impeccable adapt` is for taking a design built for one context and making it work in another. Mobile from desktop, tablet from mobile, print from web, embedded from standalone, email from dashboard. Reach for it when the source design is solid but falls apart at other breakpoints, on touch, or in a different container. Not for building responsive from scratch. For that, start with `/impeccable` and shape the layout responsive-first. Adapt is for the "we never thought about mobile" backfill. @@ -22,7 +22,7 @@ The non-negotiable rule: adapt, do not amputate. Critical functionality cannot d ## Try it ``` -/adapt the settings page for mobile +/impeccable adapt the settings page for mobile ``` Expected changes: @@ -37,4 +37,4 @@ Expected changes: - **Amputating features.** If the mobile version hides things the desktop version can do, that is a regression, not an adaptation. Fight for the feature. - **Treating mobile as "smaller desktop".** Mobile is a different context: thumbs, interruption, short sessions. Adapt to the context, not to the viewport width. -- **Skipping `/harden` afterward.** Responsive layouts reveal edge cases. Run hardening after adapt to catch the ones that only show up at 320px. +- **Skipping `/impeccable harden` afterward.** Responsive layouts reveal edge cases. Run hardening after adapt to catch the ones that only show up at 320px. diff --git a/content/site/skills/animate.md b/content/site/skills/animate.md index 6781a8675..0cea287b8 100644 --- a/content/site/skills/animate.md +++ b/content/site/skills/animate.md @@ -4,7 +4,7 @@ tagline: "Purposeful motion that conveys state, not decoration." ## When to use it -`/animate` is for interfaces that feel lifeless, where state changes are instant and jarring, where loading just pops in, where the user never quite trusts that their click registered. Use it to add the small motions that communicate what is happening: entrances, exits, feedback, transitions between states. +`/impeccable animate` is for interfaces that feel lifeless, where state changes are instant and jarring, where loading just pops in, where the user never quite trusts that their click registered. Use it to add the small motions that communicate what is happening: entrances, exits, feedback, transitions between states. Do not use it to add bounces or elastic springs for the sake of energy. That is decoration, and this skill will not give it to you. @@ -25,7 +25,7 @@ The skill animates `transform` and `opacity` only. If you find yourself animatin ## Try it ``` -/animate the sign-up flow +/impeccable animate the sign-up flow ``` Typical additions: diff --git a/content/site/skills/audit.md b/content/site/skills/audit.md index b1e340636..9d7b68ba9 100644 --- a/content/site/skills/audit.md +++ b/content/site/skills/audit.md @@ -4,7 +4,7 @@ tagline: "Five-dimension technical quality check with P0 to P3 severity." ## When to use it -`/audit` is the technical counterpart to `/critique`. Where `/critique` asks "does this feel right", `/audit` asks "does this hold up". It runs accessibility, performance, theming, responsive design, and anti-pattern checks against the implementation, scores each dimension 0 to 4, and produces a plan with P0 to P3 severity ratings. +`/impeccable audit` is the technical counterpart to `/impeccable critique`. Where `/impeccable critique` asks "does this feel right", `/impeccable audit` asks "does this hold up". It runs accessibility, performance, theming, responsive design, and anti-pattern checks against the implementation, scores each dimension 0 to 4, and produces a plan with P0 to P3 severity ratings. Use it before shipping, during a quality sprint, or whenever a tech lead says "we should really look at accessibility". @@ -20,12 +20,12 @@ The skill scans your code across five dimensions: Each dimension gets a 0 to 4 score. Each finding gets a severity: P0 blocks the release, P1 should fix this sprint, P2 is next cycle, P3 is polish. You get back a single document you can paste into a ticket tracker. -Audit does not fix anything. It documents. Route the findings to `/polish`, `/harden`, or `/optimize` depending on the category. +Audit does not fix anything. It documents. Route the findings to `/impeccable polish`, `/impeccable harden`, or `/impeccable optimize` depending on the category. ## Try it ``` -/audit the checkout flow +/impeccable audit the checkout flow ``` Expected output: @@ -41,10 +41,10 @@ Performance: 3/4 (good) ... ``` -Hand the P0s to `/harden`, the theming and typography P1s to `/typeset` and `/polish`, the rest to `/polish`. +Hand the P0s to `/impeccable harden`, the theming and typography P1s to `/impeccable typeset` and `/impeccable polish`, the rest to `/impeccable polish`. ## Pitfalls -- **Confusing it with `/critique`.** Audit is implementation quality. Critique is design quality. Run both for a full picture. +- **Confusing it with `/impeccable critique`.** Audit is implementation quality. Critique is design quality. Run both for a full picture. - **Fixing P3s before P0s.** The severity scale exists for a reason. Start at the top. - **Skipping the dimensions you think are fine.** Theming and responsive are the ones most people assume are fine until they are not. diff --git a/content/site/skills/bolder.md b/content/site/skills/bolder.md index f636e03d8..cfaf5dd4f 100644 --- a/content/site/skills/bolder.md +++ b/content/site/skills/bolder.md @@ -4,7 +4,7 @@ tagline: "Push safe designs toward impact without sliding into chaos." ## When to use it -Reach for `/bolder` when the interface looks like every other interface. Generic sans, medium weights, soft shadows, modest accent color, reasonable spacing, forgettable. The design is not wrong, it is just safe. Use bolder when a project can handle presence and the current state is not bringing any. +Reach for `/impeccable bolder` when the interface looks like every other interface. Generic sans, medium weights, soft shadows, modest accent color, reasonable spacing, forgettable. The design is not wrong, it is just safe. Use bolder when a project can handle presence and the current state is not bringing any. Do not use it on dashboards people stare at for hours. Boldness earns its place on marketing pages, hero moments, and content features. Not in operator tools. @@ -22,7 +22,7 @@ The skill does not add more. It amplifies what is already there. If the design h ## Try it ``` -/bolder the landing page hero +/impeccable bolder the landing page hero ``` Expected changes: @@ -35,6 +35,6 @@ Expected changes: ## Pitfalls -- **Running it on the wrong page.** Product dashboards, settings, and forms should not be bold. They should be legible. Use `/layout` or `/polish` instead. -- **Confusing bold with loud.** Bold means committed and confident. Loud means shouting. Bolder is the former. If the result feels aggressive, follow up with `/quieter`. -- **Pairing it with `/delight` in the same pass.** Delight works best against a stable visual baseline. Bold first, stabilize, then delight. +- **Running it on the wrong page.** Product dashboards, settings, and forms should not be bold. They should be legible. Use `/impeccable layout` or `/impeccable polish` instead. +- **Confusing bold with loud.** Bold means committed and confident. Loud means shouting. Bolder is the former. If the result feels aggressive, follow up with `/impeccable quieter`. +- **Pairing it with `/impeccable delight` in the same pass.** Delight works best against a stable visual baseline. Bold first, stabilize, then delight. diff --git a/content/site/skills/clarify.md b/content/site/skills/clarify.md index 78593f650..47d7f3298 100644 --- a/content/site/skills/clarify.md +++ b/content/site/skills/clarify.md @@ -4,7 +4,7 @@ tagline: "Rewrite confusing UX copy so interfaces explain themselves." ## When to use it -`/clarify` is for interface text that makes people stop and think. Confusing labels, ambiguous button copy, error messages that blame the user, tooltips that repeat the label, empty states that say nothing useful. Use it when the problem is not the layout or the color, it is the words. +`/impeccable clarify` is for interface text that makes people stop and think. Confusing labels, ambiguous button copy, error messages that blame the user, tooltips that repeat the label, empty states that say nothing useful. Use it when the problem is not the layout or the color, it is the words. Good triggers: "users do not understand this field", "the error message is not helpful", "I cannot write good button copy", "this tooltip is a waste". @@ -24,7 +24,7 @@ The skill uses the audience and mental state from `.impeccable.md` to tune voice ## Try it ``` -/clarify the billing form +/impeccable clarify the billing form ``` Before and after, typical: @@ -37,6 +37,6 @@ Before and after, typical: ## Pitfalls -- **Writing cleverer, not clearer.** Clarify is not for voice upgrades. If the copy is already clear, do not reach for this skill. Use `/delight` instead when you want personality. +- **Writing cleverer, not clearer.** Clarify is not for voice upgrades. If the copy is already clear, do not reach for this skill. Use `/impeccable delight` instead when you want personality. - **Skipping the audience question.** Clarify needs to know who is reading. If `.impeccable.md` does not specify audience technical level, the rewrites will be generic. - **Running clarify on marketing copy.** Clarify is for functional UX text: labels, errors, instructions. Marketing copy needs a different set of moves and a human writer. diff --git a/content/site/skills/colorize.md b/content/site/skills/colorize.md index 9617abbd4..9dbb52598 100644 --- a/content/site/skills/colorize.md +++ b/content/site/skills/colorize.md @@ -4,7 +4,7 @@ tagline: "Add strategic color to monochrome interfaces without going garish." ## When to use it -`/colorize` is the counterweight to "everything is gray". Dashboards that read as a beige wall, forms with no accent, content pages that could be any SaaS product. Reach for it when the interface is functional but emotionally flat, and you want warmth without tipping into the AI color palette (purple-to-pink, cyan neon, dark mode glow). +`/impeccable colorize` is the counterweight to "everything is gray". Dashboards that read as a beige wall, forms with no accent, content pages that could be any SaaS product. Reach for it when the interface is functional but emotionally flat, and you want warmth without tipping into the AI color palette (purple-to-pink, cyan neon, dark mode glow). ## How it works @@ -20,7 +20,7 @@ Importantly, it uses OKLCH rather than HSL so that equal lightness steps look eq ## Try it ``` -/colorize the dashboard +/impeccable colorize the dashboard ``` Expected diff: @@ -34,5 +34,5 @@ Expected diff: ## Pitfalls - **Running it without a brand hue.** Colorize needs a starting point. If `.impeccable.md` does not specify one, it will ask. Do not let it pick from the AI color palette defaults. -- **Expecting it to fix the AI color palette problem.** If your design already has purple gradients and cyan neon, you need `/quieter` first, then colorize can rebuild. -- **Using it on already-colorful interfaces.** That is a `/quieter` job. Colorize adds, it does not subtract. +- **Expecting it to fix the AI color palette problem.** If your design already has purple gradients and cyan neon, you need `/impeccable quieter` first, then colorize can rebuild. +- **Using it on already-colorful interfaces.** That is a `/impeccable quieter` job. Colorize adds, it does not subtract. diff --git a/content/site/skills/craft.md b/content/site/skills/craft.md new file mode 100644 index 000000000..cec545ca6 --- /dev/null +++ b/content/site/skills/craft.md @@ -0,0 +1,42 @@ +--- +tagline: "Shape the design, then build it, all in one flow." +--- + +## When to use it + +`/impeccable craft` is the end-to-end build command. Give it a feature description and it runs the whole pipeline: structured discovery, reference loading, implementation, visual iteration. Use it when you are starting a new feature from zero and want the whole workflow in one invocation. + +Reach for it when: + +- **You are building a new feature and want the full flow.** You do not want to manage the steps yourself. +- **You know what you are building but not how it should look.** The discovery phase forces the design thinking before implementation locks it in. +- **You want visual iteration by default.** `craft` checks the result in a browser and refines until the polish is high, instead of shipping the first working version. + +If you only want the thinking without the code, use `/impeccable shape` standalone. If you already have a clear vision and just want to build, call `/impeccable` directly with your feature description. `craft` sits in between: structured, complete, opinionated. + +## How it works + +`craft` runs four phases in order: + +1. **Shape the design.** Runs `/impeccable shape` internally: a short discovery conversation about purpose, users, content, constraints, and goals. The output is a design brief you can read and push back on. +2. **Load references.** Based on the brief, pulls in the right reference files (spatial, typography, motion, color, interaction, responsive, UX writing) so the model has the relevant principles loaded before it starts coding. +3. **Build.** Implements the feature in a deliberate order: structure first, then spacing and hierarchy, then type and color, then states, then motion, then responsive. Every decision traces back to the brief. +4. **Visual iteration.** Opens the result in a browser, checks it against the brief and the anti-pattern catalog, and refines until it matches the intent. This step is critical. The first working version is never the shipped version. + +The discovery phase is non-skippable and that is the point. Most AI-generated UIs fail because nobody asked what the user was trying to accomplish before the model started writing JSX. `craft` inverts that. + +## Try it + +``` +/impeccable craft a pricing page for a developer tool +``` + +Expect a 5 to 10 question discovery interview first. Questions about your audience, the product's personality, the emotional tone you want, anti-references, and constraints. Then a design brief. Then implementation, with the browser checked at each stage. Expect multiple iteration rounds in the visual polish phase. + +The whole run is longer than a typical command because it includes the thinking, the building, and the refining. That is the trade: more upfront structure, less cleanup afterwards. + +## Pitfalls + +- **Using it for small changes.** `craft` is for new features, not touch-ups. For existing code, reach for `/impeccable polish`, `/impeccable critique`, or a specific refinement command instead. +- **Rushing the discovery phase.** The interview feels slow compared to "just start coding". It is not. Answering the questions carefully produces a sharper brief, which produces a sharper build, which produces fewer rewrites. +- **Skipping the visual iteration.** The phase exists for a reason. The gap between "technically works" and "feels right" is closed with visual polish, not code review. Let it run. diff --git a/content/site/skills/critique.md b/content/site/skills/critique.md index 49a0a395e..4381803b5 100644 --- a/content/site/skills/critique.md +++ b/content/site/skills/critique.md @@ -4,13 +4,13 @@ tagline: "A design review with scoring, persona tests, and automated detection." ## When to use it -Reach for `/critique` when you want an honest second opinion on something you already built. Not "does it work" but "is it any good". The skill scores your interface against Nielsen's 10 heuristics, runs cognitive load checks, tests through persona lenses, and cross-references an automated detector for 25 concrete anti-patterns. +Reach for `/impeccable critique` when you want an honest second opinion on something you already built. Not "does it work" but "is it any good". The skill scores your interface against Nielsen's 10 heuristics, runs cognitive load checks, tests through persona lenses, and cross-references an automated detector for 25 concrete anti-patterns. Use it when a page is functionally done and you want to know if it reads as intentional or as AI slop. ## How it works -`/critique` runs two independent assessments in parallel so they do not bias each other. +`/impeccable critique` runs two independent assessments in parallel so they do not bias each other. The first is an **LLM design review**: the model reads your source, visually inspects the live page if browser automation is available, and walks the impeccable skill's full DO/DON'T catalog. It scores Nielsen's heuristics, counts cognitive load failures, traces the emotional journey through the flow, and flags AI slop. @@ -23,7 +23,7 @@ The two reports merge into one prioritized list: what is working, the three to f Point it at a page: ``` -/critique the homepage hero +/impeccable critique the homepage hero ``` You get back a scored report. Typical shape: @@ -34,7 +34,7 @@ You get back a scored report. Typical shape: - **Priority issues**: three to five items, each with what, why, and fix - **Questions to answer**: the ones the interface itself cannot decide for you -From there, pair with `/polish` or `/distill` to act on the fixes. +From there, pair with `/impeccable polish` or `/impeccable distill` to act on the fixes. ## Pitfalls diff --git a/content/site/skills/delight.md b/content/site/skills/delight.md index fbd9e805a..8d7d913c4 100644 --- a/content/site/skills/delight.md +++ b/content/site/skills/delight.md @@ -4,7 +4,7 @@ tagline: "Small moments of personality that turn functional into memorable." ## When to use it -`/delight` is for interfaces that work but do not feel like anything. Use it when the core experience is solid and you want to add the small human touches that make people remember it: a considered empty state, a loading message with a point of view, a success animation that feels earned, a microcopy moment that makes someone smile. +`/impeccable delight` is for interfaces that work but do not feel like anything. Use it when the core experience is solid and you want to add the small human touches that make people remember it: a considered empty state, a loading message with a point of view, a success animation that feels earned, a microcopy moment that makes someone smile. It is a finishing skill. Never the first thing you run on a new build. @@ -25,7 +25,7 @@ The rule is: every delight moment must still work perfectly if you delete the de ## Try it ``` -/delight the first-run experience +/impeccable delight the first-run experience ``` Expected additions: diff --git a/content/site/skills/distill.md b/content/site/skills/distill.md index d8a112f15..d6d53096e 100644 --- a/content/site/skills/distill.md +++ b/content/site/skills/distill.md @@ -4,9 +4,9 @@ tagline: "Ruthless subtraction. Strip designs to their essence." ## When to use it -`/distill` removes what should not be there. Competing buttons, redundant information, decorative borders, three fonts where one works, six navigation items where three belong. Use it when an interface feels cluttered, busy, or like it is trying to do too much at once. +`/impeccable distill` removes what should not be there. Competing buttons, redundant information, decorative borders, three fonts where one works, six navigation items where three belong. Use it when an interface feels cluttered, busy, or like it is trying to do too much at once. -Reach for it after `/critique` flags "cognitive load" or "visual noise", or any time a page has grown by accretion and no one has done the editing. +Reach for it after `/impeccable critique` flags "cognitive load" or "visual noise", or any time a page has grown by accretion and no one has done the editing. ## How it works @@ -22,7 +22,7 @@ The principle: simplicity is not about fewer features. It is about fewer obstacl ## Try it ``` -/distill this dashboard +/impeccable distill this dashboard ``` Before: four card styles, three button variants, two header treatments, a sidebar with 14 items grouped into 5 sections. @@ -41,4 +41,4 @@ Fewer things. Each one clearer. - **Confusing distill with delete.** Distill removes obstacles. It does not remove features users need. If a user relies on something daily, find a way to keep it quietly, not a way to cut it. - **Running it too early.** If the feature is still growing, distilling it now means distilling the same thing again next week. Wait until the shape is stable. -- **Expecting it to replace hierarchy work.** Sometimes the right fix is not removing things, it is arranging them. Reach for `/layout` when the problem is layout, not quantity. +- **Expecting it to replace hierarchy work.** Sometimes the right fix is not removing things, it is arranging them. Reach for `/impeccable layout` when the problem is layout, not quantity. diff --git a/content/site/skills/extract.md b/content/site/skills/extract.md index 963ad985f..e8325a3a8 100644 --- a/content/site/skills/extract.md +++ b/content/site/skills/extract.md @@ -4,7 +4,7 @@ tagline: "Pull reusable components, tokens, and patterns into the design system. ## When to use it -`/extract` is for the moment your codebase has accidentally become a design system. Repeated button styles in 12 places. Three variants of the same card. Hex colors scattered throughout. Hand-rolled spacing that accidentally matches a scale. Reach for it when you want to consolidate this drift into reusable primitives. +`/impeccable extract` is for the moment your codebase has accidentally become a design system. Repeated button styles in 12 places. Three variants of the same card. Hex colors scattered throughout. Hand-rolled spacing that accidentally matches a scale. Reach for it when you want to consolidate this drift into reusable primitives. Use it after a product has shipped enough features to reveal the patterns. Premature extraction creates abstractions that do not match reality. @@ -23,7 +23,7 @@ The skill is cautious. It only extracts things used three or more times, with th ## Try it ``` -/extract the button styles +/impeccable extract the button styles ``` Expected output: diff --git a/content/site/skills/harden.md b/content/site/skills/harden.md index d2c498a0d..8b80e2bd0 100644 --- a/content/site/skills/harden.md +++ b/content/site/skills/harden.md @@ -4,7 +4,7 @@ tagline: "Make interfaces production-ready. Edge cases, onboarding, i18n, error ## When to use it -`/harden` is for the day your interface meets reality. Real user data is messy: names that are 60 characters long, product titles in German, prices in the billions, empty lists, 500 errors, offline modes, right-to-left text. Designs that only work with perfect data are not production-ready. +`/impeccable harden` is for the day your interface meets reality. Real user data is messy: names that are 60 characters long, product titles in German, prices in the billions, empty lists, 500 errors, offline modes, right-to-left text. Designs that only work with perfect data are not production-ready. Reach for it before launch, before opening to a new market, or any time a bug report starts with "our user had a really long name and". @@ -25,7 +25,7 @@ For each dimension it identifies the failure mode, then applies the concrete fix Start with one page and one dimension: ``` -/harden the user profile page for long names +/impeccable harden the user profile page for long names ``` Expected output: @@ -40,6 +40,6 @@ Run it per-page, not all at once. The first run is the biggest; subsequent runs ## Pitfalls -- **Waiting for a bug report.** Harden is preventative. If you find yourself fixing the same class of bug twice, run `/harden` across the feature. +- **Waiting for a bug report.** Harden is preventative. If you find yourself fixing the same class of bug twice, run `/impeccable harden` across the feature. - **Treating error and empty states as an afterthought.** Most hardening work is error and empty state UI. Budget time for it, not just a `catch` block. - **Skipping i18n because "we are English-only for now".** i18n-safe layouts are still better layouts. Flexible containers, proper text wrapping, generous line-height. None of that hurts English. diff --git a/content/site/skills/impeccable.md b/content/site/skills/impeccable.md index c151883e2..94e97cbae 100644 --- a/content/site/skills/impeccable.md +++ b/content/site/skills/impeccable.md @@ -1,51 +1,39 @@ --- -tagline: "The design intelligence behind every other skill." +tagline: "The design intelligence behind every command." --- ## When to use it -`/impeccable` is the foundation. It teaches your AI harness how to design, period. Every other command in this pack leans on it for design principles, anti-patterns, typography, color, and layout guidance. +`/impeccable` is the home command. Call it directly when you want freeform design work with the full guidebook loaded, without having to pick a specialized command. It is the fallback you reach for when none of the 20 specialists (`audit`, `polish`, `critique`, and the rest) map cleanly onto what you're trying to do. -Call `/impeccable` directly when you want freeform design with the full guidebook loaded. Or use one of the two sub-modes: +Reach for `/impeccable` directly when: -### /impeccable craft {#craft} +- **You're not sure which command fits.** Describe what you want in plain English and let the skill pick the right approach. +- **The work spans multiple disciplines.** "Redo this hero section" touches layout, type, color, and motion. One command can't own that. +- **You want the full design intelligence without constraints.** Every reference file loaded, every anti-pattern checked, no pre-set workflow. -The full shape-then-build flow. It starts by running `/shape` internally (a structured discovery interview about purpose, audience, and goals), then moves into implementation with visual iteration, checking the result in the browser until the polish is high. Best for brand-new features where you want to think before you build, without managing the steps yourself. - -### /impeccable teach {#teach} - -One-time project setup. Runs a short discovery interview about your brand, audience, and aesthetic direction, then writes a `.impeccable.md` file that every future skill call reads automatically. Run this once per project before doing any design work. - -### /impeccable extract {#extract} - -Pull reusable components, design tokens, and patterns out of your code and into the design system. Finds repeated UI patterns (buttons in 12 places, three card variants, scattered hex colors), extracts them into shared primitives, and migrates all callers. Best used after a product has shipped enough features to reveal the patterns -- premature extraction creates abstractions that do not match reality. +For more structured flows, reach for the specialized commands in the sidebar. `/impeccable craft` runs the full shape-then-build pipeline, `/impeccable shape` produces a design brief before any code is written, and the evaluation and refinement commands (`audit`, `critique`, `polish`, `typeset`, etc.) each own a specific slice of the work. ## How it works Most AI-generated UIs fail the same way: generic fonts, purple gradients, card grids on card grids, glassmorphism everywhere. `/impeccable` gives your AI a strong point of view. It loads an opinionated design handbook plus a long list of anti-patterns, then pushes the model to commit to a specific aesthetic direction before writing a single line of code. -The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. If no context exists yet, it asks you to run `/impeccable teach` first. This is deliberate: design without context produces slop, and slop is the whole problem this pack exists to solve. +The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. On first use in a project, it runs the `teach` flow automatically: a short interview about your brand, audience, and aesthetic direction, saved to `.impeccable.md` so every future command reads it without asking again. ## Try it -From a clean project, run once: - ``` -/impeccable teach +/impeccable redo this hero section ``` -Answer the discovery questions. The skill writes a `.impeccable.md` file with your brand, audience, and aesthetic direction. Every future skill call reads it automatically. - -Then build something: - ``` /impeccable build me a pricing page for a developer tool ``` -You should get a page that commits to one clear aesthetic direction, uses non-default fonts, avoids the AI color palette, and has a real point of view. +Both prompts are vague on purpose. `/impeccable` will pick a strong aesthetic direction, commit to non-default fonts, avoid the AI color palette, and make the kind of specific choices that a designer would make. No command name to pick first, no step-by-step workflow to follow. ## Pitfalls -- **Skipping `/impeccable teach`.** Without a `.impeccable.md` file, the skill has to ask you context questions mid-flight. Faster to set it up once. - **Treating it like a style guide.** It is an opinionated design partner, not a linter. The defaults exist to raise the floor, not to overrule your judgment. If you have a real reason to push back (brand guideline, accessibility constraint, user research that says otherwise), push back and explain why. The skill will work with you. What produces worse output is ignoring the opinion without a reason. -- **Expecting it to fix existing code.** For that, reach for `/polish`, `/distill`, or `/critique` instead. `/impeccable` is for creation. +- **Expecting it to fix existing code.** `/impeccable` is for creation. For refinement, reach for `/impeccable polish`, `/impeccable distill`, or `/impeccable critique` instead. +- **Running it before `teach` has had a chance to save context.** On a fresh project it will interview you mid-flight, which is fine but slower. Running `/impeccable teach` explicitly as your very first command is a tiny bit smoother. diff --git a/content/site/skills/layout.md b/content/site/skills/layout.md index 8af09fa28..317f5ea39 100644 --- a/content/site/skills/layout.md +++ b/content/site/skills/layout.md @@ -4,7 +4,7 @@ tagline: "Fix layout, spacing, and visual rhythm." ## When to use it -`/layout` is for pages where nothing is technically wrong but nothing is breathing either. Equal padding everywhere, monotonous card grids, content that runs edge to edge, hierarchy that relies on size alone. Reach for it when a layout "feels off" and you cannot articulate why. +`/impeccable layout` is for pages where nothing is technically wrong but nothing is breathing either. Equal padding everywhere, monotonous card grids, content that runs edge to edge, hierarchy that relies on size alone. Reach for it when a layout "feels off" and you cannot articulate why. Good triggers: "everything feels crowded", "it reads like a wall", "I do not know where to look first". @@ -23,7 +23,7 @@ Fixes usually involve rebuilding the spacing scale, introducing asymmetry, colla ## Try it ``` -/layout the settings page +/impeccable layout the settings page ``` Typical changes: @@ -36,6 +36,6 @@ Typical changes: ## Pitfalls -- **Confusing arrange with distill.** If the problem is too many things, run `/distill` first. Layout is for arranging what is already the right set. +- **Confusing arrange with distill.** If the problem is too many things, run `/impeccable distill` first. Layout is for arranging what is already the right set. - **Expecting it to rescue a broken grid.** If the page has no grid at all, arrange will build one. Just know that the diff is going to be larger than you expect. - **Ignoring the hierarchy verdict.** If arrange says "nothing is primary", no amount of spacing work fixes that. You need a content decision, not a layout tweak. diff --git a/content/site/skills/optimize.md b/content/site/skills/optimize.md index 15b49905e..545d596c1 100644 --- a/content/site/skills/optimize.md +++ b/content/site/skills/optimize.md @@ -4,7 +4,7 @@ tagline: "Diagnose and fix UI performance from LCP to bundle size." ## When to use it -`/optimize` is for interfaces that feel slow. First paint takes forever, scrolling janks, images pop in late, interactions feel laggy, the bundle ships 800KB of JavaScript. Use it when the Web Vitals are bad or when users are complaining that things are sluggish. +`/impeccable optimize` is for interfaces that feel slow. First paint takes forever, scrolling janks, images pop in late, interactions feel laggy, the bundle ships 800KB of JavaScript. Use it when the Web Vitals are bad or when users are complaining that things are sluggish. Do not use it as premature optimization. If LCP is 1.1s and INP is 80ms, stop. The design work matters more. @@ -23,7 +23,7 @@ The skill measures before and after. Every fix gets quantified. If a change does ## Try it ``` -/optimize the homepage +/impeccable optimize the homepage ``` Expected shape: @@ -51,6 +51,6 @@ Bundle: 340KB → 180KB ## Pitfalls -- **Optimizing before measuring.** Without baseline metrics, you cannot tell what helped. Run `/optimize` with specific Web Vitals numbers, not vibes. +- **Optimizing before measuring.** Without baseline metrics, you cannot tell what helped. Run `/impeccable optimize` with specific Web Vitals numbers, not vibes. - **Chasing tiny wins.** A 20ms improvement in INP that takes a week is rarely worth it. Optimize has diminishing returns; know when to stop. - **Forgetting to re-measure after every change.** The build could have made things worse in a way the skill did not predict. Verify. diff --git a/content/site/skills/overdrive.md b/content/site/skills/overdrive.md index b01135358..61a2a26e8 100644 --- a/content/site/skills/overdrive.md +++ b/content/site/skills/overdrive.md @@ -4,7 +4,7 @@ tagline: "Push an interface past conventional limits. Shaders, physics, 60fps, c ## When to use it -`/overdrive` is for the moments where you want to impress. A hero that uses WebGL. A table that handles a million rows. A dialog that morphs out of its trigger element. A form that validates in real-time with streaming feedback. A page transition that feels cinematic. Use it when the project budget allows for technical ambition and the outcome needs to feel extraordinary. +`/impeccable overdrive` is for the moments where you want to impress. A hero that uses WebGL. A table that handles a million rows. A dialog that morphs out of its trigger element. A form that validates in real-time with streaming feedback. A page transition that feels cinematic. Use it when the project budget allows for technical ambition and the outcome needs to feel extraordinary. Do not use it on operator tools, dashboards, or anything where reliability beats spectacle. Overdrive burns complexity for effect, and that trade-off is only worth it on moments that matter. @@ -17,7 +17,7 @@ Overdrive output is announced with `──── ⚡ OVERDRIVE ────` so ## Try it ``` -/overdrive the landing hero +/impeccable overdrive the landing hero ``` One concrete run might replace a static hero with a WebGL shader background driven by mouse position, a display headline that reveals with a mask on scroll using the Scroll Timeline API, and a View Transition on the CTA that morphs into the next page. Plus a reduced-motion fallback that swaps all of it for a clean static composition. diff --git a/content/site/skills/polish.md b/content/site/skills/polish.md index 048957757..9c7a5f0e4 100644 --- a/content/site/skills/polish.md +++ b/content/site/skills/polish.md @@ -4,7 +4,7 @@ tagline: "The meticulous final pass between good and great." ## When to use it -`/polish` is the last thing you run before shipping. It hunts down the small details that separate a shipped feature from a polished one: half-pixel misalignments, inconsistent spacing, forgotten focus states, loading transitions that flash, copy that drifts in tone. It also aligns the feature with your design system -- replacing hard-coded values with tokens, swapping custom components for shared ones, and fixing any drift from established patterns. +`/impeccable polish` is the last thing you run before shipping. It hunts down the small details that separate a shipped feature from a polished one: half-pixel misalignments, inconsistent spacing, forgotten focus states, loading transitions that flash, copy that drifts in tone. It also aligns the feature with your design system, replacing hard-coded values with tokens, swapping custom components for shared ones, and fixing any drift from established patterns. Reach for it when the feature is functionally complete, nothing is broken, and something still feels off. Also reach for it when a feature has drifted from the design system and needs to be pulled back in line. @@ -24,7 +24,7 @@ The skill is explicit about one thing: polish is the last step, not the first. I ## Try it ``` -/polish the pricing page +/impeccable polish the pricing page ``` A healthy run looks like: @@ -41,6 +41,6 @@ Five small fixes, no rewrites. That is the shape of a good polish pass. ## Pitfalls -- **Polishing work that is not done.** If there are TODOs in the code, you are not ready. Run `/polish` on finished features only. -- **Treating polish as redesign.** Polish refines what exists. If you find yourself rearchitecting a layout, you needed `/critique` or `/layout` instead. -- **Running `/polish` without `/audit` first.** Polish catches feel-based issues. Audit catches measurable ones. Use both. +- **Polishing work that is not done.** If there are TODOs in the code, you are not ready. Run `/impeccable polish` on finished features only. +- **Treating polish as redesign.** Polish refines what exists. If you find yourself rearchitecting a layout, you needed `/impeccable critique` or `/impeccable layout` instead. +- **Running `/impeccable polish` without `/impeccable audit` first.** Polish catches feel-based issues. Audit catches measurable ones. Use both. diff --git a/content/site/skills/quieter.md b/content/site/skills/quieter.md index fedaa4d7c..e589df5c6 100644 --- a/content/site/skills/quieter.md +++ b/content/site/skills/quieter.md @@ -4,9 +4,9 @@ tagline: "Tone down designs that are shouting without losing their intent." ## When to use it -`/quieter` is the counterweight to `/bolder`. Reach for it when an interface is visually aggressive, overstimulating, or trying to do too many things at full volume. Neon on dark, gradient text everywhere, 6 accent colors, everything animated, 20px shadows. Use quieter when the design needs to breathe and you want refinement without losing the point of view. +`/impeccable quieter` is the counterweight to `/impeccable bolder`. Reach for it when an interface is visually aggressive, overstimulating, or trying to do too many things at full volume. Neon on dark, gradient text everywhere, 6 accent colors, everything animated, 20px shadows. Use quieter when the design needs to breathe and you want refinement without losing the point of view. -Also useful after `/bolder` goes a little too far. +Also useful after `/impeccable bolder` goes a little too far. ## How it works @@ -22,7 +22,7 @@ The skill preserves the design's intent. If the original had a point of view, th ## Try it ``` -/quieter the pricing page +/impeccable quieter the pricing page ``` Typical diff: @@ -37,4 +37,4 @@ Typical diff: - **Over-applying.** Quieter can strip personality if you run it on something that was already measured. Use it when the design is too loud, not when it is correctly assertive. - **Confusing quieter with distill.** Quieter reduces intensity. Distill removes elements. They are different moves. -- **Running it in response to a critique that says "too busy".** Busy usually means too many things, not too loud. Try `/distill` first. +- **Running it in response to a critique that says "too busy".** Busy usually means too many things, not too loud. Try `/impeccable distill` first. diff --git a/content/site/skills/shape.md b/content/site/skills/shape.md index e4a687d76..b593e30f5 100644 --- a/content/site/skills/shape.md +++ b/content/site/skills/shape.md @@ -4,13 +4,13 @@ tagline: "Think before you build. Produce a design brief through discovery, not ## When to use it -`/shape` is where a feature starts. Before anyone writes code, before anyone argues about the hero treatment, before anyone picks a font. Use it to force a discovery conversation about purpose, users, content, and constraints, then capture the answers as a design brief the implementation skills can lean on. +`/impeccable shape` is where a feature starts. Before anyone writes code, before anyone argues about the hero treatment, before anyone picks a font. Use it to force a discovery conversation about purpose, users, content, and constraints, then capture the answers as a design brief the implementation skills can lean on. Reach for it whenever a feature is about to start, a ticket is vague, or you catch yourself writing JSX to figure out what the product should be. ## How it works -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. The model jumps to "here is a card grid" without asking "what is the user trying to accomplish". `/shape` inverts that order. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. The model jumps to "here is a card grid" without asking "what is the user trying to accomplish". `/impeccable shape` inverts that order. The skill runs a structured discovery interview in conversation. It will not write code during this phase. The questions cover: @@ -21,17 +21,17 @@ The skill runs a structured discovery interview in conversation. It will not wri You answer naturally. The skill asks follow-ups, not a form. At the end it produces a design brief: a structured artifact you can hand to `/impeccable` or any other implementation skill. -Note: if you want the full flow -- discovery interview, then straight into building -- use `/impeccable craft` instead. It runs `/shape` internally, then continues into implementation with visual iteration. `/shape` standalone is for when you want just the brief, so you can take it to whatever implementation approach you prefer. +Note: if you want the full flow (discovery interview, then straight into building), use `/impeccable craft` instead. It runs `/impeccable shape` internally, then continues into implementation with visual iteration. `/impeccable shape` standalone is for when you want just the brief, so you can take it to whatever implementation approach you prefer. ## Try it ``` -/shape a daily digest email preferences page +/impeccable shape a daily digest email preferences page ``` Expect a 5 to 10 question conversation. The skill asks things like "who is the person opening this, and are they already committed or still curious" and "what happens when the user has unsubscribed from everything, do we hide the feature or show something". You answer, and a brief materializes. -From there you can hand the brief to `/impeccable`, `/polish`, or any other skill. Or just use it as a reference while you build by hand. +From there you can hand the brief to `/impeccable`, `/impeccable polish`, or any other skill. Or just use it as a reference while you build by hand. ## Pitfalls diff --git a/content/site/skills/teach.md b/content/site/skills/teach.md new file mode 100644 index 000000000..698fd7894 --- /dev/null +++ b/content/site/skills/teach.md @@ -0,0 +1,3 @@ +--- +tagline: "Teach Impeccable who your product is for, once per project." +--- diff --git a/content/site/skills/typeset.md b/content/site/skills/typeset.md index feb656821..0bfc1aad8 100644 --- a/content/site/skills/typeset.md +++ b/content/site/skills/typeset.md @@ -4,7 +4,7 @@ tagline: "Fix typography that feels generic, inconsistent, or accidental." ## When to use it -Reach for `/typeset` when the text on a page looks like default typography instead of designed typography. Muddy hierarchy, three sizes that look the same, body copy at 14px, a display font that is actually just Inter bold, headlines with no kerning attention. +Reach for `/impeccable typeset` when the text on a page looks like default typography instead of designed typography. Muddy hierarchy, three sizes that look the same, body copy at 14px, a display font that is actually just Inter bold, headlines with no kerning attention. Common triggers: "hierarchy feels flat", "readability is off", "fonts look generic". @@ -23,7 +23,7 @@ It then fixes what it finds: picks distinctive typefaces, builds a modular scale ## Try it ``` -/typeset the article layout +/impeccable typeset the article layout ``` Expected diff: @@ -38,5 +38,5 @@ Expected diff: ## Pitfalls - **Asking for a new font without context.** Typeset will pick based on the `.impeccable.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic. -- **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/layout`. +- **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/impeccable layout`. - **Expecting fluid clamp scales on app UIs.** Typeset uses fixed rem scales for app interfaces. Fluid typography is for marketing and content pages where line length varies dramatically. diff --git a/content/site/tutorials/critique-with-overlay.md b/content/site/tutorials/critique-with-overlay.md index 5ba0a1b98..e370d14ca 100644 --- a/content/site/tutorials/critique-with-overlay.md +++ b/content/site/tutorials/critique-with-overlay.md @@ -1,6 +1,6 @@ --- title: Critique with the visual overlay -tagline: "Use /critique plus the browser overlay to review a live page with ground truth." +tagline: "Use /impeccable critique plus the browser overlay to review a live page with ground truth." order: 2 description: "Run a full design critique that combines LLM assessment, the automated detector, and a live browser overlay so you can see exactly which elements trigger which anti-patterns on the page you're looking at." --- @@ -17,12 +17,12 @@ Total time: about ten minutes. - A harness with browser automation available (Claude Code with the Chrome extension, or similar). - A page you want to critique, either local (`localhost:3000/pricing`) or deployed. -## Step 1. Run /critique +## Step 1. Run /impeccable critique From your harness, run: ``` -/critique the pricing page at localhost:3000/pricing +/impeccable critique the pricing page at localhost:3000/pricing ``` The skill kicks off two independent assessments in parallel. They run in separate sub-agents so one does not bias the other. @@ -58,14 +58,14 @@ Every outlined element has a floating label naming the rule that fired. Hover an You have three ways to open it: 1. **[Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf)**: one-click activation on any page. Click the Impeccable icon in the toolbar and every anti-pattern gets highlighted instantly. -2. **Inside `/critique`**: the skill opens a browser tab labeled `[Human]` with the detector active during the browser portion of the assessment. You do not need to do anything extra. +2. **Inside `/impeccable critique`**: the skill opens a browser tab labeled `[Human]` with the detector active during the browser portion of the assessment. You do not need to do anything extra. 3. **Standalone CLI**: `npx impeccable live` starts a local server that serves the detector script. You inject it into any page by adding a ` - - - - - Impeccable Command Cheatsheet - - - - - - - - - - -
- - - Impeccable - -
- - - - 18k - - -
-
- -
-

Impeccable Commands

-

Quick reference for all 18 design commands

-
- -
-

Loading commands...

-
- - - - - - diff --git a/public/css/main.css b/public/css/main.css index 0cacbeca6..d2c15a660 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -1666,6 +1666,11 @@ code { margin: 0 0 var(--spacing-xs) 0; } +.mobile-cmd-namespace { + color: var(--color-ash); + font-weight: 400; +} + .mobile-cmd-desc { font-size: 0.875rem; color: var(--color-charcoal); @@ -2741,7 +2746,7 @@ code { /* Row 1: full-width primary install card with internal 2-column split */ .install-row-primary { display: grid; - grid-template-columns: 1.1fr 0.9fr; + grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: start; margin: 0 0 var(--spacing-xl); @@ -2751,19 +2756,221 @@ code { min-width: 0; } -.install-primary-main { +.install-primary-main, +.install-primary-howto { display: flex; flex-direction: column; min-width: 0; } +.install-primary-howto { + padding-left: var(--spacing-xl); + border-left: 1px solid var(--color-mist); +} + +/* The "Use it" side uses the hero body copy size so both columns feel balanced + in typographic weight, not just pixel width. */ +.install-primary-howto .install-path-desc { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-ink); + max-width: 48ch; +} + +.install-primary-howto .install-path-desc em { + font-family: var(--font-display); + font-style: italic; + font-weight: 500; + color: var(--color-accent); +} + .install-primary-alts { display: flex; flex-direction: column; gap: var(--spacing-lg); min-width: 0; - padding-left: var(--spacing-xl); - border-left: 1px solid var(--color-mist); +} + +/* Collapsible "other install methods" under the main install card. */ +.install-alts-collapse { + margin-top: var(--spacing-md); + border-top: 1px solid var(--color-mist); + padding-top: var(--spacing-md); +} + +.install-alts-collapse[open] { + padding-bottom: var(--spacing-sm); +} + +.install-alts-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-sm); + cursor: pointer; + list-style: none; + padding: 0.25rem 0; + user-select: none; +} + +.install-alts-summary::-webkit-details-marker { + display: none; +} + +.install-alts-summary-label { + font-family: var(--font-body); + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--color-ash); +} + +.install-alts-chevron { + color: var(--color-ash); + transition: transform 0.2s ease; + flex-shrink: 0; +} + +.install-alts-collapse[open] .install-alts-chevron { + transform: rotate(180deg); +} + +.install-alts-collapse[open] .install-primary-alts { + margin-top: var(--spacing-md); +} + +/* Editorial "How to use" step list on the right side of the install row. + Uses display-font numerals as prominent visual anchors, generous vertical + rhythm, and body text at the same scale as the hero copy for hierarchy + parity with the rest of the page. */ +.install-howto-steps { + list-style: none; + counter-reset: howto-step; + padding: 0; + margin: var(--spacing-lg) 0 0; + display: flex; + flex-direction: column; + gap: var(--spacing-lg); +} + +.install-howto-steps > li { + counter-increment: howto-step; + position: relative; + padding-left: 3rem; + min-height: 2.5rem; +} + +.install-howto-steps > li::before { + content: counter(howto-step, decimal-leading-zero); + position: absolute; + left: 0; + top: -0.1em; + font-family: var(--font-display); + font-size: 1.75rem; + font-weight: 400; + font-style: italic; + color: var(--color-accent); + line-height: 1; + letter-spacing: -0.02em; +} + +.install-howto-step-label { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 600; + color: var(--color-ink); + margin-bottom: 0.35rem; + line-height: 1.3; + letter-spacing: -0.005em; +} + +.install-howto-steps > li p { + margin: 0; + font-size: 0.9375rem; + color: var(--color-ink); + line-height: 1.6; +} + +.install-howto-steps code { + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 500; + color: var(--color-ink); + background: var(--color-accent-dim); + padding: 1px 6px; + border-radius: 3px; + white-space: nowrap; +} + +.install-howto-steps .install-path-slash { + color: var(--color-accent); +} + +.install-howto-footer { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-lg); + margin-top: var(--spacing-xl); + padding-top: var(--spacing-lg); + border-top: 1px solid var(--color-mist); +} + +.install-howto-link { + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 500; + color: var(--color-accent); + text-decoration: none; + display: inline-flex; + align-items: baseline; + gap: 0.35em; + transition: gap 0.2s var(--ease-out-quart, ease); +} + +.install-howto-link:hover { + gap: 0.6em; +} + +.install-howto-link span { + display: inline-block; + transition: transform 0.2s var(--ease-out-quart, ease); +} + +.install-howto-link:hover span { + transform: translateX(2px); +} + +/* Two-tool grid inside the "Anti-pattern tools" step. */ +.install-tool-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--spacing-lg); + margin-top: var(--spacing-md); +} + +.install-tool { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); + min-width: 0; +} + +.install-tool-label { + font-family: var(--font-body); + font-size: 0.9375rem; + font-weight: 600; + color: var(--color-ink); + display: flex; + align-items: center; + gap: 0.4rem; +} + +.install-tool-desc { + margin: 0; + font-size: 0.8125rem; + color: var(--color-charcoal); + line-height: 1.55; } .install-alts-label { @@ -3025,6 +3232,7 @@ code { color: var(--color-accent); } + .install-path-subcommands { display: flex; flex-direction: column; @@ -3311,13 +3519,17 @@ a.install-updated-ref:hover { max-width: calc(100vw - var(--spacing-md) * 2); } - .install-primary-alts { + .install-primary-howto { padding-left: 0; padding-top: var(--spacing-lg); border-left: none; border-top: 1px solid var(--color-mist); } + .install-tool-grid { + grid-template-columns: 1fr; + } + .install-path-primary { margin-bottom: var(--spacing-sm); padding: var(--spacing-md); diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css index 716b13307..c4be084bd 100644 --- a/public/css/sub-pages.css +++ b/public/css/sub-pages.css @@ -486,138 +486,283 @@ main#main { padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(4rem, 8vw, 6rem); } -.skills-overview-content { - max-width: 720px; +/* ============================================ + DOCS OVERVIEW — /skills page + ============================================ */ + +.docs-overview { + max-width: 920px; } -.skills-overview-header { - margin-bottom: clamp(2.5rem, 5vw, 4rem); +.docs-overview-header { + margin-bottom: clamp(2rem, 4vw, 3rem); } -.skills-overview-header .sub-page-lede a { - color: var(--color-ink); - text-decoration: underline; - text-decoration-thickness: 1px; - text-decoration-color: var(--color-accent); - text-underline-offset: 4px; - font-family: var(--font-mono); - font-weight: 500; -} - -.skills-overview-howto { - padding: var(--spacing-lg) var(--spacing-lg); - background: var(--color-cream); - border: 1px solid var(--color-mist); - border-radius: 10px; - margin-bottom: clamp(2.5rem, 5vw, 4rem); -} - -.skills-overview-howto-title { - font-family: var(--font-display); - font-size: 1.25rem; - font-style: italic; - font-weight: 500; - color: var(--color-ink); - margin-bottom: var(--spacing-sm); -} - -.skills-overview-howto p { - font-size: 0.9375rem; - line-height: 1.7; - color: var(--color-charcoal); +.docs-overview-header .sub-page-lede { max-width: 60ch; } -.skills-overview-howto a { - color: var(--color-ink); - font-family: var(--font-mono); - font-size: 0.875em; - font-weight: 500; - text-decoration: none; - border-bottom: 1px solid var(--color-accent); - transition: color var(--duration-fast) var(--ease-out); +/* Home command hero — the /impeccable root card that sits above the + category sections. It gets special treatment because it's the entry + point, not just another command in a category. */ +.docs-home-card { + display: grid; + grid-template-columns: 1.1fr 1fr; + gap: clamp(1.5rem, 3vw, 2.5rem); + padding: clamp(1.5rem, 3vw, 2rem); + background: #ffffff; + border: 1px solid var(--color-mist); + border-radius: 12px; + margin-bottom: clamp(2.5rem, 5vw, 3.5rem); } -.skills-overview-howto a:hover { +.docs-home-card-identity { + min-width: 0; +} + +.docs-home-card-eyebrow { + display: inline-block; + font-family: var(--font-body); + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.12em; color: var(--color-accent); + margin-bottom: var(--spacing-sm); } -.skills-overview-categories { +.docs-home-card-title { + font-family: var(--font-display); + font-size: clamp(2rem, 4vw, 2.75rem); + font-weight: 500; + font-style: italic; + color: var(--color-ink); + letter-spacing: -0.02em; + line-height: 1; + margin: 0 0 var(--spacing-sm) 0; +} + +.docs-home-card-tagline { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 500; + color: var(--color-ink); + line-height: 1.5; + margin: 0 0 var(--spacing-md) 0; + max-width: 32ch; +} + +.docs-home-card-desc { + font-size: 0.9375rem; + line-height: 1.6; + color: var(--color-ink); + max-width: 36ch; + margin: 0; +} + +.docs-home-card-desc code { + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 500; + color: var(--color-ink); + background: var(--color-accent-dim); + padding: 1px 6px; + border-radius: 3px; +} + +.docs-home-card-modes { + list-style: none; + padding: 0; + margin: 0; display: flex; flex-direction: column; - gap: clamp(2rem, 4vw, 3rem); + gap: var(--spacing-md); } -.skills-overview-category { - padding-bottom: clamp(2rem, 4vw, 2.5rem); - border-bottom: 1px solid var(--color-mist); +.docs-home-card-modes a { + display: block; + text-decoration: none; + transition: padding var(--duration-fast) var(--ease-out, ease); } -.skills-overview-category:last-child { - border-bottom: none; +.docs-home-card-modes a:hover { + padding-left: 6px; } -.skills-overview-category-meta { +.docs-home-mode-label { + display: block; + font-family: var(--font-mono); + font-size: 0.875rem; + font-weight: 600; + color: var(--color-ink); + margin-bottom: 2px; +} + +.docs-home-mode-slash { + color: var(--color-accent); + font-weight: 400; +} + +.docs-home-mode-hint { + display: block; + font-family: var(--font-body); + font-size: 0.8125rem; + color: var(--color-charcoal); + line-height: 1.4; +} + +/* Category sections with rich command cards */ +.docs-categories { + display: flex; + flex-direction: column; + gap: clamp(2.5rem, 5vw, 3.5rem); +} + +.docs-category-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-md); - margin-bottom: 6px; + margin-bottom: var(--spacing-md); + padding-bottom: var(--spacing-sm); + border-bottom: 1px solid var(--color-mist); } -.skills-overview-category-title { +.docs-category-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; font-style: italic; color: var(--color-ink); letter-spacing: -0.01em; + line-height: 1.1; + margin: 0 0 4px 0; } -.skills-overview-category-count { +.docs-category-desc { + font-size: 0.875rem; + line-height: 1.5; + color: var(--color-charcoal); + max-width: 58ch; + margin: 0; +} + +.docs-category-count { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-ash); + white-space: nowrap; + flex-shrink: 0; } -.skills-overview-category-desc { - font-size: 0.9375rem; - line-height: 1.7; - color: var(--color-charcoal); - max-width: 58ch; - margin-bottom: var(--spacing-md); -} - -.skills-overview-chips { +/* Dense two-column rows for each command: name on the left, description + + relationship on the right. Mirrors the original cheatsheet density. */ +.docs-category-rows { display: flex; - flex-wrap: wrap; - gap: 8px; + flex-direction: column; } -.skills-overview-chip { - display: inline-flex; - align-items: center; - padding: 6px 12px; +.command-row { + display: grid; + grid-template-columns: minmax(11rem, 13rem) 1fr; + gap: var(--spacing-lg); + padding: var(--spacing-md) 0; + border-bottom: 1px solid var(--color-mist); + align-items: baseline; +} + +.command-row:last-child { + border-bottom: none; +} + +.command-row-name { font-family: var(--font-mono); - font-size: 0.8125rem; - font-weight: 500; + font-size: 0.875rem; + font-weight: 600; color: var(--color-ink); - background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 99px; - text-decoration: none; - transition: border-color var(--duration-fast) var(--ease-out), - color var(--duration-fast) var(--ease-out), - background var(--duration-fast) var(--ease-out); + line-height: 1.4; + min-width: 0; } -.skills-overview-chip:hover { +.command-row-name a { + color: inherit; + text-decoration: none; + border-bottom: 1px solid transparent; + transition: border-color var(--duration-fast) var(--ease-out, ease); +} + +.command-row-name a:hover { + border-bottom-color: var(--color-accent); +} + +.command-row-namespace { + color: var(--color-ash); + font-weight: 400; +} + +.command-row-beta { + display: inline-block; + font-family: var(--font-mono); + font-size: 0.5625rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--color-accent); + border: 1px solid var(--color-accent); + border-radius: 3px; + padding: 1px 5px; + vertical-align: 1px; + margin-left: 4px; +} + +.command-row-info { + min-width: 0; +} + +.command-row-desc { + font-family: var(--font-body); + font-size: 0.875rem; + line-height: 1.55; + color: var(--color-ink); + margin: 0; +} + +.command-row-rel { + font-family: var(--font-body); + font-size: 0.75rem; + line-height: 1.5; + color: var(--color-ash); + margin-top: 4px; +} + +.command-row-rel a { + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-charcoal); + text-decoration: none; + border-bottom: 1px solid var(--color-mist); + transition: color var(--duration-fast) var(--ease-out, ease), + border-color var(--duration-fast) var(--ease-out, ease); +} + +.command-row-rel a:hover { color: var(--color-accent); border-color: var(--color-accent); - background: var(--color-cream); +} + +/* Narrow viewport: stack name above info */ +@media (max-width: 820px) { + .docs-home-card { + grid-template-columns: 1fr; + } + + .command-row { + grid-template-columns: 1fr; + gap: 4px; + } } /* ============================================ @@ -1686,6 +1831,24 @@ main#main { font-weight: 300; } +/* Sub-commands: show "/impeccable" as a smaller label above the command name + so it stacks and the command name stays at full display size. */ +.skill-detail-title-namespace { + display: block; + font-family: var(--font-body); + font-size: 0.9375rem; + font-weight: 500; + color: var(--color-ash); + letter-spacing: 0.04em; + margin-bottom: 0.4em; + line-height: 1; +} + +.skill-detail-title-namespace .skill-detail-title-slash { + color: var(--color-accent); + font-weight: 400; +} + .skill-detail-tagline { font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.125rem); diff --git a/public/css/workflow.css b/public/css/workflow.css index 8dfa984dd..e0321b625 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -181,6 +181,24 @@ font-weight: 300; } +/* Sub-commands: stack the /impeccable namespace as a smaller label above the + command name so the command name stays at full display size and never + clips (e.g., "overdrive" is long). */ +.spread-command-name .spread-namespace { + display: block; + font-family: var(--font-body); + font-size: 0.875rem; + font-weight: 500; + color: var(--color-ash); + letter-spacing: 0.04em; + margin-bottom: 0.4em; +} + +.spread-command-name .spread-namespace .spread-slash { + color: var(--spread-accent); + font-weight: 400; +} + .spread-command-name .beta-badge { font-family: var(--font-body); font-size: 0.55rem; diff --git a/public/index.html b/public/index.html index bc9012563..387083c39 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ Impeccable: The missing upgrade to Anthropic's impeccable skill - + @@ -21,7 +21,7 @@ - + @@ -29,7 +29,7 @@ - + @@ -57,7 +57,7 @@
@@ -88,15 +88,15 @@

Impeccable

Design fluency for AI harnesses

-

Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 18 commands to steer the result.

-

Impeccable teaches your AI real design and gives you 18 commands to steer the result.

+

Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 20 commands to steer the result.

+

Impeccable teaches your AI real design and gives you 20 commands to steer the result.

What's included
- Enhanced impeccable skill + anti-patterns + Impeccable agent skill with 20 design commands · - 18 design commands: /polish, /audit, /typeset, /overdrive... + Optional CLI + Chrome extension
@@ -117,7 +117,7 @@
-

v2.1: Streamlined from 21 to 18 commands

+

v2.2: 1 skill, 20 commands

@@ -203,7 +203,7 @@

The Language

-

18 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

+

20 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

@@ -213,7 +213,7 @@
-

Pick any command to see it in action. View cheatsheet →

+

Pick any command to see it in action. Full command reference →

@@ -305,7 +305,7 @@
Three ways to use it -

The Chrome extension on any site, embedded in /critique during an AI design review, or standalone via npx impeccable live.

+

The Chrome extension on any site, embedded in /impeccable critique during an AI design review, or standalone via npx impeccable live.

Impeccable Chrome extension panel listing detected anti-patterns @@ -327,11 +327,12 @@

Get Started

- +
+
-

1Install the skills Recommended

-

18 commands that steer your AI toward better design, in real time. The full Impeccable experience.

+

1Install the skill Recommended

+

One agent skill that teaches your AI to design, with 20 commands bundled inside.

@@ -358,90 +359,115 @@
-
- Then run /impeccable teach to set up your project's design context. -
+ +
+ + Other install methods + + +
+
+ Claude Code plugin +
+ $ + /plugin marketplace add pbakaus/impeccable + +
+ Then open /plugin in Claude Code +
+ +
+ Manual download all 11 providers +
+ + +
+
+
+
- -
- Other install methods + +
+

2Use it

+

Impeccable gives you a shared design vocabulary with your AI. 20 commands (polish, audit, critique, typeset, and more) that each encode a specific design discipline, so you can steer with precision.

-
- Claude Code plugin -
- $ - /plugin marketplace add pbakaus/impeccable - -
- Then open /plugin in Claude Code -
+
    +
  1. +
    Let it think for you
    +

    Say /impeccable redo this hero section and let the skill pick the right approach. No command names to memorize.

    +
    2. +
  2. +
    Or steer directly
    +

    Type /impeccable alone to see the full vocabulary, or reach for a command by name: /impeccable audit checkout, /impeccable polish pricing, /impeccable critique onboarding.

    +
    3. +
  3. +
    Pin your favorites
    +

    Use one all the time? /impeccable pin audit gives you /audit as a standalone shortcut.

    +
    4. +
-
- Manual download all 11 providers -
- - -
+
+ Full walkthrough + Browse the vocabulary
- +
- +
-

2Add the CLI Beta

+

3Add the anti-pattern tools Optional
-

Scan any file, directory, or live URL for anti-patterns from the terminal. Catches gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules across HTML, CSS, JSX/TSX, Vue, and Svelte. Use it in CI pipelines, pre-commit hooks, or one-off audits to keep AI slop out of production.

+

Two ways to catch AI slop outside the skill: a CLI for the terminal and a Chrome extension for any webpage. Both catch gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules.

-
-
- $ - npm i -g impeccable - +
+
+
CLI Beta
+

Scan files, directories, or live URLs from the terminal. Drop into CI pipelines, pre-commit hooks, or one-off audits.

+
+
+ $ + npm i -g impeccable + +
+ Or use npx impeccable detect src/ without installing. +
+

Full command reference on npm →

+
+ +
+
Chrome extension
+

Click the toolbar icon on any page and every anti-pattern lights up right where it lives. Works on localhost, staging, production, or anyone else's site.

+

Install from Chrome Web Store →

- Or use npx impeccable detect src/ directly without installing.
- -

Full command reference on npm →

-
-
- - -
- -

3Browser extension

- - -
-

Click the toolbar icon on any page and every anti-pattern lights up right where it lives: gradient text, purple palettes, nested cards, tiny body text, and the rest. Works on your localhost, staging, production, or anyone else's site. Great for spot-checking competitors, reviewing PRs visually, or just browsing the web with a sharper eye.

-

Install from Chrome Web Store →

@@ -515,7 +541,7 @@
  • Chrome DevTools extension. One-click detection on any page: yours, staging, production, or someone else's. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page. In Chrome Web Store review.
  • /critique got teeth. Persona sub-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place.
  • New ways to create with Impeccable. /shape runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written. /impeccable craft chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid.
    • -
  • New docs site. Top-level Docs, Anti-Patterns, and Visual Mode sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two tutorials, and 38 rule cards with inline visual examples.
    • +
  • New docs site. Top-level Docs, Anti-Patterns, and Visual Mode sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two tutorials, and 38 rule cards with inline visual examples.
  • New harness: Rovo Dev. 11 supported AI tools total.
    • @@ -649,7 +675,7 @@
    Commands or skills aren't appearing. What do I do?
    -

    For commands: Type / in your AI harness and look for commands like /audit, /polish, etc. If they don't appear, double-check the files are in the correct location.

    +

    For commands: Type /impeccable in your AI harness and look for commands like /impeccable audit, /impeccable polish, etc. If they don't appear, double-check the files are in the correct location.

    For skills: Skills are applied automatically when relevant. To verify, explicitly mention "use the impeccable skill" in your prompt. This forces the AI to acknowledge and apply it.

    Tool-specific setup:

      @@ -706,10 +732,10 @@
      diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index 133eec4dd..d74881b96 100644 --- a/public/js/components/framework-viz.js +++ b/public/js/components/framework-viz.js @@ -25,10 +25,9 @@ const categoryLabels = { }; const commandSymbols = { - 'shape': 'Sh', - 'impeccable craft': 'Ic', 'impeccable': 'Im', - 'overdrive': 'Od', + 'craft': 'Cf', + 'shape': 'Sh', 'critique': 'Cr', 'audit': 'Au', 'typeset': 'Ty', @@ -38,33 +37,32 @@ const commandSymbols = { 'delight': 'De', 'bolder': 'Bo', 'quieter': 'Qu', + 'overdrive': 'Od', 'distill': 'Di', 'clarify': 'Cl', 'adapt': 'Ad', 'polish': 'Po', 'optimize': 'Op', 'harden': 'Ha', - 'impeccable teach': 'It', - 'impeccable extract': 'Ie' + 'teach': 'Te', + 'extract': 'Ex' }; const commandNumbers = { - 'shape': 0, - 'impeccable craft': 1, 'impeccable': 2, 'overdrive': 3, + 'impeccable': 1, 'craft': 2, 'shape': 3, 'critique': 4, 'audit': 5, 'typeset': 6, 'layout': 7, 'colorize': 8, 'animate': 9, - 'delight': 10, 'bolder': 11, 'quieter': 12, - 'distill': 13, 'clarify': 14, 'adapt': 15, - 'polish': 16, 'optimize': 17, 'harden': 18, - 'impeccable teach': 19, 'impeccable extract': 20 + 'delight': 10, 'bolder': 11, 'quieter': 12, 'overdrive': 13, + 'distill': 14, 'clarify': 15, 'adapt': 16, + 'polish': 17, 'optimize': 18, 'harden': 19, + 'teach': 20, 'extract': 21 }; -// Map sub-commands to their display label and scroll target -const commandDisplay = { - 'impeccable craft': { label: '/impeccable craft', scrollTo: 'impeccable' }, - 'impeccable teach': { label: '/impeccable teach', scrollTo: 'impeccable' }, - 'impeccable extract': { label: '/impeccable extract', scrollTo: 'impeccable' }, -}; +// After the v3.0 consolidation, all commands except the root "impeccable" are +// sub-commands of /impeccable. The renderer handles the display label directly +// (bare name for sub-commands, "/impeccable" for the root). This map is kept +// as an extension point for any future per-command display overrides. +const commandDisplay = {}; export class PeriodicTable { constructor(container) { @@ -130,11 +128,12 @@ export class PeriodicTable { const leadsTo = toArray(rel.leadsTo); const combinesWith = toArray(rel.combinesWith); - // Build relationships line + // Build relationships line. Command names are shown bare (no slash) + // because they're names, not invocations — the invocation is /impeccable . let relParts = []; - if (pairs.length > 0) relParts.push(`pairs with ${pairs.map(p => '/' + p).join(', ')}`); - if (combinesWith.length > 0) relParts.push(`+ ${combinesWith.map(p => '/' + p).join(', ')}`); - if (leadsTo.length > 0) relParts.push(`then ${leadsTo.map(p => '/' + p).join(', ')}`); + if (pairs.length > 0) relParts.push(`pairs with ${pairs.join(', ')}`); + if (combinesWith.length > 0) relParts.push(`+ ${combinesWith.join(', ')}`); + if (leadsTo.length > 0) relParts.push(`then ${leadsTo.join(', ')}`); // Strip category prefix from flow for cleaner display const flow = (rel.flow || '').replace(/^[^:]+:\s*/, ''); @@ -222,7 +221,13 @@ export class PeriodicTable { const el = document.createElement('button'); el.type = 'button'; - el.setAttribute('aria-label', `/${cmd} command - ${categoryLabels[category]}`); + // Build accessible label with the full invocation + const invocation = cmd === 'impeccable' + ? '/impeccable' + : cmd.startsWith('impeccable ') + ? `/${cmd}` + : `/impeccable ${cmd}`; + el.setAttribute('aria-label', `${invocation} command - ${categoryLabels[category]}`); el.style.cssText = ` width: 56px; height: 64px; @@ -266,20 +271,28 @@ export class PeriodicTable { symbol.textContent = commandSymbols[cmd]; el.appendChild(symbol); - // Command name + // Command name. The root "impeccable" is shown with its slash as the + // entry point. All other commands are sub-commands and show their + // bare name (the invocation is /impeccable ). const name = document.createElement('div'); name.style.cssText = ` font-family: var(--font-mono); - font-size: ${display ? '6.5px' : '8px'}; + font-size: 8px; color: ${colors.text}; opacity: 0.7; margin-top: 3px; text-align: center; max-width: 52px; line-height: 1.3; - ${display ? '' : 'white-space: nowrap;'} + white-space: nowrap; `; - name.textContent = display ? display.label : `/${cmd}`; + if (cmd === 'impeccable') { + name.textContent = '/impeccable'; + } else if (display) { + name.textContent = display.label; + } else { + name.textContent = cmd; + } el.appendChild(name); // Beta badge diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index 543ca1a16..cd1673482 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -71,8 +71,10 @@ function renderDesktopLayout(container, commands) { let startIndex = -1; - // Filter out deprecated shims and sub-commands (no standalone demos) - const deprecated = new Set(['teach-impeccable', 'frontend-design', 'arrange', 'normalize', 'onboard', 'extract', 'impeccable craft', 'impeccable teach', 'impeccable extract']); + // Filter out deprecated shims. craft, teach, extract used to be filtered + // too (when they were rendered as 'impeccable craft' etc.) but are now + // first-class sub-commands that should appear in the gallery. + const deprecated = new Set(['teach-impeccable', 'frontend-design', 'arrange', 'normalize', 'onboard', 'impeccable craft', 'impeccable teach', 'impeccable extract']); const filteredCommands = commands.filter(c => !deprecated.has(c.id)); const categoryOrder = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system']; @@ -82,12 +84,12 @@ function renderDesktopLayout(container, commands) { }; // Preferred order within each category (unlisted commands append at end) const categoryCommandOrder = { - 'create': ['impeccable', 'shape'], + 'create': ['impeccable', 'craft', 'shape'], 'evaluate': ['critique', 'audit'], - 'refine': ['typeset', 'arrange', 'colorize', 'animate', 'delight', 'bolder', 'quieter', 'onboard', 'overdrive'], + 'refine': ['typeset', 'layout', 'colorize', 'animate', 'delight', 'bolder', 'quieter', 'overdrive'], 'simplify': ['distill', 'clarify', 'adapt'], - 'harden': ['normalize', 'polish', 'optimize', 'harden'], - 'system': ['extract'] + 'harden': ['polish', 'optimize', 'harden'], + 'system': ['teach', 'extract'] }; const grouped = {}; filteredCommands.forEach(cmd => { @@ -133,7 +135,13 @@ function renderDesktopLayout(container, commands) { const fisheyeHTML = filteredCommands.map((cmd, i) => { const cat = commandCategories[cmd.id] || 'other'; const isBeta = betaCommands.includes(cmd.id); - return ``; + // The root skill is shown as "/impeccable", everything else is a sub-command + // displayed without a slash (invocation is /impeccable ) + const isRoot = cmd.id === 'impeccable'; + const label = isRoot + ? `/impeccable` + : cmd.id; + return ``; }).join(''); container.innerHTML = ` @@ -193,12 +201,20 @@ function renderSpread(cmd, index, isActive) { } } + // The root skill is rendered as /impeccable; sub-commands are rendered as + // /impeccable on a smaller line above the command name, so the command name + // stays the visual anchor at full display size. + const isRoot = cmd.id === 'impeccable'; + const nameHTML = isRoot + ? `/impeccable` + : `/impeccable${cmd.id}`; + return `
      ${categoryLabels[cat] || cat} -

      /${cmd.id}${isBeta ? 'BETA' : ''}

      -

      ${cmd.description}

      +

      ${nameHTML}${isBeta ? 'BETA' : ''}

      +

      ${cmd.tagline || cmd.description}

      ${flowHTML}
      @@ -466,9 +482,11 @@ function truncateDescription(text, maxLen = 120) { function renderMobileLayout(container, commands) { // Build carousel pills + // Carousel pills show bare command names for sub-commands, and /impeccable + // for the root entry. const carouselHTML = commands.map((cmd, i) => ` `).join(''); @@ -477,18 +495,24 @@ function renderMobileLayout(container, commands) { const relationship = commandRelationships[cmd.id]; let relationshipHTML = ''; + // Relationships show bare command names (e.g., "pairs with quieter") + // because the invocation is /impeccable , not /. if (relationship) { if (relationship.pairs) { - relationshipHTML = `
      ↔ pairs with /${relationship.pairs}
      `; + relationshipHTML = `
      ↔ pairs with ${relationship.pairs}
      `; } else if (relationship.leadsTo && relationship.leadsTo.length > 0) { - relationshipHTML = `
      → leads to ${relationship.leadsTo.map(c => `/${c}`).join(', ')}
      `; + relationshipHTML = `
      → leads to ${relationship.leadsTo.map(c => `${c}`).join(', ')}
      `; } } + const cardName = cmd.id === 'impeccable' + ? '/impeccable' + : `/impeccable ${cmd.id}`; + return `
      -

      /${cmd.id}

      -

      ${cmd.description}

      +

      ${cardName}

      +

      ${cmd.tagline || cmd.description}

      ${relationshipHTML}
      `; diff --git a/public/js/data.js b/public/js/data.js index d3858a50b..4861eb896 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -53,9 +53,9 @@ export const skillReferenceDomains = [ ]; export const commandProcessSteps = { - 'shape': ['Interview', 'Synthesize', 'Brief', 'Confirm'], - 'impeccable craft': ['Shape', 'Reference', 'Build', 'Iterate'], 'impeccable': ['Direct', 'Design', 'Build', 'Refine'], + 'craft': ['Shape', 'Reference', 'Build', 'Iterate'], + 'shape': ['Interview', 'Synthesize', 'Brief', 'Confirm'], 'overdrive': ['Assess', 'Choose', 'Build', 'Polish'], 'critique': ['Evaluate', 'Critique', 'Prioritize', 'Suggest'], 'audit': ['Scan', 'Document', 'Prioritize', 'Recommend'], @@ -72,15 +72,15 @@ export const commandProcessSteps = { 'polish': ['Discover', 'Review', 'Refine', 'Verify'], 'optimize': ['Profile', 'Identify', 'Improve', 'Measure'], 'harden': ['Test', 'Handle', 'Onboard', 'Validate'], - 'impeccable teach': ['Explore', 'Interview', 'Synthesize', 'Save'], - 'impeccable extract': ['Identify', 'Abstract', 'Migrate', 'Document'] + 'teach': ['Explore', 'Interview', 'Synthesize', 'Save'], + 'extract': ['Identify', 'Abstract', 'Migrate', 'Document'] }; export const commandCategories = { // CREATE - build something new - 'shape': 'create', - 'impeccable craft': 'create', 'impeccable': 'create', + 'craft': 'create', + 'shape': 'create', // EVALUATE - review and assess 'critique': 'evaluate', 'audit': 'evaluate', @@ -102,8 +102,8 @@ export const commandCategories = { 'optimize': 'harden', 'harden': 'harden', // SYSTEM - setup and tooling - 'impeccable teach': 'system', - 'impeccable extract': 'system' + 'teach': 'system', + 'extract': 'system' }; // Skill relationships - now consolidated into impeccable skill @@ -116,10 +116,9 @@ export const skillRelationships = { }; export const commandRelationships = { - 'shape': { flow: 'Create: Plan UX and UI through structured discovery' }, - 'impeccable craft': { flow: 'Create: Full shape-then-build flow with visual iteration' }, 'impeccable': { flow: 'Create: Freeform design with full design intelligence' }, - 'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Refine: Technically extraordinary effects' }, + 'craft': { flow: 'Create: Full shape-then-build flow with visual iteration' }, + 'shape': { flow: 'Create: Plan UX and UI through structured discovery' }, 'critique': { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'layout'], flow: 'Evaluate: UX and design review with scoring' }, 'audit': { leadsTo: ['harden', 'optimize', 'adapt', 'clarify'], flow: 'Evaluate: Technical quality audit' }, 'typeset': { combinesWith: ['bolder', 'polish'], flow: 'Refine: Fix typography and type hierarchy' }, @@ -129,12 +128,13 @@ export const commandRelationships = { 'delight': { combinesWith: ['bolder', 'animate'], flow: 'Refine: Add personality and joy' }, 'bolder': { pairs: 'quieter', flow: 'Refine: Amplify timid designs' }, 'quieter': { pairs: 'bolder', flow: 'Refine: Tone down aggressive designs' }, + 'overdrive': { combinesWith: ['animate', 'delight'], flow: 'Refine: Technically extraordinary effects' }, 'distill': { combinesWith: ['quieter', 'polish'], flow: 'Simplify: Strip to essence' }, 'clarify': { combinesWith: ['polish', 'adapt'], flow: 'Simplify: Improve UX copy' }, 'adapt': { combinesWith: ['polish', 'clarify'], flow: 'Simplify: Adapt for different contexts' }, 'polish': { flow: 'Harden: Final pass and design system alignment' }, 'optimize': { flow: 'Harden: Performance improvements' }, 'harden': { combinesWith: ['optimize'], flow: 'Harden: Edge cases, onboarding, and error handling' }, - 'impeccable teach': { flow: 'System: One-time project design context setup' }, - 'impeccable extract': { flow: 'System: Extract design system components and tokens' } + 'teach': { flow: 'System: One-time project design context setup' }, + 'extract': { flow: 'System: Extract design system components and tokens' } }; diff --git a/public/js/demo-renderer.js b/public/js/demo-renderer.js index 7247e3a97..8d6121489 100644 --- a/public/js/demo-renderer.js +++ b/public/js/demo-renderer.js @@ -61,6 +61,78 @@ export function renderCommandDemo(commandId) {
      `; } + // craft is the full end-to-end flow, show the four stages + if (commandId === 'craft') { + return ` +
      +
      +
      +
      Shape, reference, build, iterate
      +
      +
      +
      + 1. Shape +
      + Runs /impeccable shape internally to build a design brief from discovery questions. No code yet. +
      +
      +
      + 2. Reference +
      + Loads the right reference files for the feature (spatial design, typography, motion, color) based on what the brief calls for. +
      +
      +
      + 3. Build +
      + Implements structure, spacing, type, color, states, motion, responsive. Every decision traces back to the brief. +
      +
      +
      + 4. Visual iteration +
      + Opens the result in a browser, checks against the brief and anti-pattern list, refines until the polish bar is high. +
      +
      +
      The full shape-then-build flow in one command. Best for brand-new features.
      +
      +
      +
      + `; + } + // teach sets up the project's design context, show the flow + if (commandId === 'teach') { + return ` +
      +
      +
      +
      One-time project setup
      +
      +
      +
      + 1. Explore +
      + Scans the codebase for brand assets, existing design tokens, typography, components, and documentation. +
      +
      +
      + 2. Interview +
      + Asks about audience, brand personality, aesthetic direction, and accessibility needs. Skips anything it can infer from the code. +
      +
      +
      + 3. Save +
      + Writes a .impeccable.md file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically. +
      +
      +
      Run once per project. Then forget it exists.
      +
      +
      +
      + `; + } // shape is a planning skill — show the process if (commandId === 'shape') { return ` diff --git a/public/js/generated/counts.js b/public/js/generated/counts.js index 397efb84c..6a9333419 100644 --- a/public/js/generated/counts.js +++ b/public/js/generated/counts.js @@ -1,3 +1,3 @@ // GENERATED by build.js — do not edit -export const COMMAND_COUNT = 18; +export const COMMAND_COUNT = 20; export const DETECTION_COUNT = 25; diff --git a/public/privacy.html b/public/privacy.html index 6944106c6..3a41097f0 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -32,7 +32,7 @@
      diff --git a/public/sitemap.xml b/public/sitemap.xml index 8cc157893..b78f423ef 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -3,67 +3,67 @@ https://impeccable.style/ - 2026-04-08 + 2026-04-10 weekly 1.0 - https://impeccable.style/cheatsheet - 2026-04-08 - monthly - 0.7 - - - https://impeccable.style/gallery - 2026-04-08 - monthly - 0.7 + https://impeccable.style/privacy + 2026-04-10 + yearly + 0.3 - https://impeccable.style/skills - 2026-04-08 + https://impeccable.style/docs + 2026-04-10 weekly 0.9 https://impeccable.style/anti-patterns - 2026-04-08 + 2026-04-10 weekly 0.9 + + https://impeccable.style/visual-mode + 2026-04-10 + weekly + 0.8 + https://impeccable.style/tutorials - 2026-04-08 + 2026-04-10 weekly 0.9 - - https://impeccable.style/skills/adapt2026-04-080.8 - https://impeccable.style/skills/animate2026-04-080.8 - https://impeccable.style/skills/arrange2026-04-080.8 - https://impeccable.style/skills/audit2026-04-080.8 - https://impeccable.style/skills/bolder2026-04-080.8 - https://impeccable.style/skills/clarify2026-04-080.8 - https://impeccable.style/skills/colorize2026-04-080.8 - https://impeccable.style/skills/critique2026-04-080.8 - https://impeccable.style/skills/delight2026-04-080.8 - https://impeccable.style/skills/distill2026-04-080.8 - https://impeccable.style/skills/extract2026-04-080.8 - https://impeccable.style/skills/harden2026-04-080.8 - https://impeccable.style/skills/impeccable2026-04-080.8 - https://impeccable.style/skills/normalize2026-04-080.8 - https://impeccable.style/skills/onboard2026-04-080.8 - https://impeccable.style/skills/optimize2026-04-080.8 - https://impeccable.style/skills/overdrive2026-04-080.8 - https://impeccable.style/skills/polish2026-04-080.8 - https://impeccable.style/skills/quieter2026-04-080.8 - https://impeccable.style/skills/shape2026-04-080.8 - https://impeccable.style/skills/typeset2026-04-080.8 + + https://impeccable.style/docs/impeccable2026-04-100.9 + https://impeccable.style/docs/craft2026-04-100.8 + https://impeccable.style/docs/teach2026-04-100.8 + https://impeccable.style/docs/extract2026-04-100.8 + https://impeccable.style/docs/shape2026-04-100.8 + https://impeccable.style/docs/critique2026-04-100.8 + https://impeccable.style/docs/audit2026-04-100.8 + https://impeccable.style/docs/polish2026-04-100.8 + https://impeccable.style/docs/bolder2026-04-100.8 + https://impeccable.style/docs/quieter2026-04-100.8 + https://impeccable.style/docs/distill2026-04-100.8 + https://impeccable.style/docs/harden2026-04-100.8 + https://impeccable.style/docs/animate2026-04-100.8 + https://impeccable.style/docs/colorize2026-04-100.8 + https://impeccable.style/docs/typeset2026-04-100.8 + https://impeccable.style/docs/layout2026-04-100.8 + https://impeccable.style/docs/delight2026-04-100.8 + https://impeccable.style/docs/overdrive2026-04-100.8 + https://impeccable.style/docs/clarify2026-04-100.8 + https://impeccable.style/docs/adapt2026-04-100.8 + https://impeccable.style/docs/optimize2026-04-100.8 - https://impeccable.style/tutorials/getting-started2026-04-080.8 - https://impeccable.style/tutorials/critique-with-overlay2026-04-080.8 + https://impeccable.style/tutorials/getting-started2026-04-100.8 + https://impeccable.style/tutorials/critique-with-overlay2026-04-100.8 diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index a8f8b7eae..621509328 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -5,7 +5,7 @@ * server/index.js (at module load), so dev and prod share the same * code path and output shape. * - * Output lives under public/skills/, public/anti-patterns/, + * Output lives under public/docs/, public/anti-patterns/, * public/tutorials/, all gitignored. Bun's HTML loader picks them up * the same way it picks up the hand-authored pages. */ @@ -17,6 +17,7 @@ import { CATEGORY_ORDER, CATEGORY_LABELS, CATEGORY_DESCRIPTIONS, + COMMAND_RELATIONSHIPS, LAYER_LABELS, LAYER_DESCRIPTIONS, GALLERY_ITEMS, @@ -119,12 +120,19 @@ ${refBody} const hasDemo = demoHtml.trim().length > 0; + // Sub-commands are accessed via /impeccable . Show "/impeccable" as + // a smaller namespace label above the command name, matching the magazine + // spread treatment so the command name stays at full display size. + const titleHtml = skill.isSubCommand + ? `/impeccable${escapeHtml(skill.id)}` + : `/${escapeHtml(skill.id)}`; + return `
      -

      Skills / ${escapeHtml(categoryLabel)}

      -

      /${escapeHtml(skill.id)}

      +

      Docs / ${escapeHtml(categoryLabel)}

      +

      ${titleHtml}

      ${escapeHtml(tagline)}

      ${metaStrip}
      @@ -135,8 +143,8 @@ ${refBody}
      - SKILL.md - The canonical skill definition your AI harness loads. + ${skill.isSubCommand ? 'reference/' + escapeHtml(skill.id) + '.md' : 'SKILL.md'} + ${skill.isSubCommand ? 'Loaded when the impeccable skill routes to this command.' : 'The canonical skill definition your AI harness loads.'}
      ${bodyHtml} @@ -197,35 +205,28 @@ ${tutorials `; } - // Sub-command links that appear as indented entries after their parent skill. - const SUB_COMMANDS = { - impeccable: [ - { id: 'impeccable-craft', label: '/impeccable craft', href: '/skills/impeccable#craft' }, - { id: 'impeccable-teach', label: '/impeccable teach', href: '/skills/impeccable#teach' }, - { id: 'impeccable-extract', label: '/impeccable extract', href: '/skills/impeccable#extract' }, - ], - }; - - // Then the skills, grouped by category. + // Then the skills, grouped by category. The root "/impeccable" entry is + // shown with its slash; sub-commands are shown as bare names (since the + // invocation is /impeccable ). Within a category the list is + // alphabetical, except /impeccable always pins to the top of Create. for (const category of CATEGORY_ORDER) { - const list = skillsByCategory[category] || []; - if (list.length === 0) continue; + const raw = skillsByCategory[category] || []; + if (raw.length === 0) continue; + const list = [...raw].sort((a, b) => { + if (a.id === 'impeccable') return -1; + if (b.id === 'impeccable') return 1; + return a.id.localeCompare(b.id); + }); html += `

      ${escapeHtml(CATEGORY_LABELS[category])}

        ${list - .flatMap((s) => { + .map((s) => { const isCurrent = current?.kind === 'skill' && current.id === s.id; const attr = isCurrent ? ' aria-current="page"' : ''; - const items = [`
      • /${escapeHtml(s.id)}
        • `]; - const subs = SUB_COMMANDS[s.id]; - if (subs) { - for (const sub of subs) { - items.push(`
      • ${escapeHtml(sub.label)}
        • `); - } - } - return items; + const label = s.id === 'impeccable' ? '/impeccable' : escapeHtml(s.id); + return `
      • ${label}
        • `; }) .join('\n')}
      @@ -244,52 +245,113 @@ ${list * This is the orientation piece: what skills are, how to pick one, * the six categories explained with inline cross-links to detail pages. */ -function renderSkillsOverviewMain(skillsByCategory) { - const totalSkills = Object.values(skillsByCategory).reduce( - (sum, list) => sum + list.length, - 0, - ); +function renderSkillsOverviewMain(skillsByCategory, allSkills) { + // Build a lookup by id so we can pull taglines/descriptions for the cards. + const skillsById = Object.fromEntries(allSkills.map((s) => [s.id, s])); + const commandCount = allSkills.filter((s) => s.id !== 'impeccable').length; + // Short, clean tagline for the home command card. Fall back to the editorial + // tagline if set, otherwise use a default. + const impeccable = skillsById['impeccable']; + const homeTagline = impeccable?.editorial?.frontmatter?.tagline + || 'The design intelligence behind every command.'; + + // Render a single command as a compact row: name on the left, description + // and relationship on the right. Matches the original cheatsheet density. + const renderCommandRow = (skill) => { + const tagline = skill.editorial?.frontmatter?.tagline || skill.description; + const shortTagline = tagline.length > 140 ? tagline.slice(0, 137) + '...' : tagline; + const rel = COMMAND_RELATIONSHIPS[skill.id] || {}; + const isBeta = skill.id === 'overdrive'; + + let metaHtml = ''; + if (rel.pairs) { + metaHtml = `
      Pairs with ${rel.pairs}
      `; + } else if (rel.leadsTo?.length) { + const links = rel.leadsTo.map((c) => `${c}`).join(', '); + metaHtml = `
      Leads to ${links}
      `; + } else if (rel.combinesWith?.length) { + const links = rel.combinesWith.map((c) => `${c}`).join(', '); + metaHtml = `
      Combines with ${links}
      `; + } + + // Row is a
      (not an ) so the inner relationship links are valid. + // The name on the left is the primary link target. + return ` +
      +
      + /impeccable ${escapeHtml(skill.id)}${isBeta ? ' BETA' : ''} +
      +
      +

      ${escapeHtml(shortTagline)}

      + ${metaHtml} +
      +
      `; + }; + + // Render category sections, skipping the Create category's /impeccable root + // (shown as a hero card above) but keeping everything else in place. let categoriesHtml = ''; for (const category of CATEGORY_ORDER) { - const list = skillsByCategory[category] || []; + const list = (skillsByCategory[category] || []).filter((s) => s.id !== 'impeccable'); if (list.length === 0) continue; - const skillChips = list - .map( - (s) => - `/${escapeHtml(s.id)}`, - ) - .join(''); + const rowsHtml = list.map(renderCommandRow).join(''); categoriesHtml += ` -
      -
      -

      ${escapeHtml(CATEGORY_LABELS[category])}

      -

      ${list.length} ${list.length === 1 ? 'skill' : 'skills'}

      -
      -

      ${escapeHtml(CATEGORY_DESCRIPTIONS[category])}

      -
      -${skillChips} +
      +
      +
      +

      ${escapeHtml(CATEGORY_LABELS[category])}

      +

      ${escapeHtml(CATEGORY_DESCRIPTIONS[category])}

      +
      + ${list.length} ${list.length === 1 ? 'command' : 'commands'} +
      +
      +${rowsHtml}
      `; } return ` -
      -
      -

      ${totalSkills} commands

      -

      Skills

      -

      One skill, /impeccable, teaches your AI design. Eighteen commands steer the result. Each command does one job with an opinion about what good looks like.

      +
      +
      +

      1 skill · ${commandCount} commands

      +

      Commands

      +

      Impeccable gives you a shared design vocabulary with your AI. ${commandCount} commands that each encode a specific design discipline, so you can steer with precision. Pick one for the job or let the skill route you automatically.

      -
      -

      How to pick one

      -

      Skills are named after the intent you bring to them. Reviewing something? /critique or /audit. Fixing type? /typeset. Last-mile pass before shipping? /polish. The categories below group skills by the job.

      +
      +
      + The home command +

      /impeccable

      +

      ${escapeHtml(homeTagline)}

      +

      Call /impeccable directly for freeform design work with the full guidebook loaded. Or reach for one of its specialized modes:

      +
      +
      -
      +
      ${categoriesHtml}
      `; @@ -397,7 +459,7 @@ function renderRuleCard(rule) { const layerLabel = LAYER_LABELS[layer] || layer; const layerTitle = LAYER_DESCRIPTIONS[layer] || ''; const skillLink = rule.skillSection - ? `See in /impeccable` + ? `See in /impeccable` : ''; const visual = rule.visual ? `` @@ -500,9 +562,9 @@ function renderVisualModeMain() {

      Three ways to run it

      -

      Inside /critique

      -

      /critique

      -

      The design review skill opens the overlay automatically during its browser assessment pass. You get the deterministic findings highlighted in place while the LLM runs its separate heuristic review.

      +

      Inside /impeccable critique

      +

      /impeccable critique

      +

      The design review command opens the overlay automatically during its browser assessment pass. You get the deterministic findings highlighted in place while the LLM runs its separate heuristic review.

      Standalone CLI

      @@ -579,7 +641,7 @@ ${rules.map(renderRuleCard).join('\n')}

      ${totalRules} rules

      Anti-patterns

      -

      The full catalog of patterns /impeccable teaches against. ${detectedCount} are caught by a deterministic detector (npx impeccable detect or the browser extension). ${llmCount} can only be flagged by /critique's LLM review pass. Want to see them live on real pages? Try Visual Mode.

      +

      The full catalog of patterns /impeccable teaches against. ${detectedCount} are caught by a deterministic detector (npx impeccable detect or the browser extension). ${llmCount} can only be flagged by /impeccable critique's LLM review pass. Want to see them live on real pages? Try Visual Mode.

      @@ -592,7 +654,7 @@ ${rules.map(renderRuleCard).join('\n')}
      CLI
      Deterministic. Runs from npx impeccable detect on files, no browser required.
      Browser
      Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
      -
      LLM only
      No deterministic detector. Caught by /critique during its LLM design review.
      +
      LLM only
      No deterministic detector. Caught by /impeccable critique during its LLM design review.
    @@ -612,7 +674,7 @@ ${sectionsHtml} export async function generateSubPages(rootDir) { const data = await buildSubPageData(rootDir); const outDirs = { - skills: path.join(rootDir, 'public/skills'), + docs: path.join(rootDir, 'public/docs'), antiPatterns: path.join(rootDir, 'public/anti-patterns'), tutorials: path.join(rootDir, 'public/tutorials'), visualMode: path.join(rootDir, 'public/visual-mode'), @@ -626,39 +688,41 @@ export async function generateSubPages(rootDir) { const generated = []; - // Skills index: docs-browser layout with unified sidebar. + // Docs index: the full command reference with rich cards. { const sidebar = renderDocsSidebar(data.skillsByCategory, data.tutorials, null); - const main = renderSkillsOverviewMain(data.skillsByCategory); + const main = renderSkillsOverviewMain(data.skillsByCategory, data.skills); const html = renderPage({ - title: 'Skills | Impeccable', + title: 'Docs | Impeccable', description: - '18 commands that teach your AI harness how to design. Browse by category: create, evaluate, refine, simplify, harden.', + '20 commands that teach your AI harness how to design. Browse by category: create, evaluate, refine, simplify, harden.', bodyHtml: wrapInDocsLayout(sidebar, main), activeNav: 'docs', - canonicalPath: '/skills', + canonicalPath: '/docs', bodyClass: 'sub-page skills-layout-page', }); - const out = path.join(outDirs.skills, 'index.html'); + const out = path.join(outDirs.docs, 'index.html'); fs.writeFileSync(out, html, 'utf-8'); generated.push(out); } - // Skills detail pages: same docs-browser shell as the overview. + // Per-command detail pages: same docs-browser shell as the overview. for (const skill of data.skills) { const sidebar = renderDocsSidebar(data.skillsByCategory, data.tutorials, { kind: 'skill', id: skill.id }); const main = renderSkillDetail(skill, data.knownSkillIds); - const title = `/${skill.id} | Impeccable`; + const title = skill.isSubCommand + ? `/impeccable ${skill.id} | Impeccable` + : `/${skill.id} | Impeccable`; const description = skill.editorial?.frontmatter?.tagline || skill.description; const html = renderPage({ title, description, bodyHtml: wrapInDocsLayout(sidebar, main), activeNav: 'docs', - canonicalPath: `/skills/${skill.id}`, + canonicalPath: `/docs/${skill.id}`, bodyClass: 'sub-page skills-layout-page', }); - const out = path.join(outDirs.skills, `${skill.id}.html`); + const out = path.join(outDirs.docs, `${skill.id}.html`); fs.writeFileSync(out, html, 'utf-8'); generated.push(out); } @@ -703,7 +767,7 @@ export async function generateSubPages(rootDir) { const html = renderPage({ title: 'Visual Mode | Impeccable', description: - 'See every anti-pattern flagged directly on the page. Live detection overlay from Impeccable, available via /critique, npx impeccable live, or the upcoming Chrome extension.', + 'See every anti-pattern flagged directly on the page. Live detection overlay from Impeccable, available via /impeccable critique, npx impeccable live, or the upcoming Chrome extension.', bodyHtml: renderVisualModeMain(), activeNav: 'visual-mode', canonicalPath: '/visual-mode', diff --git a/scripts/build.js b/scripts/build.js index 4668d3cd4..6636eec54 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -27,13 +27,23 @@ import { generateSubPages } from './build-sub-pages.js'; * Also validates that key HTML files reference the correct numbers. */ function generateCounts(rootDir, skills, buildDir) { - // Count active (non-deprecated) user-invocable commands - const activeCommands = skills.filter(s => { - if (!s.userInvocable) return false; - const content = fs.readFileSync(s.filePath, 'utf-8'); - return !content.includes('DEPRECATED'); - }); - const commandCount = activeCommands.length; + // Count active commands. After the v3.0 consolidation, commands are sub-commands + // of /impeccable. Count them from the command router table in SKILL.md. + const impeccableSkill = skills.find(s => s.name === 'impeccable'); + let commandCount; + if (impeccableSkill) { + // Count lines in the router table that have a | `command` | pattern + const routerMatches = impeccableSkill.body.match(/^\| `\w+` \|/gm); + commandCount = routerMatches ? routerMatches.length : 0; + } else { + // Fallback: count user-invocable skills + const activeCommands = skills.filter(s => { + if (!s.userInvocable) return false; + const content = fs.readFileSync(s.filePath, 'utf-8'); + return !content.includes('DEPRECATED'); + }); + commandCount = activeCommands.length; + } // Count detection rules from impeccable package const detectPkgPath = path.join(rootDir, 'src/detect-antipatterns.mjs'); @@ -56,7 +66,6 @@ function generateCounts(rootDir, skills, buildDir) { // Validate counts in key files const filesToCheck = [ 'public/index.html', - 'public/cheatsheet.html', 'README.md', 'NOTICE.md', 'AGENTS.md', @@ -73,7 +82,7 @@ function generateCounts(rootDir, skills, buildDir) { // Check for stale command counts (look for "N commands" or "N skills" patterns) // Strip changelog list content to avoid flagging historical counts const strippedContent = content.replace(/
      [\s\S]*?<\/ul>/g, ''); - const countPattern = /\b(\d+)\s+(design\s+)?(commands|skills|steering commands)/gi; + const countPattern = /\b(\d+)\s+(design\s+)?(commands|sub-commands|skills|steering commands)/gi; for (const match of strippedContent.matchAll(countPattern)) { const num = parseInt(match[1]); // Allow 1 (for "1 skill") and the correct count @@ -174,7 +183,6 @@ function validateNoEmDashes(rootDir) { const targets = [ 'content/site', 'public/index.html', - 'public/cheatsheet.html', 'public/privacy.html', 'scripts/build-sub-pages.js', 'scripts/lib/sub-pages-data.js', @@ -228,7 +236,6 @@ function validateNoEmDashes(rootDir) { function validateSiteHeader(rootDir) { const pages = [ 'public/index.html', - 'public/cheatsheet.html', 'public/privacy.html', ]; const marker = ''; @@ -281,7 +288,6 @@ const DIST_DIR = path.join(ROOT_DIR, 'dist'); async function buildStaticSite(extraEntrypoints = []) { const entrypoints = [ path.join(ROOT_DIR, 'public', 'index.html'), - path.join(ROOT_DIR, 'public', 'cheatsheet.html'), path.join(ROOT_DIR, 'public', 'privacy.html'), ...extraEntrypoints, ]; @@ -328,7 +334,7 @@ async function buildStaticSite(extraEntrypoints = []) { const cssFiles = result.outputs.filter(o => o.path.endsWith('.css')); // When entrypoints span multiple depths under public/ (e.g. public/index.html - // + public/skills/polish.html), Bun's HTML loader preserves the full public/ + // + public/docs/polish.html), Bun's HTML loader preserves the full public/ // prefix in the output tree. Flatten build/public/* up to build/*. const nestedPublic = path.join(outdir, 'public'); if (fs.existsSync(nestedPublic)) { @@ -435,8 +441,49 @@ function generateApiData(buildDir, skills, patterns) { })); fs.writeFileSync(path.join(apiDir, 'skills.json'), JSON.stringify(skillsData)); - // commands.json (user-invocable skills only) - const commandsData = skillsData.filter(s => s.userInvocable); + // commands.json - after v3.0 consolidation, commands are sub-commands of + // /impeccable. Load them from command-metadata.json and include the root + // impeccable skill itself so UI surfaces like the cheatsheet can list them. + // Each entry also picks up a short `tagline` from its editorial file + // (content/site/skills/.md) when one exists. Taglines are used by UI + // surfaces that need a human-friendly one-liner, while `description` stays + // optimized for auto-trigger keyword matching in the AI harness. + const readTagline = (id) => { + const editorialPath = path.join(ROOT_DIR, 'content/site/skills', `${id}.md`); + if (!fs.existsSync(editorialPath)) return null; + const raw = fs.readFileSync(editorialPath, 'utf-8'); + const match = raw.match(/^---\n([\s\S]*?)\n---/); + if (!match) return null; + const taglineMatch = match[1].match(/tagline:\s*"([^"]+)"/); + return taglineMatch ? taglineMatch[1] : null; + }; + + const metadataPath = path.join(ROOT_DIR, 'source/skills/impeccable/scripts/command-metadata.json'); + if (!fs.existsSync(metadataPath)) { + throw new Error(`command-metadata.json is missing at ${metadataPath}. This file is required to generate the commands API.`); + } + const impeccable = skills.find(s => s.name === 'impeccable'); + if (!impeccable) { + throw new Error('impeccable skill not found in source/skills/. The build system expects a single impeccable skill.'); + } + + const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8')); + const commandsData = [ + { + id: 'impeccable', + name: 'impeccable', + description: impeccable.description, + tagline: readTagline('impeccable'), + userInvocable: true, + }, + ...Object.entries(metadata).map(([id, meta]) => ({ + id, + name: id, + description: meta.description, + tagline: readTagline(id), + userInvocable: true, + })), + ]; fs.writeFileSync(path.join(apiDir, 'commands.json'), JSON.stringify(commandsData)); // patterns.json @@ -454,7 +501,8 @@ function generateApiData(buildDir, skills, patterns) { ); } - console.log(`✓ Generated static API data (${skillsData.length} skills, ${commandsData.length} commands)`); + const skillWord = skillsData.length === 1 ? 'skill' : 'skills'; + console.log(`✓ Generated static API data (${skillsData.length} ${skillWord}, ${commandsData.length} commands)`); } /** @@ -523,12 +571,16 @@ function generateCFConfig(buildDir) { `; fs.writeFileSync(path.join(buildDir, '_headers'), headers); - // _redirects: rewrite JSON API routes to static files (200 = rewrite, not redirect) + // _redirects: rewrite JSON API routes to static files (200 = rewrite, not redirect). + // Also permanent redirects for legacy URLs: /skills -> /docs, /cheatsheet -> /docs. const redirects = `/api/skills /_data/api/skills.json 200 /api/commands /_data/api/commands.json 200 /api/patterns /_data/api/patterns.json 200 /api/command-source/:id /_data/api/command-source/:id.json 200 /gallery /visual-mode#try-it-live 301 +/cheatsheet /docs 301 +/skills /docs 301 +/skills/:id /docs/:id 301 `; fs.writeFileSync(path.join(buildDir, '_redirects'), redirects); @@ -630,6 +682,10 @@ async function build() { const deprecatedLocalSkills = [ 'frontend-design', 'teach-impeccable', 'arrange', 'normalize', 'onboard', 'extract', + // v3.0 consolidation: standalone skills -> /impeccable sub-commands + 'adapt', 'animate', 'audit', 'bolder', 'clarify', 'colorize', + 'critique', 'delight', 'distill', 'harden', 'layout', 'optimize', + 'overdrive', 'polish', 'quieter', 'shape', 'typeset', ]; for (const { configDir } of syncConfigs) { for (const name of deprecatedLocalSkills) { diff --git a/scripts/lib/render-markdown.js b/scripts/lib/render-markdown.js index 41a4116ad..068b9f286 100644 --- a/scripts/lib/render-markdown.js +++ b/scripts/lib/render-markdown.js @@ -82,7 +82,7 @@ export function createRenderer({ knownSkillIds = new Set(), currentSkillId = nul * * - `http(s)://…` → unchanged, external * - `reference/foo.md` → `#reference-foo` on current skill page - * - `/skill-id` (known) → `/skills/skill-id` + * - `/skill-id` (known) → `/docs/skill-id` * - `#anchor` → unchanged (in-page anchor) * - anything else → unchanged (will be caught by build warnings later) * @@ -112,12 +112,12 @@ function resolveHref(href, { knownSkillIds, currentSkillId }) { // /skill-id mentioned in prose (e.g. "run /polish") const slashMatch = href.match(/^\/([a-z0-9-]+)$/i); if (slashMatch && knownSkillIds.has(slashMatch[1])) { - return { href: `/skills/${slashMatch[1]}`, external: false }; + return { href: `/docs/${slashMatch[1]}`, external: false }; } - // [text](other-skill) → /skills/other-skill + // [text](other-skill) → /docs/other-skill if (/^[a-z0-9-]+$/i.test(href) && knownSkillIds.has(href)) { - return { href: `/skills/${href}`, external: false }; + return { href: `/docs/${href}`, external: false }; } // Unknown — pass through. Generator can warn separately. diff --git a/scripts/lib/sub-pages-data.js b/scripts/lib/sub-pages-data.js index 61246f932..7523de8dd 100644 --- a/scripts/lib/sub-pages-data.js +++ b/scripts/lib/sub-pages-data.js @@ -13,7 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; import { pathToFileURL } from 'node:url'; -import { readSourceFiles, parseFrontmatter } from './utils.js'; +import { readSourceFiles, parseFrontmatter, replacePlaceholders } from './utils.js'; import { DETECTION_LAYERS, VISUAL_EXAMPLES, @@ -37,7 +37,6 @@ const EXCLUDED_SKILLS = new Set([ 'arrange', // renamed to layout 'normalize', // merged into /polish 'onboard', // merged into /harden - 'extract', // merged into /impeccable extract ]); /** @@ -48,6 +47,7 @@ const EXCLUDED_SKILLS = new Set([ const SKILL_CATEGORIES = { // CREATE - build something new impeccable: 'create', + craft: 'create', shape: 'create', // EVALUATE - review and assess critique: 'evaluate', @@ -69,9 +69,12 @@ const SKILL_CATEGORIES = { polish: 'harden', optimize: 'harden', harden: 'harden', + // SYSTEM - setup and tooling + teach: 'system', + extract: 'system', }; -export const CATEGORY_ORDER = ['create', 'evaluate', 'refine', 'simplify', 'harden']; +export const CATEGORY_ORDER = ['create', 'evaluate', 'refine', 'simplify', 'harden', 'system']; export const CATEGORY_LABELS = { create: 'Create', @@ -91,6 +94,43 @@ export const CATEGORY_DESCRIPTIONS = { system: 'Setup and tooling. Design system work, extraction, organization.', }; +/** + * How commands relate to each other. Mirrors public/js/data.js so the server + * can render the docs overview without loading the client bundle. + * + * - leadsTo: commands that typically follow this one (used for evaluators) + * - pairs: the inverse counterpart (bolder <-> quieter) + * - combinesWith: commands that work well alongside this one + */ +export const COMMAND_RELATIONSHIPS = { + // Create + craft: { combinesWith: ['shape'] }, + shape: { combinesWith: ['craft'] }, + // Evaluate (these are the "diagnostics" that lead to fixes) + audit: { leadsTo: ['harden', 'optimize', 'adapt', 'clarify'] }, + critique: { leadsTo: ['polish', 'distill', 'bolder', 'quieter', 'typeset', 'layout'] }, + // Refine + typeset: { combinesWith: ['bolder', 'polish'] }, + layout: { combinesWith: ['distill', 'adapt'] }, + colorize: { combinesWith: ['bolder', 'delight'] }, + animate: { combinesWith: ['delight'] }, + delight: { combinesWith: ['bolder', 'animate'] }, + bolder: { pairs: 'quieter' }, + quieter: { pairs: 'bolder' }, + overdrive: { combinesWith: ['animate', 'delight'] }, + // Simplify + distill: { combinesWith: ['quieter', 'polish'] }, + clarify: { combinesWith: ['polish', 'adapt'] }, + adapt: { combinesWith: ['polish', 'clarify'] }, + // Harden + polish: {}, + optimize: {}, + harden: { combinesWith: ['optimize'] }, + // System + teach: {}, + extract: {}, +}; + /** * Parse the ANTIPATTERNS array out of src/detect-antipatterns.mjs. * Mirrors the trick in scripts/build.js validateAntipatternRules() so we @@ -168,28 +208,76 @@ export async function buildSubPageData(rootDir) { const contentDir = path.join(rootDir, 'content/site'); const commandDemos = await loadCommandDemos(rootDir); - // Filter to user-invocable, non-deprecated skills. - const skills = rawSkills - .filter((s) => s.userInvocable && !EXCLUDED_SKILLS.has(s.name)) - .map((s) => { - const category = SKILL_CATEGORIES[s.name]; - const editorial = readEditorialWrapper(contentDir, 'skills', s.name); - const demo = commandDemos[s.name] || null; - return { - id: s.name, - name: s.name, - description: s.description, - argumentHint: s.argumentHint, - category, - body: s.body, - references: s.references, - editorial, // may be null - demo, // may be null (e.g. /shape has no demo) - }; - }) - .sort((a, b) => a.name.localeCompare(b.name)); + // After the v3.0 consolidation there's only one source skill (impeccable). + // Its reference/ directory holds one file per command (audit.md, polish.md, ...). + // We synthesize a virtual skill entry for each sub-command so the sub-page + // generators can keep rendering per-command pages, index cards, etc. + const impeccableSkill = rawSkills.find((s) => s.name === 'impeccable'); + const metadataPath = path.join(rootDir, 'source/skills/impeccable/scripts/command-metadata.json'); + let commandMetadata = {}; + if (fs.existsSync(metadataPath)) { + commandMetadata = JSON.parse(fs.readFileSync(metadataPath, 'utf-8')); + } - // Validate the category map covers every user-invocable skill. + // Reference files and skill bodies use {{command_prefix}} placeholders that + // are normally replaced by the provider transformer at build time. For web + // rendering, resolve them here using the claude-code provider as the canonical + // form ("/" prefix). The list of all command names includes the root skill + // plus all sub-commands from metadata so cross-references render correctly. + const allCommandNames = ['impeccable', ...Object.keys(commandMetadata)]; + const resolvePlaceholders = (content) => + replacePlaceholders(content, 'claude-code', [], allCommandNames); + + const skills = []; + + // 1. The root impeccable skill itself. + if (impeccableSkill && !EXCLUDED_SKILLS.has(impeccableSkill.name)) { + const editorial = readEditorialWrapper(contentDir, 'skills', 'impeccable'); + const demo = commandDemos['impeccable'] || null; + skills.push({ + id: 'impeccable', + name: 'impeccable', + description: impeccableSkill.description, + argumentHint: impeccableSkill.argumentHint, + category: SKILL_CATEGORIES['impeccable'], + body: resolvePlaceholders(impeccableSkill.body), + references: (impeccableSkill.references || []).map((r) => ({ + ...r, + content: resolvePlaceholders(r.content), + })), + editorial, + demo, + isSubCommand: false, + }); + } + + // 2. One virtual entry per sub-command, body sourced from its reference file. + if (impeccableSkill) { + for (const [cmdId, meta] of Object.entries(commandMetadata)) { + if (EXCLUDED_SKILLS.has(cmdId)) continue; + const refFile = impeccableSkill.references?.find((r) => r.name === cmdId); + if (!refFile) continue; // no reference file = no page + + const editorial = readEditorialWrapper(contentDir, 'skills', cmdId); + const demo = commandDemos[cmdId] || null; + skills.push({ + id: cmdId, + name: cmdId, + description: meta.description, + argumentHint: meta.argumentHint, + category: SKILL_CATEGORIES[cmdId], + body: resolvePlaceholders(refFile.content), + references: [], // sub-commands don't have their own references + editorial, + demo, + isSubCommand: true, + }); + } + } + + skills.sort((a, b) => a.name.localeCompare(b.name)); + + // Validate the category map covers every skill entry. const missing = skills.filter((s) => !s.category).map((s) => s.id); if (missing.length > 0) { throw new Error( diff --git a/scripts/lib/transformers/factory.js b/scripts/lib/transformers/factory.js index 3b33064c7..5e13a4a4d 100644 --- a/scripts/lib/transformers/factory.js +++ b/scripts/lib/transformers/factory.js @@ -123,10 +123,10 @@ export function createTransformer(config) { } } - const userInvocableCount = skills.filter((s) => s.userInvocable).length; + const skillWord = skills.length === 1 ? 'skill' : 'skills'; const refInfo = refCount > 0 ? ` (${refCount} reference files)` : ''; const scriptInfo = scriptCount > 0 ? ` (${scriptCount} script files)` : ''; const prefixInfo = prefix ? ` [${prefix}prefixed]` : ''; - console.log(`✓ ${displayName}${prefixInfo}: ${skills.length} skills (${userInvocableCount} user-invocable)${refInfo}${scriptInfo}`); + console.log(`✓ ${displayName}${prefixInfo}: ${skills.length} ${skillWord}${refInfo}${scriptInfo}`); }; } diff --git a/scripts/lib/transformers/index.js b/scripts/lib/transformers/index.js index 2d7ab7a16..cf3ddc5b1 100644 --- a/scripts/lib/transformers/index.js +++ b/scripts/lib/transformers/index.js @@ -1,6 +1,9 @@ import { createTransformer } from './factory.js'; import { PROVIDERS } from './providers.js'; +// Named exports exist primarily as stable spy targets for the test suite +// (build.test.js uses spyOn(transformers, 'transformCursor') etc.). build.js +// itself uses createTransformer + PROVIDERS directly, not these. export const transformCursor = createTransformer(PROVIDERS.cursor); export const transformClaudeCode = createTransformer(PROVIDERS['claude-code']); export const transformGemini = createTransformer(PROVIDERS.gemini); diff --git a/scripts/lib/transformers/shared.js b/scripts/lib/transformers/shared.js deleted file mode 100644 index 6cea40521..000000000 --- a/scripts/lib/transformers/shared.js +++ /dev/null @@ -1,81 +0,0 @@ -import path from 'path'; -import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter, replacePlaceholders, prefixSkillReferences } from '../utils.js'; - -/** - * Shared transformer logic for all providers. - * - * @param {Object} config - Provider-specific configuration - * @param {string} config.provider - Provider key for placeholders (e.g., 'claude-code') - * @param {string} config.displayName - Display name for logging (e.g., 'Claude Code') - * @param {string} config.configDir - Dot-directory name (e.g., '.claude') - * @param {Function} config.buildFrontmatter - (skill, skillName) => frontmatter object - * @param {Function} [config.transformBody] - Optional (body, skill) => transformed body - * @param {Array} skills - All skills - * @param {string} distDir - Distribution output directory - * @param {Object} options - Optional settings (prefix, outputSuffix) - */ -export function transformProvider(config, skills, distDir, options = {}) { - const { provider, displayName, configDir, buildFrontmatter, transformBody } = config; - const { prefix = '', outputSuffix = '' } = options; - const providerDir = path.join(distDir, `${provider}${outputSuffix}`); - const skillsDir = path.join(providerDir, `${configDir}/skills`); - - cleanDir(providerDir); - ensureDir(skillsDir); - - const allSkillNames = skills.map(s => s.name); - const commandNames = skills.filter(s => s.userInvokable).map(s => `${prefix}${s.name}`); - let refCount = 0; - let scriptCount = 0; - - for (const skill of skills) { - const skillName = `${prefix}${skill.name}`; - const skillDir = path.join(skillsDir, skillName); - - const frontmatterObj = buildFrontmatter(skill, skillName); - const frontmatter = generateYamlFrontmatter(frontmatterObj); - - let skillBody = replacePlaceholders(skill.body, provider, commandNames); - - // Replace {{scripts_path}} with provider-aware path to skill's scripts directory - const scriptsPath = provider === 'claude-code' - ? '${CLAUDE_PLUGIN_ROOT}/scripts' - : `${configDir}/skills/${skillName}/scripts`; - skillBody = skillBody.replace(/\{\{scripts_path\}\}/g, scriptsPath); - - if (prefix) skillBody = prefixSkillReferences(skillBody, prefix, allSkillNames); - if (transformBody) skillBody = transformBody(skillBody, skill); - - const content = `${frontmatter}\n\n${skillBody}`; - writeFile(path.join(skillDir, 'SKILL.md'), content); - - // Copy reference files if they exist - if (skill.references && skill.references.length > 0) { - const refDir = path.join(skillDir, 'reference'); - ensureDir(refDir); - for (const ref of skill.references) { - writeFile( - path.join(refDir, `${ref.name}.md`), - replacePlaceholders(ref.content, provider) - ); - refCount++; - } - } - - // Copy script files if they exist - if (skill.scripts && skill.scripts.length > 0) { - const scriptsOutDir = path.join(skillDir, 'scripts'); - ensureDir(scriptsOutDir); - for (const script of skill.scripts) { - writeFile(path.join(scriptsOutDir, script.name), script.content); - scriptCount++; - } - } - } - - const userInvokableCount = skills.filter(s => s.userInvokable).length; - const refInfo = refCount > 0 ? ` (${refCount} reference files)` : ''; - const scriptInfo = scriptCount > 0 ? ` (${scriptCount} script files)` : ''; - const prefixInfo = prefix ? ` [${prefix}prefixed]` : ''; - console.log(`✓ ${displayName}${prefixInfo}: ${skills.length} skills (${userInvokableCount} user-invokable)${refInfo}${scriptInfo}`); -} diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 3f672e826..9ed835a30 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -426,13 +426,33 @@ const EXCLUDED_FROM_SUGGESTIONS = new Set([ 'frontend-design', 'i-frontend-design', // deprecated shim ]); +// Sub-commands of /impeccable that should appear in {{available_commands}}. +// These are the commands that audit/critique/etc. reference when suggesting next steps. +const IMPECCABLE_SUB_COMMANDS = [ + 'adapt', 'animate', 'audit', 'bolder', 'clarify', 'colorize', + 'critique', 'delight', 'distill', 'harden', 'layout', 'optimize', + 'overdrive', 'polish', 'quieter', 'shape', 'typeset', +]; + export function replacePlaceholders(content, provider, commandNames = [], allSkillNames = []) { const placeholders = PROVIDER_PLACEHOLDERS[provider] || PROVIDER_PLACEHOLDERS['cursor']; const cmdPrefix = placeholders.command_prefix || '/'; - const commandList = commandNames - .filter(n => !EXCLUDED_FROM_SUGGESTIONS.has(n)) - .map(n => `${cmdPrefix}${n}`) - .join(', '); + + // Build the available_commands list. + // After the v3.0 consolidation, commands are sub-commands of /impeccable. + // If there's only one user-invocable skill (impeccable), generate sub-command references. + // Otherwise fall back to listing skill names (backwards compat for forks). + const nonExcluded = commandNames.filter(n => !EXCLUDED_FROM_SUGGESTIONS.has(n)); + let commandList; + if (nonExcluded.length === 0) { + // Single-skill architecture: list sub-commands as /impeccable + commandList = IMPECCABLE_SUB_COMMANDS + .map(n => `${cmdPrefix}impeccable ${n}`) + .join(', '); + } else { + // Multi-skill architecture (backwards compat) + commandList = nonExcluded.map(n => `${cmdPrefix}${n}`).join(', '); + } let result = content .replace(/\{\{model\}\}/g, placeholders.model) diff --git a/server/index.js b/server/index.js index c9acdcdbb..0e0327167 100644 --- a/server/index.js +++ b/server/index.js @@ -2,8 +2,6 @@ import { serve, file } from "bun"; import path from "node:path"; import { fileURLToPath } from "node:url"; import homepage from "../public/index.html"; -import cheatsheet from "../public/cheatsheet.html"; -import gallery from "../public/gallery.html"; import privacy from "../public/privacy.html"; import { getSkills, @@ -42,15 +40,19 @@ const server = serve({ routes: { "/": homepage, - "/cheatsheet": cheatsheet, - "/gallery": gallery, "/privacy": privacy, + // Legacy URL redirects (kept stable for external links and existing users). + "/cheatsheet": Response.redirect("/docs", 301), + "/gallery": Response.redirect("/visual-mode#try-it-live", 301), + "/skills": Response.redirect("/docs", 301), + "/skills/:id": (req) => Response.redirect(`/docs/${req.params.id}`, 301), + // Generated sub-pages — served directly from the pre-generated files - "/skills": () => serveGenerated(path.join(ROOT_DIR, "public/skills/index.html")), - "/skills/:id": (req) => { + "/docs": () => serveGenerated(path.join(ROOT_DIR, "public/docs/index.html")), + "/docs/:id": (req) => { const id = req.params.id.replace(/[^a-z0-9-]/gi, ""); - return serveGenerated(path.join(ROOT_DIR, `public/skills/${id}.html`)); + return serveGenerated(path.join(ROOT_DIR, `public/docs/${id}.html`)); }, "/anti-patterns": () => serveGenerated(path.join(ROOT_DIR, "public/anti-patterns/index.html")), "/visual-mode": () => serveGenerated(path.join(ROOT_DIR, "public/visual-mode/index.html")), diff --git a/server/lib/api-handlers.js b/server/lib/api-handlers.js index c27ab428d..1714c25a1 100644 --- a/server/lib/api-handlers.js +++ b/server/lib/api-handlers.js @@ -47,10 +47,68 @@ export async function getSkills() { return skills; } -// Read commands (user-invocable skills) +// Read a short tagline for a command from its editorial file +// (content/site/skills/.md). Returns null if the file or tagline is +// missing. Taglines are used by UI surfaces that need a human-friendly +// one-liner; `description` stays optimized for auto-trigger matching. +async function readCommandTagline(id) { + const editorialPath = join(PROJECT_ROOT, "content/site/skills", `${id}.md`); + if (!existsSync(editorialPath)) return null; + try { + const raw = await readFileContent(editorialPath); + const match = raw.match(/^---\n([\s\S]*?)\n---/); + if (!match) return null; + const taglineMatch = match[1].match(/tagline:\s*"([^"]+)"/); + return taglineMatch ? taglineMatch[1] : null; + } catch { + return null; + } +} + +// Read commands. After the v3.0 consolidation, commands are sub-commands of +// /impeccable. Read them from command-metadata.json and include the root +// impeccable skill itself so UI surfaces (cheatsheet, magazine spread) can +// list them. export async function getCommands() { const allSkills = await getSkills(); - return allSkills.filter(s => s.userInvocable); + const metadataPath = join(PROJECT_ROOT, "source/skills/impeccable/scripts/command-metadata.json"); + + const commands = []; + const impeccable = allSkills.find(s => s.name === "impeccable"); + if (impeccable) { + commands.push({ + id: "impeccable", + name: "impeccable", + description: impeccable.description, + tagline: await readCommandTagline("impeccable"), + userInvocable: true, + }); + } + + if (existsSync(metadataPath)) { + try { + const raw = await readFileContent(metadataPath); + const metadata = JSON.parse(raw); + for (const [id, meta] of Object.entries(metadata)) { + commands.push({ + id, + name: id, + description: meta.description, + tagline: await readCommandTagline(id), + userInvocable: true, + }); + } + } catch (error) { + console.error("Error reading command metadata:", error); + } + } + + // Fallback: return just user-invocable skills if no metadata + if (commands.length === 0) { + return allSkills.filter(s => s.userInvocable); + } + + return commands; } // Get command/skill source content diff --git a/skills-lock.json b/skills-lock.json index 9eef3ff1e..f5f7b0666 100644 --- a/skills-lock.json +++ b/skills-lock.json @@ -11,11 +11,6 @@ "sourceType": "github", "computedHash": "b00cb71343fa7e987489ad330e3dd3e504ff893b9ddd2b30cacea93691b78e46" }, - "arrange": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "698fb952e9ef0d2551a5c3421ef61e084934420e0d8371a02efb4f76f21049e8" - }, "audit": { "source": "pbakaus/impeccable", "sourceType": "github", @@ -51,31 +46,11 @@ "sourceType": "github", "computedHash": "ce6fbd844488a326208c1302c73b2865fa4fb20e447b6a06c038315444d6e0c5" }, - "extract": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "1bbe30b5be73a86971f6bccb37daae84aaafceaa6d23429d6a3a0442378ac4ec" - }, - "frontend-design": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "9ebe6c652743fcde8d2ae773f34b6f548dcc8b2e75a3a30936adcd8b95dd2d16" - }, "harden": { "source": "pbakaus/impeccable", "sourceType": "github", "computedHash": "f8ce420b3c78b90707704122264da76514c793ac0e12fb9540ace68d257c231c" }, - "normalize": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "281b7f9e590e252a6aec3f5f83c5ca548c91e8bccb3fd6eee4cc7d5be0becb4d" - }, - "onboard": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "1cbedf70f906150b1b8bb70b61393eaf67e2e1311e1b5e43bde3e47411bcaa2b" - }, "optimize": { "source": "pbakaus/impeccable", "sourceType": "github", @@ -96,11 +71,6 @@ "sourceType": "github", "computedHash": "6066e73875e4770e624641355cc04662ce75d2b1d1a3673e24dcbd0ec8936297" }, - "teach-impeccable": { - "source": "pbakaus/impeccable", - "sourceType": "github", - "computedHash": "b3b5541bb9b0a260af793c7d79c2db4a436c2cd9384be34a4024c7f28af72e62" - }, "typeset": { "source": "pbakaus/impeccable", "sourceType": "github", diff --git a/source/skills/adapt/SKILL.md b/source/skills/adapt/SKILL.md deleted file mode 100644 index 1f1a0d1a9..000000000 --- a/source/skills/adapt/SKILL.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -name: adapt -description: "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility." -argument-hint: "[target] [context (mobile, tablet, print...)]" -user-invocable: true ---- - -Adapt existing designs to work effectively across different contexts - different screen sizes, devices, platforms, or use cases. - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: target platforms/devices and usage contexts. - ---- - -## Assess Adaptation Challenge - -Understand what needs adaptation and why: - -1. **Identify the source context**: - - What was it designed for originally? (Desktop web? Mobile app?) - - What assumptions were made? (Large screen? Mouse input? Fast connection?) - - What works well in current context? - -2. **Understand target context**: - - **Device**: Mobile, tablet, desktop, TV, watch, print? - - **Input method**: Touch, mouse, keyboard, voice, gamepad? - - **Screen constraints**: Size, resolution, orientation? - - **Connection**: Fast wifi, slow 3G, offline? - - **Usage context**: On-the-go vs desk, quick glance vs focused reading? - - **User expectations**: What do users expect on this platform? - -3. **Identify adaptation challenges**: - - What won't fit? (Content, navigation, features) - - 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. - -## Plan Adaptation Strategy - -Create context-appropriate strategy: - -### Mobile Adaptation (Desktop → Mobile) - -**Layout Strategy**: -- Single column instead of multi-column -- Vertical stacking instead of side-by-side -- Full-width components instead of fixed widths -- Bottom navigation instead of top/side navigation - -**Interaction Strategy**: -- Touch targets 44x44px minimum (not hover-dependent) -- Swipe gestures where appropriate (lists, carousels) -- Bottom sheets instead of dropdowns -- Thumbs-first design (controls within thumb reach) -- Larger tap areas with more spacing - -**Content Strategy**: -- Progressive disclosure (don't show everything at once) -- Prioritize primary content (secondary content in tabs/accordions) -- Shorter text (more concise) -- Larger text (16px minimum) - -**Navigation Strategy**: -- Hamburger menu or bottom navigation -- Reduce navigation complexity -- Sticky headers for context -- Back button in navigation flow - -### Tablet Adaptation (Hybrid Approach) - -**Layout Strategy**: -- Two-column layouts (not single or three-column) -- Side panels for secondary content -- Master-detail views (list + detail) -- Adaptive based on orientation (portrait vs landscape) - -**Interaction Strategy**: -- Support both touch and pointer -- Touch targets 44x44px but allow denser layouts than phone -- Side navigation drawers -- Multi-column forms where appropriate - -### Desktop Adaptation (Mobile → Desktop) - -**Layout Strategy**: -- Multi-column layouts (use horizontal space) -- Side navigation always visible -- Multiple information panels simultaneously -- Fixed widths with max-width constraints (don't stretch to 4K) - -**Interaction Strategy**: -- Hover states for additional information -- Keyboard shortcuts -- Right-click context menus -- Drag and drop where helpful -- Multi-select with Shift/Cmd - -**Content Strategy**: -- Show more information upfront (less progressive disclosure) -- Data tables with many columns -- Richer visualizations -- More detailed descriptions - -### Print Adaptation (Screen → Print) - -**Layout Strategy**: -- Page breaks at logical points -- Remove navigation, footer, interactive elements -- Black and white (or limited color) -- Proper margins for binding - -**Content Strategy**: -- Expand shortened content (show full URLs, hidden sections) -- Add page numbers, headers, footers -- Include metadata (print date, page title) -- Convert charts to print-friendly versions - -### Email Adaptation (Web → Email) - -**Layout Strategy**: -- Narrow width (600px max) -- Single column only -- Inline CSS (no external stylesheets) -- Table-based layouts (for email client compatibility) - -**Interaction Strategy**: -- Large, obvious CTAs (buttons not text links) -- No hover states (not reliable) -- Deep links to web app for complex interactions - -## Implement Adaptations - -Apply changes systematically: - -### Responsive Breakpoints - -Choose appropriate breakpoints: -- Mobile: 320px-767px -- Tablet: 768px-1023px -- Desktop: 1024px+ -- Or content-driven breakpoints (where design breaks) - -### Layout Adaptation Techniques - -- **CSS Grid/Flexbox**: Reflow layouts automatically -- **Container Queries**: Adapt based on container, not viewport -- **`clamp()`**: Fluid sizing between min and max -- **Media queries**: Different styles for different contexts -- **Display properties**: Show/hide elements per context - -### Touch Adaptation - -- Increase touch target sizes (44x44px minimum) -- Add more spacing between interactive elements -- Remove hover-dependent interactions -- Add touch feedback (ripples, highlights) -- Consider thumb zones (easier to reach bottom than top) - -### Content Adaptation - -- Use `display: none` sparingly (still downloads) -- Progressive enhancement (core content first, enhancements on larger screens) -- Lazy loading for off-screen content -- Responsive images (`srcset`, `picture` element) - -### Navigation Adaptation - -- Transform complex nav to hamburger/drawer on mobile -- Bottom nav bar for mobile apps -- 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. - -**NEVER**: -- Hide core functionality on mobile (if it matters, make it work) -- Assume desktop = powerful device (consider accessibility, older machines) -- Use different information architecture across contexts (confusing) -- Break user expectations for platform (mobile users expect mobile patterns) -- Forget landscape orientation on mobile/tablet -- Use generic breakpoints blindly (use content-driven breakpoints) -- Ignore touch on desktop (many desktop devices have touch) - -## Verify Adaptations - -Test thoroughly across contexts: - -- **Real devices**: Test on actual phones, tablets, desktops -- **Different orientations**: Portrait and landscape -- **Different browsers**: Safari, Chrome, Firefox, Edge -- **Different OS**: iOS, Android, Windows, macOS -- **Different input methods**: Touch, mouse, keyboard -- **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. - diff --git a/source/skills/clarify/SKILL.md b/source/skills/clarify/SKILL.md deleted file mode 100644 index 514a6a143..000000000 --- a/source/skills/clarify/SKILL.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -name: clarify -description: "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing." -argument-hint: "[target]" -user-invocable: true ---- - -Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: audience technical level and users' mental state in context. - ---- - -## Assess Current Copy - -Identify what makes the text unclear or ineffective: - -1. **Find clarity problems**: - - **Jargon**: Technical terms users won't understand - - **Ambiguity**: Multiple interpretations possible - - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" - - **Length**: Too wordy or too terse - - **Assumptions**: Assuming user knowledge they don't have - - **Missing context**: Users don't know what to do or why - - **Tone mismatch**: Too formal, too casual, or inappropriate for situation - -2. **Understand the context**: - - Who's the audience? (Technical? General? First-time users?) - - What's the user's mental state? (Stressed during error? Confident during success?) - - What's the action? (What do we want users to do?) - - What's the constraint? (Character limits? Space limitations?) - -**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. - -## Plan Copy Improvements - -Create a strategy for clearer communication: - -- **Primary message**: What's the ONE thing users need to know? -- **Action needed**: What should users do next (if anything)? -- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) -- **Constraints**: Length limits, brand voice, localization considerations - -**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. - -## Improve Copy Systematically - -Refine text across these common areas: - -### Error Messages -**Bad**: "Error 403: Forbidden" -**Good**: "You don't have permission to view this page. Contact your admin for access." - -**Bad**: "Invalid input" -**Good**: "Email addresses need an @ symbol. Try: name@example.com" - -**Principles**: -- Explain what went wrong in plain language -- Suggest how to fix it -- Don't blame the user -- Include examples when helpful -- Link to help/support if applicable - -### Form Labels & Instructions -**Bad**: "DOB (MM/DD/YYYY)" -**Good**: "Date of birth" (with placeholder showing format) - -**Bad**: "Enter value here" -**Good**: "Your email address" or "Company name" - -**Principles**: -- Use clear, specific labels (not generic placeholders) -- Show format expectations with examples -- Explain why you're asking (when not obvious) -- Put instructions before the field, not after -- Keep required field indicators clear - -### Button & CTA Text -**Bad**: "Click here" | "Submit" | "OK" -**Good**: "Create account" | "Save changes" | "Got it, thanks" - -**Principles**: -- Describe the action specifically -- Use active voice (verb + noun) -- Match user's mental model -- Be specific ("Save" is better than "OK") - -### Help Text & Tooltips -**Bad**: "This is the username field" -**Good**: "Choose a username. You can change this later in Settings." - -**Principles**: -- Add value (don't just repeat the label) -- Answer the implicit question ("What is this?" or "Why do you need this?") -- Keep it brief but complete -- Link to detailed docs if needed - -### Empty States -**Bad**: "No items" -**Good**: "No projects yet. Create your first project to get started." - -**Principles**: -- Explain why it's empty (if not obvious) -- Show next action clearly -- Make it welcoming, not dead-end - -### Success Messages -**Bad**: "Success" -**Good**: "Settings saved! Your changes will take effect immediately." - -**Principles**: -- Confirm what happened -- Explain what happens next (if relevant) -- Be brief but complete -- Match the user's emotional moment (celebrate big wins) - -### Loading States -**Bad**: "Loading..." (for 30+ seconds) -**Good**: "Analyzing your data... this usually takes 30-60 seconds" - -**Principles**: -- Set expectations (how long?) -- Explain what's happening (when it's not obvious) -- Show progress when possible -- Offer escape hatch if appropriate ("Cancel") - -### Confirmation Dialogs -**Bad**: "Are you sure?" -**Good**: "Delete 'Project Alpha'? This can't be undone." - -**Principles**: -- State the specific action -- Explain consequences (especially for destructive actions) -- Use clear button labels ("Delete project" not "Yes") -- Don't overuse confirmations (only for risky actions) - -### Navigation & Wayfinding -**Bad**: Generic labels like "Items" | "Things" | "Stuff" -**Good**: Specific labels like "Your projects" | "Team members" | "Settings" - -**Principles**: -- Be specific and descriptive -- Use language users understand (not internal jargon) -- Make hierarchy clear -- Consider information scent (breadcrumbs, current location) - -## Apply Clarity Principles - -Every piece of copy should follow these rules: - -1. **Be specific**: "Enter email" not "Enter value" -2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) -3. **Be active**: "Save changes" not "Changes will be saved" -4. **Be human**: "Oops, something went wrong" not "System error encountered" -5. **Be helpful**: Tell users what to do, not just what happened -6. **Be consistent**: Use same terms throughout (don't vary for variety) - -**NEVER**: -- Use jargon without explanation -- Blame users ("You made an error" → "This field is required") -- Be vague ("Something went wrong" without explanation) -- Use passive voice unnecessarily -- Write overly long explanations (be concise) -- Use humor for errors (be empathetic instead) -- Assume technical knowledge -- Vary terminology (pick one term and stick with it) -- Repeat information (headers restating intros, redundant explanations) -- Use placeholders as the only labels (they disappear when users type) - -## Verify Improvements - -Test that copy improvements work: - -- **Comprehension**: Can users understand without context? -- **Actionability**: Do users know what to do next? -- **Brevity**: Is it as short as possible while remaining clear? -- **Consistency**: Does it match terminology elsewhere? -- **Tone**: Is it appropriate for the situation? - -Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. - diff --git a/source/skills/harden/SKILL.md b/source/skills/harden/SKILL.md deleted file mode 100644 index 5aafb5f4e..000000000 --- a/source/skills/harden/SKILL.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -name: harden -description: "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues." -argument-hint: "[target]" -user-invocable: true ---- - -Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. - -## Assess Hardening Needs - -Identify weaknesses and edge cases: - -1. **Test with extreme inputs**: - - Very long text (names, descriptions, titles) - - Very short text (empty, single character) - - Special characters (emoji, RTL text, accents) - - Large numbers (millions, billions) - - Many items (1000+ list items, 50+ options) - - No data (empty states) - -2. **Test error scenarios**: - - Network failures (offline, slow, timeout) - - API errors (400, 401, 403, 404, 500) - - Validation errors - - Permission errors - - Rate limiting - - Concurrent operations - -3. **Test internationalization**: - - Long translations (German is often 30% longer than English) - - RTL languages (Arabic, Hebrew) - - Character sets (Chinese, Japanese, Korean, emoji) - - Date/time formats - - Number formats (1,000 vs 1.000) - - Currency symbols - -**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. - -## Hardening Dimensions - -Systematically improve resilience: - -### Text Overflow & Wrapping - -**Long text handling**: -```css -/* Single line with ellipsis */ -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Multi-line with clamp */ -.line-clamp { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -/* Allow wrapping */ -.wrap { - word-wrap: break-word; - overflow-wrap: break-word; - hyphens: auto; -} -``` - -**Flex/Grid overflow**: -```css -/* Prevent flex items from overflowing */ -.flex-item { - min-width: 0; /* Allow shrinking below content size */ - overflow: hidden; -} - -/* Prevent grid items from overflowing */ -.grid-item { - min-width: 0; - min-height: 0; -} -``` - -**Responsive text sizing**: -- Use `clamp()` for fluid typography -- Set minimum readable sizes (14px on mobile) -- Test text scaling (zoom to 200%) -- Ensure containers expand with text - -### Internationalization (i18n) - -**Text expansion**: -- Add 30-40% space budget for translations -- Use flexbox/grid that adapts to content -- Test with longest language (usually German) -- Avoid fixed widths on text containers - -```jsx -// ❌ Bad: Assumes short English text - - -// ✅ Good: Adapts to content - -``` - -**RTL (Right-to-Left) support**: -```css -/* Use logical properties */ -margin-inline-start: 1rem; /* Not margin-left */ -padding-inline: 1rem; /* Not padding-left/right */ -border-inline-end: 1px solid; /* Not border-right */ - -/* Or use dir attribute */ -[dir="rtl"] .arrow { transform: scaleX(-1); } -``` - -**Character set support**: -- Use UTF-8 encoding everywhere -- Test with Chinese/Japanese/Korean (CJK) characters -- Test with emoji (they can be 2-4 bytes) -- Handle different scripts (Latin, Cyrillic, Arabic, etc.) - -**Date/Time formatting**: -```javascript -// ✅ Use Intl API for proper formatting -new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 -new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 - -new Intl.NumberFormat('en-US', { - style: 'currency', - currency: 'USD' -}).format(1234.56); // $1,234.56 -``` - -**Pluralization**: -```javascript -// ❌ Bad: Assumes English pluralization -`${count} item${count !== 1 ? 's' : ''}` - -// ✅ Good: Use proper i18n library -t('items', { count }) // Handles complex plural rules -``` - -### Error Handling - -**Network errors**: -- Show clear error messages -- Provide retry button -- Explain what happened -- Offer offline mode (if applicable) -- Handle timeout scenarios - -```jsx -// Error states with recovery -{error && ( - -

      Failed to load data. {error.message}

      - -       -)} -``` - -**Form validation errors**: -- Inline errors near fields -- Clear, specific messages -- Suggest corrections -- Don't block submission unnecessarily -- Preserve user input on error - -**API errors**: -- Handle each status code appropriately - - 400: Show validation errors - - 401: Redirect to login - - 403: Show permission error - - 404: Show not found state - - 429: Show rate limit message - - 500: Show generic error, offer support - -**Graceful degradation**: -- Core functionality works without JavaScript -- Images have alt text -- Progressive enhancement -- Fallbacks for unsupported features - -### Edge Cases & Boundary Conditions - -**Empty states**: -- No items in list -- No search results -- No notifications -- No data to display -- Provide clear next action - -**Loading states**: -- Initial load -- Pagination load -- Refresh -- Show what's loading ("Loading your projects...") -- Time estimates for long operations - -**Large datasets**: -- Pagination or virtual scrolling -- Search/filter capabilities -- Performance optimization -- Don't load all 10,000 items at once - -**Concurrent operations**: -- Prevent double-submission (disable button while loading) -- Handle race conditions -- Optimistic updates with rollback -- Conflict resolution - -**Permission states**: -- No permission to view -- No permission to edit -- Read-only mode -- Clear explanation of why - -**Browser compatibility**: -- Polyfills for modern features -- Fallbacks for unsupported CSS -- Feature detection (not browser detection) -- Test in target browsers - -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - -### Input Validation & Sanitization - -**Client-side validation**: -- Required fields -- Format validation (email, phone, URL) -- Length limits -- Pattern matching -- Custom validation rules - -**Server-side validation** (always): -- Never trust client-side only -- Validate and sanitize all inputs -- Protect against injection attacks -- Rate limiting - -**Constraint handling**: -```html - - - - Letters and numbers only, up to 100 characters - -``` - -### Accessibility Resilience - -**Keyboard navigation**: -- All functionality accessible via keyboard -- Logical tab order -- Focus management in modals -- Skip links for long content - -**Screen reader support**: -- Proper ARIA labels -- Announce dynamic changes (live regions) -- Descriptive alt text -- Semantic HTML - -**Motion sensitivity**: -```css -@media (prefers-reduced-motion: reduce) { - * { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - } -} -``` - -**High contrast mode**: -- Test in Windows high contrast mode -- Don't rely only on color -- Provide alternative visual cues - -### Performance Resilience - -**Slow connections**: -- Progressive image loading -- Skeleton screens -- Optimistic UI updates -- Offline support (service workers) - -**Memory leaks**: -- Clean up event listeners -- Cancel subscriptions -- Clear timers/intervals -- Abort pending requests on unmount - -**Throttling & Debouncing**: -```javascript -// Debounce search input -const debouncedSearch = debounce(handleSearch, 300); - -// Throttle scroll handler -const throttledScroll = throttle(handleScroll, 100); -``` - -## Testing Strategies - -**Manual testing**: -- Test with extreme data (very long, very short, empty) -- Test in different languages -- Test offline -- Test slow connection (throttle to 3G) -- Test with screen reader -- Test keyboard-only navigation -- Test on old browsers - -**Automated testing**: -- Unit tests for edge cases -- Integration tests for error scenarios -- E2E tests for critical paths -- Visual regression tests -- Accessibility tests (axe, WAVE) - -**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. - -**NEVER**: -- Assume perfect input (validate everything) -- Ignore internationalization (design for global) -- Leave error messages generic ("Error occurred") -- Forget offline scenarios -- Trust client-side validation alone -- Use fixed widths for text -- Assume English-length text -- Block entire interface when one component errors - -## Verify Hardening - -Test thoroughly with edge cases: - -- **Long text**: Try names with 100+ characters -- **Emoji**: Use emoji in all text fields -- **RTL**: Test with Arabic or Hebrew -- **CJK**: Test with Chinese/Japanese/Korean -- **Network issues**: Disable internet, throttle connection -- **Large datasets**: Test with 1000+ items -- **Concurrent actions**: Click submit 10 times rapidly -- **Errors**: Force API errors, test all error states -- **Empty**: Remove all data, test empty states - -Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. - diff --git a/source/skills/impeccable/SKILL.md b/source/skills/impeccable/SKILL.md index 62595c806..2bd1bad97 100644 --- a/source/skills/impeccable/SKILL.md +++ b/source/skills/impeccable/SKILL.md @@ -1,15 +1,19 @@ --- name: impeccable -description: "Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for shape-then-build, 'teach' for design context setup, or 'extract' to pull reusable components and tokens into the design system." -argument-hint: "[craft|teach|extract]" +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +argument-hint: "[command] [target]" user-invocable: true +allowed-tools: + - Bash(npx impeccable *) license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- +This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. + BEFORE doing any design work, run this one-time maintenance step. Tell the user: -> **Impeccable was updated.** A few skills were renamed or merged in this version (e.g. `/arrange` is now `/layout`, `/normalize` was folded into `/polish`). I'll clean up the old skill files so they don't clutter your project. This only runs once after an update. +> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. Then run: @@ -22,8 +26,6 @@ If the script removed files, briefly confirm what was cleaned up. If it found no After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. -This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices. - ## Context Gathering Protocol Design skills produce generic output without project context. You MUST have confirmed design context before doing any design work. @@ -33,7 +35,7 @@ Design skills produce generic output without project context. You MUST have conf - **Use cases**: What jobs are they trying to get done? - **Brand personality/tone**: How should the interface feel? -Individual skills may require additional context. Check the skill's preparation section for specifics. +Individual sub-commands may require additional context. Check the commands' preparation section for specifics. **CRITICAL**: You cannot infer this context by reading the codebase. Code tells you what was built, not who it's for or what it should feel like. Only the creator can provide this context. @@ -269,7 +271,7 @@ Make interactions feel fast. Use optimistic UI: update immediately, sync later. A distinctive interface should make someone ask "how was this made?" not "which AI made this?" -Review the DON'T guidelines above. They are the fingerprints of AI-generated work from 2024-2025. +Review the DON'T guidelines above. They are the fingerprints of AI-generated work. --- @@ -283,82 +285,96 @@ Remember: {{model}} is capable of extraordinary creative work. Don't hold back. --- -## Craft Mode +## Command Router -If this skill is invoked with the argument "craft" (e.g., `{{command_prefix}}impeccable craft [feature description]`), follow the [craft flow](reference/craft.md). Pass any additional arguments as the feature description. +This skill supports sub-commands. Parse the first word of the argument string to determine routing. + +### Routing rules + +1. **No argument at all** (user typed just `{{command_prefix}}impeccable`): Display the command menu below, then ask the user what they'd like to do. +2. **First word matches a sub-command**: Route to that command's reference file. Everything after the sub-command name is the target. +3. **First word does NOT match any sub-command**: This is a general design invocation. Follow the Design Direction and Implementation Principles above, using the full argument string as context. + +### Command menu (display when invoked with no argument) + +> **Available commands:** +> +> **Build & Plan** +> `{{command_prefix}}impeccable craft [feature]` - Shape, then build a feature end-to-end +> `{{command_prefix}}impeccable shape [feature]` - Plan UX/UI before writing code +> `{{command_prefix}}impeccable teach` - Set up design context for this project (one-time) +> `{{command_prefix}}impeccable extract [target]` - Pull reusable tokens and components into design system +> +> **Evaluate** +> `{{command_prefix}}impeccable critique [target]` - UX design review with heuristic scoring +> `{{command_prefix}}impeccable audit [target]` - Technical quality checks (a11y, perf, responsive) +> +> **Refine** +> `{{command_prefix}}impeccable polish [target]` - Final quality pass before shipping +> `{{command_prefix}}impeccable bolder [target]` - Amplify safe/bland designs +> `{{command_prefix}}impeccable quieter [target]` - Tone down aggressive/overstimulating designs +> `{{command_prefix}}impeccable distill [target]` - Strip to essence, remove complexity +> `{{command_prefix}}impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> +> **Enhance** +> `{{command_prefix}}impeccable animate [target]` - Add purposeful animations and motion +> `{{command_prefix}}impeccable colorize [target]` - Add strategic color to monochromatic UIs +> `{{command_prefix}}impeccable typeset [target]` - Improve typography hierarchy and fonts +> `{{command_prefix}}impeccable layout [target]` - Fix spacing, rhythm, and visual hierarchy +> `{{command_prefix}}impeccable delight [target]` - Add personality and memorable touches +> `{{command_prefix}}impeccable overdrive [target]` - Push past conventional limits +> +> **Fix** +> `{{command_prefix}}impeccable clarify [target]` - Improve UX copy, labels, and error messages +> `{{command_prefix}}impeccable adapt [target]` - Adapt for different devices and screen sizes +> `{{command_prefix}}impeccable optimize [target]` - Diagnose and fix UI performance +> +> **Manage** +> `{{command_prefix}}impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates {{command_prefix}}audit) +> `{{command_prefix}}impeccable unpin ` - Remove a pinned shortcut +> +> Or use `{{command_prefix}}impeccable [description]` directly to apply design principles to any task. + +### Sub-command reference table + +When a sub-command is matched, load the linked reference and follow its instructions. The design principles, guidelines, and Context Gathering Protocol from this skill are already loaded. Do NOT re-invoke {{command_prefix}}impeccable. + +| Command | Reference | Summary | +|---------|-----------|---------| +| `craft` | [craft](reference/craft.md) | Full shape-then-build flow with visual iteration | +| `teach` | [teach](reference/teach.md) | One-time setup: gather design context for the project | +| `extract` | [extract](reference/extract.md) | Pull reusable tokens and components into design system | +| `shape` | [shape](reference/shape.md) | Plan UX and UI before writing code (produces a design brief) | +| `critique` | [critique](reference/critique.md) | UX design review with heuristic scoring and persona testing | +| `audit` | [audit](reference/audit.md) | Technical quality checks across a11y, perf, theming, responsive, anti-patterns | +| `polish` | [polish](reference/polish.md) | Final quality pass: alignment, spacing, consistency, micro-details | +| `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | +| `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | +| `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | +| `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | +| `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | +| `layout` | [layout](reference/layout.md) | Improve layout, spacing, and visual rhythm | +| `delight` | [delight](reference/delight.md) | Add personality, joy, and memorable touches | +| `overdrive` | [overdrive](reference/overdrive.md) | Push interfaces past conventional limits | +| `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | +| `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | +| `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | --- -## Teach Mode +## Pin / Unpin -If this skill is invoked with the argument "teach" (e.g., `{{command_prefix}}impeccable teach`), skip all design work above and instead run the teach flow below. This is a one-time setup that gathers design context for the project. +If this skill is invoked with `pin ` or `unpin `: -### Step 1: Explore the Codebase +**pin** creates a lightweight standalone skill so you can invoke the command directly (e.g., `{{command_prefix}}audit` instead of `{{command_prefix}}impeccable audit`). -Before asking questions, thoroughly scan the project to discover what you can: +**unpin** removes a previously pinned shortcut. -- **README and docs**: Project purpose, target audience, any stated goals -- **Package.json / config files**: Tech stack, dependencies, existing design libraries -- **Existing components**: Current design patterns, spacing, typography in use -- **Brand assets**: Logos, favicons, color values already defined -- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales -- **Any style guides or brand documentation** - -Note what you've learned and what remains unclear. - -### Step 2: Ask UX-Focused Questions - -{{ask_instruction}} Focus only on what you couldn't infer from the codebase: - -#### Users & Purpose -- Who uses this? What's their context when using it? -- What job are they trying to get done? -- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) - -#### Brand & Personality -- How would you describe the brand personality in 3 words? -- Any reference sites or apps that capture the right feel? What specifically about them? -- What should this explicitly NOT look like? Any anti-references? - -#### Aesthetic Preferences -- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) -- Light mode, dark mode, or both? -- Any colors that must be used or avoided? - -#### Accessibility & Inclusion -- Specific accessibility requirements? (WCAG level, known user needs) -- Considerations for reduced motion, color blindness, or other accommodations? - -Skip questions where the answer is already clear from the codebase exploration. - -### Step 3: Write Design Context - -Synthesize your findings and the user's answers into a `## Design Context` section: - -```markdown -## Design Context - -### Users -[Who they are, their context, the job to be done] - -### Brand Personality -[Voice, tone, 3-word personality, emotional goals] - -### Aesthetic Direction -[Visual tone, references, anti-references, theme] - -### Design Principles -[3-5 principles derived from the conversation that should guide all design decisions] +Run: +```bash +node {{scripts_path}}/pin.mjs ``` -Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. - -Then {{ask_instruction}} whether they'd also like the Design Context appended to {{config_file}}. If yes, append or update the section there as well. - -Confirm completion and summarize the key design principles that will now guide all future work. - ---- - -## Extract Mode - -If this skill is invoked with the argument "extract" (e.g., `{{command_prefix}}impeccable extract [target]`), follow the [extract flow](reference/extract.md). Pass any additional arguments as the extraction target. +Report what the script did. If it succeeded, confirm the new shortcut is available (for pin) or removed (for unpin). diff --git a/source/skills/impeccable/reference/adapt.md b/source/skills/impeccable/reference/adapt.md new file mode 100644 index 000000000..249653d4c --- /dev/null +++ b/source/skills/impeccable/reference/adapt.md @@ -0,0 +1,190 @@ +> **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. + + +--- + +## Assess Adaptation Challenge + +Understand what needs adaptation and why: + +1. **Identify the source context**: + - What was it designed for originally? (Desktop web? Mobile app?) + - What assumptions were made? (Large screen? Mouse input? Fast connection?) + - What works well in current context? + +2. **Understand target context**: + - **Device**: Mobile, tablet, desktop, TV, watch, print? + - **Input method**: Touch, mouse, keyboard, voice, gamepad? + - **Screen constraints**: Size, resolution, orientation? + - **Connection**: Fast wifi, slow 3G, offline? + - **Usage context**: On-the-go vs desk, quick glance vs focused reading? + - **User expectations**: What do users expect on this platform? + +3. **Identify adaptation challenges**: + - What won't fit? (Content, navigation, features) + - 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. + +## Plan Adaptation Strategy + +Create context-appropriate strategy: + +### Mobile Adaptation (Desktop → Mobile) + +**Layout Strategy**: +- Single column instead of multi-column +- Vertical stacking instead of side-by-side +- Full-width components instead of fixed widths +- Bottom navigation instead of top/side navigation + +**Interaction Strategy**: +- Touch targets 44x44px minimum (not hover-dependent) +- Swipe gestures where appropriate (lists, carousels) +- Bottom sheets instead of dropdowns +- Thumbs-first design (controls within thumb reach) +- Larger tap areas with more spacing + +**Content Strategy**: +- Progressive disclosure (don't show everything at once) +- Prioritize primary content (secondary content in tabs/accordions) +- Shorter text (more concise) +- Larger text (16px minimum) + +**Navigation Strategy**: +- Hamburger menu or bottom navigation +- Reduce navigation complexity +- Sticky headers for context +- Back button in navigation flow + +### Tablet Adaptation (Hybrid Approach) + +**Layout Strategy**: +- Two-column layouts (not single or three-column) +- Side panels for secondary content +- Master-detail views (list + detail) +- Adaptive based on orientation (portrait vs landscape) + +**Interaction Strategy**: +- Support both touch and pointer +- Touch targets 44x44px but allow denser layouts than phone +- Side navigation drawers +- Multi-column forms where appropriate + +### Desktop Adaptation (Mobile → Desktop) + +**Layout Strategy**: +- Multi-column layouts (use horizontal space) +- Side navigation always visible +- Multiple information panels simultaneously +- Fixed widths with max-width constraints (don't stretch to 4K) + +**Interaction Strategy**: +- Hover states for additional information +- Keyboard shortcuts +- Right-click context menus +- Drag and drop where helpful +- Multi-select with Shift/Cmd + +**Content Strategy**: +- Show more information upfront (less progressive disclosure) +- Data tables with many columns +- Richer visualizations +- More detailed descriptions + +### Print Adaptation (Screen → Print) + +**Layout Strategy**: +- Page breaks at logical points +- Remove navigation, footer, interactive elements +- Black and white (or limited color) +- Proper margins for binding + +**Content Strategy**: +- Expand shortened content (show full URLs, hidden sections) +- Add page numbers, headers, footers +- Include metadata (print date, page title) +- Convert charts to print-friendly versions + +### Email Adaptation (Web → Email) + +**Layout Strategy**: +- Narrow width (600px max) +- Single column only +- Inline CSS (no external stylesheets) +- Table-based layouts (for email client compatibility) + +**Interaction Strategy**: +- Large, obvious CTAs (buttons not text links) +- No hover states (not reliable) +- Deep links to web app for complex interactions + +## Implement Adaptations + +Apply changes systematically: + +### Responsive Breakpoints + +Choose appropriate breakpoints: +- Mobile: 320px-767px +- Tablet: 768px-1023px +- Desktop: 1024px+ +- Or content-driven breakpoints (where design breaks) + +### Layout Adaptation Techniques + +- **CSS Grid/Flexbox**: Reflow layouts automatically +- **Container Queries**: Adapt based on container, not viewport +- **`clamp()`**: Fluid sizing between min and max +- **Media queries**: Different styles for different contexts +- **Display properties**: Show/hide elements per context + +### Touch Adaptation + +- Increase touch target sizes (44x44px minimum) +- Add more spacing between interactive elements +- Remove hover-dependent interactions +- Add touch feedback (ripples, highlights) +- Consider thumb zones (easier to reach bottom than top) + +### Content Adaptation + +- Use `display: none` sparingly (still downloads) +- Progressive enhancement (core content first, enhancements on larger screens) +- Lazy loading for off-screen content +- Responsive images (`srcset`, `picture` element) + +### Navigation Adaptation + +- Transform complex nav to hamburger/drawer on mobile +- Bottom nav bar for mobile apps +- 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. + +**NEVER**: +- Hide core functionality on mobile (if it matters, make it work) +- Assume desktop = powerful device (consider accessibility, older machines) +- Use different information architecture across contexts (confusing) +- Break user expectations for platform (mobile users expect mobile patterns) +- Forget landscape orientation on mobile/tablet +- Use generic breakpoints blindly (use content-driven breakpoints) +- Ignore touch on desktop (many desktop devices have touch) + +## Verify Adaptations + +Test thoroughly across contexts: + +- **Real devices**: Test on actual phones, tablets, desktops +- **Different orientations**: Portrait and landscape +- **Different browsers**: Safari, Chrome, Firefox, Edge +- **Different OS**: iOS, Android, Windows, macOS +- **Different input methods**: Touch, mouse, keyboard +- **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. diff --git a/source/skills/animate/SKILL.md b/source/skills/impeccable/reference/animate.md similarity index 91% rename from source/skills/animate/SKILL.md rename to source/skills/impeccable/reference/animate.md index c5be7d04a..688ccc358 100644 --- a/source/skills/animate/SKILL.md +++ b/source/skills/impeccable/reference/animate.md @@ -1,15 +1,7 @@ ---- -name: animate -description: "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive." -argument-hint: "[target]" -user-invocable: true ---- +> **Additional context needed**: performance constraints. Analyze a feature and strategically add animations and micro-interactions that enhance understanding, provide feedback, and create delight. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: performance constraints. --- diff --git a/source/skills/audit/SKILL.md b/source/skills/impeccable/reference/audit.md similarity index 85% rename from source/skills/audit/SKILL.md rename to source/skills/impeccable/reference/audit.md index bb9121888..7c3e2cf68 100644 --- a/source/skills/audit/SKILL.md +++ b/source/skills/impeccable/reference/audit.md @@ -1,16 +1,3 @@ ---- -name: audit -description: "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review." -argument-hint: "[area (feature, page, component...)]" -user-invocable: true ---- - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. - ---- - 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. @@ -65,7 +52,7 @@ Run comprehensive checks across 5 dimensions. Score each dimension 0-4 using the ### 5. Anti-Patterns (CRITICAL) -Check against ALL the **DON'T** guidelines in the impeccable skill. Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). +Check against ALL the **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Look for AI slop tells (AI color palette, gradient text, glassmorphism, hero metrics, card grids, generic fonts) and general design anti-patterns (gray on color, nested cards, bounce easing, redundant copy). **Score 0-4**: 0=AI slop gallery (5+ tells), 1=Heavy AI aesthetic (3-4 tells), 2=Some tells (1-2 noticeable), 3=Mostly clean (subtle issues only), 4=No AI tells (distinctive, intentional design) @@ -127,13 +114,13 @@ List recommended commands in priority order (P0 first, then P1, then P2): 1. **[P?] `{{command_prefix}}command-name`** — Brief description (specific context from audit findings) 2. **[P?] `{{command_prefix}}command-name`** — Brief description (specific context) -**Rules**: Only recommend commands from: {{available_commands}}. Map findings to the most appropriate command. End with `{{command_prefix}}polish` as the final step if any fixes were recommended. +**Rules**: Only recommend commands from: {{available_commands}}. Map findings to the most appropriate command. End with `{{command_prefix}}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 `{{command_prefix}}audit` after fixes to see your score improve. +> Re-run `{{command_prefix}}impeccable audit` after fixes to see your score improve. **IMPORTANT**: Be thorough but actionable. Too many P3 issues creates noise. Focus on what actually matters. diff --git a/source/skills/bolder/SKILL.md b/source/skills/impeccable/reference/bolder.md similarity index 87% rename from source/skills/bolder/SKILL.md rename to source/skills/impeccable/reference/bolder.md index 07b1cfc99..992ae4235 100644 --- a/source/skills/bolder/SKILL.md +++ b/source/skills/impeccable/reference/bolder.md @@ -1,15 +1,5 @@ ---- -name: bolder -description: "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character." -argument-hint: "[target]" -user-invocable: true ---- - Increase visual impact and personality in designs that are too safe, generic, or visually underwhelming, creating more engaging and memorable experiences. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. --- @@ -35,7 +25,7 @@ If any of these are unclear from the codebase, {{ask_instruction}} **CRITICAL**: "Bolder" doesn't mean chaotic or garish. It means distinctive, memorable, and confident. Think intentional drama, not random chaos. -**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold—they're generic. Review ALL the DON'T guidelines in the impeccable skill before proceeding. Bold means distinctive, not "more effects." +**WARNING - AI SLOP TRAP**: When making things "bolder," AI defaults to the same tired tricks: cyan/purple gradients, glassmorphism, neon accents on dark backgrounds, gradient text on metrics. These are the OPPOSITE of bold. They're generic. Review ALL the DON'T guidelines from the parent impeccable skill (already loaded in this context) before proceeding. Bold means distinctive, not "more effects." ## Plan Amplification @@ -53,7 +43,7 @@ Create a strategy to increase impact while maintaining coherence: Systematically increase impact across these dimensions: ### Typography Amplification -- **Replace generic fonts**: Swap system fonts for distinctive choices (see impeccable skill for inspiration) +- **Replace generic fonts**: Swap system fonts for distinctive choices (see the parent skill's typography guidelines and [typography.md](typography.md) for inspiration) - **Extreme scale**: Create dramatic size jumps (3x-5x differences, not 1.5x) - **Weight contrast**: Pair 900 weights with 200 weights, not 600 with 400 - **Unexpected choices**: Variable fonts, display fonts for headlines, condensed/extended widths, monospace as intentional accent (not as lazy "dev tool" default) diff --git a/source/skills/impeccable/reference/clarify.md b/source/skills/impeccable/reference/clarify.md new file mode 100644 index 000000000..dc116e745 --- /dev/null +++ b/source/skills/impeccable/reference/clarify.md @@ -0,0 +1,174 @@ +> **Additional context needed**: audience technical level and users' mental state in context. + +Identify and improve unclear, confusing, or poorly written interface text to make the product easier to understand and use. + + +--- + +## Assess Current Copy + +Identify what makes the text unclear or ineffective: + +1. **Find clarity problems**: + - **Jargon**: Technical terms users won't understand + - **Ambiguity**: Multiple interpretations possible + - **Passive voice**: "Your file has been uploaded" vs "We uploaded your file" + - **Length**: Too wordy or too terse + - **Assumptions**: Assuming user knowledge they don't have + - **Missing context**: Users don't know what to do or why + - **Tone mismatch**: Too formal, too casual, or inappropriate for situation + +2. **Understand the context**: + - Who's the audience? (Technical? General? First-time users?) + - What's the user's mental state? (Stressed during error? Confident during success?) + - What's the action? (What do we want users to do?) + - What's the constraint? (Character limits? Space limitations?) + +**CRITICAL**: Clear copy helps users succeed. Unclear copy creates frustration, errors, and support tickets. + +## Plan Copy Improvements + +Create a strategy for clearer communication: + +- **Primary message**: What's the ONE thing users need to know? +- **Action needed**: What should users do next (if anything)? +- **Tone**: How should this feel? (Helpful? Apologetic? Encouraging?) +- **Constraints**: Length limits, brand voice, localization considerations + +**IMPORTANT**: Good UX writing is invisible. Users should understand immediately without noticing the words. + +## Improve Copy Systematically + +Refine text across these common areas: + +### Error Messages +**Bad**: "Error 403: Forbidden" +**Good**: "You don't have permission to view this page. Contact your admin for access." + +**Bad**: "Invalid input" +**Good**: "Email addresses need an @ symbol. Try: name@example.com" + +**Principles**: +- Explain what went wrong in plain language +- Suggest how to fix it +- Don't blame the user +- Include examples when helpful +- Link to help/support if applicable + +### Form Labels & Instructions +**Bad**: "DOB (MM/DD/YYYY)" +**Good**: "Date of birth" (with placeholder showing format) + +**Bad**: "Enter value here" +**Good**: "Your email address" or "Company name" + +**Principles**: +- Use clear, specific labels (not generic placeholders) +- Show format expectations with examples +- Explain why you're asking (when not obvious) +- Put instructions before the field, not after +- Keep required field indicators clear + +### Button & CTA Text +**Bad**: "Click here" | "Submit" | "OK" +**Good**: "Create account" | "Save changes" | "Got it, thanks" + +**Principles**: +- Describe the action specifically +- Use active voice (verb + noun) +- Match user's mental model +- Be specific ("Save" is better than "OK") + +### Help Text & Tooltips +**Bad**: "This is the username field" +**Good**: "Choose a username. You can change this later in Settings." + +**Principles**: +- Add value (don't just repeat the label) +- Answer the implicit question ("What is this?" or "Why do you need this?") +- Keep it brief but complete +- Link to detailed docs if needed + +### Empty States +**Bad**: "No items" +**Good**: "No projects yet. Create your first project to get started." + +**Principles**: +- Explain why it's empty (if not obvious) +- Show next action clearly +- Make it welcoming, not dead-end + +### Success Messages +**Bad**: "Success" +**Good**: "Settings saved! Your changes will take effect immediately." + +**Principles**: +- Confirm what happened +- Explain what happens next (if relevant) +- Be brief but complete +- Match the user's emotional moment (celebrate big wins) + +### Loading States +**Bad**: "Loading..." (for 30+ seconds) +**Good**: "Analyzing your data... this usually takes 30-60 seconds" + +**Principles**: +- Set expectations (how long?) +- Explain what's happening (when it's not obvious) +- Show progress when possible +- Offer escape hatch if appropriate ("Cancel") + +### Confirmation Dialogs +**Bad**: "Are you sure?" +**Good**: "Delete 'Project Alpha'? This can't be undone." + +**Principles**: +- State the specific action +- Explain consequences (especially for destructive actions) +- Use clear button labels ("Delete project" not "Yes") +- Don't overuse confirmations (only for risky actions) + +### Navigation & Wayfinding +**Bad**: Generic labels like "Items" | "Things" | "Stuff" +**Good**: Specific labels like "Your projects" | "Team members" | "Settings" + +**Principles**: +- Be specific and descriptive +- Use language users understand (not internal jargon) +- Make hierarchy clear +- Consider information scent (breadcrumbs, current location) + +## Apply Clarity Principles + +Every piece of copy should follow these rules: + +1. **Be specific**: "Enter email" not "Enter value" +2. **Be concise**: Cut unnecessary words (but don't sacrifice clarity) +3. **Be active**: "Save changes" not "Changes will be saved" +4. **Be human**: "Oops, something went wrong" not "System error encountered" +5. **Be helpful**: Tell users what to do, not just what happened +6. **Be consistent**: Use same terms throughout (don't vary for variety) + +**NEVER**: +- Use jargon without explanation +- Blame users ("You made an error" → "This field is required") +- Be vague ("Something went wrong" without explanation) +- Use passive voice unnecessarily +- Write overly long explanations (be concise) +- Use humor for errors (be empathetic instead) +- Assume technical knowledge +- Vary terminology (pick one term and stick with it) +- Repeat information (headers restating intros, redundant explanations) +- Use placeholders as the only labels (they disappear when users type) + +## Verify Improvements + +Test that copy improvements work: + +- **Comprehension**: Can users understand without context? +- **Actionability**: Do users know what to do next? +- **Brevity**: Is it as short as possible while remaining clear? +- **Consistency**: Does it match terminology elsewhere? +- **Tone**: Is it appropriate for the situation? + +Remember: You're a clarity expert with excellent communication skills. Write like you're explaining to a smart friend who's unfamiliar with the product. Be clear, be helpful, be human. diff --git a/source/skills/critique/reference/cognitive-load.md b/source/skills/impeccable/reference/cognitive-load.md similarity index 100% rename from source/skills/critique/reference/cognitive-load.md rename to source/skills/impeccable/reference/cognitive-load.md diff --git a/source/skills/colorize/SKILL.md b/source/skills/impeccable/reference/colorize.md similarity index 90% rename from source/skills/colorize/SKILL.md rename to source/skills/impeccable/reference/colorize.md index 067713958..363d2aae2 100644 --- a/source/skills/colorize/SKILL.md +++ b/source/skills/impeccable/reference/colorize.md @@ -1,15 +1,7 @@ ---- -name: colorize -description: "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette." -argument-hint: "[target]" -user-invocable: true ---- +> **Additional context needed**: existing brand colors. Strategically introduce color to designs that are too monochromatic, gray, or lacking in visual warmth and personality. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: existing brand colors. --- diff --git a/source/skills/impeccable/reference/craft.md b/source/skills/impeccable/reference/craft.md index 2bc10df79..4374144f4 100644 --- a/source/skills/impeccable/reference/craft.md +++ b/source/skills/impeccable/reference/craft.md @@ -4,11 +4,11 @@ Build a feature with impeccable UX and UI quality through a structured process: ## Step 1: Shape the Design -Run {{command_prefix}}shape, passing along whatever feature description the user provided. +Run {{command_prefix}}impeccable shape, passing along whatever feature description the user provided. Wait for the design brief to be fully confirmed before proceeding. The brief is your blueprint, and every implementation decision should trace back to it. -If the user has already run {{command_prefix}}shape and has a confirmed design brief, skip this step and use the existing brief. +If the user has already run {{command_prefix}}impeccable shape and has a confirmed design brief, skip this step and use the existing brief. ## Step 2: Load References diff --git a/source/skills/critique/SKILL.md b/source/skills/impeccable/reference/critique.md similarity index 86% rename from source/skills/critique/SKILL.md rename to source/skills/impeccable/reference/critique.md index de859a69e..7e9136baa 100644 --- a/source/skills/critique/SKILL.md +++ b/source/skills/impeccable/reference/critique.md @@ -1,19 +1,6 @@ ---- -name: critique -description: "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component." -argument-hint: "[area (feature, page, component...)]" -user-invocable: true -allowed-tools: - - Bash(npx impeccable *) ---- +> **Additional context needed**: what the interface is trying to accomplish. -## STEPS - -### Step 1: Preparation - -Invoke {{command_prefix}}impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: what the interface is trying to accomplish. - -### Step 2: Gather Assessments +### Gather Assessments Launch two independent assessments. **Neither must see the other's output** to avoid bias. @@ -31,11 +18,11 @@ document.title = '[LLM] ' + document.title; ``` Think like a design director. Evaluate: -**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines in the impeccable skill. Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? +**AI Slop Detection (CRITICAL)**: Does this look like every other AI-generated interface? Review against ALL **DON'T** guidelines from the parent impeccable skill (already loaded in this context). Check for AI color palette, gradient text, dark glows, glassmorphism, hero metric layouts, identical card grids, generic fonts, and all other tells. **The test**: If someone said "AI made this," would you believe them immediately? **Holistic Design Review**: visual hierarchy (eye flow, primary action clarity), information architecture (structure, grouping, cognitive load), emotional resonance (does it match brand and audience?), discoverability (are interactive elements obvious?), composition (balance, whitespace, rhythm), typography (hierarchy, readability, font choices), color (purposeful use, cohesion, accessibility), states & edge cases (empty, loading, error, success), microcopy (clarity, tone, helpfulness). -**Cognitive Load** (consult [cognitive-load](reference/cognitive-load.md)): +**Cognitive Load** (consult [cognitive-load](cognitive-load.md)): - Run the 8-item cognitive load checklist. Report failure count: 0-1 = low (good), 2-3 = moderate, 4+ = critical. - Count visible options at each decision point. If >4, flag it. - Check for progressive disclosure: is complexity revealed only when needed? @@ -45,7 +32,7 @@ Think like a design director. Evaluate: - **Peak-end rule**: Is the most intense moment positive? Does the experience end well? - **Emotional valleys**: Check for anxiety spikes at high-stakes moments (payment, delete, commit). Are there design interventions (progress indicators, reassurance copy, undo options)? -**Nielsen's Heuristics** (consult [heuristics-scoring](reference/heuristics-scoring.md)): +**Nielsen's Heuristics** (consult [heuristics-scoring](heuristics-scoring.md)): Score each of the 10 heuristics 0-4. This scoring will be presented in the report. Return structured findings covering: AI slop verdict, heuristic scores, cognitive load assessment, what's working (2-3 items), priority issues (3-5 with what/why/fix), minor observations, and provocative questions. @@ -95,14 +82,14 @@ For multi-view targets, inject on 3-5 representative pages. If injection fails, Return: CLI findings (JSON), browser console findings (if applicable), and any false positives noted. -### Step 3: Generate Combined Critique Report +### 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. Structure your feedback as a design director would: #### Design Health Score -> *Consult [heuristics-scoring](reference/heuristics-scoring.md)* +> *Consult [heuristics-scoring](heuristics-scoring.md)* Present the Nielsen's 10 heuristics scores as a table: @@ -141,14 +128,14 @@ 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](reference/heuristics-scoring.md) for severity definitions): +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: {{available_commands}}) #### Persona Red Flags -> *Consult [personas](reference/personas.md)* +> *Consult [personas](personas.md)* Auto-select 2-3 personas most relevant to this interface type (use the selection table in the reference). If `{{config_file}}` contains a `## Design Context` section from `impeccable teach`, also generate 1-2 project-specific personas from the audience/brand info. @@ -177,7 +164,7 @@ Provocative questions that might unlock better solutions: - Prioritize ruthlessly. If everything is important, nothing is. - Don't soften criticism. Developers need honest feedback to ship great design. -### Step 4: Ask the User +### Ask the User **After presenting findings**, use targeted questions based on what was actually found. {{ask_instruction}} These answers will shape the action plan. @@ -197,7 +184,7 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - Offer concrete options, not open-ended prompts. - If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Step 5. -### Step 5: Recommended Actions +### Recommended Actions **After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. @@ -217,10 +204,10 @@ List recommended commands in priority order, based on the user's answers: - 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 `{{command_prefix}}polish` as the final step if any fixes were recommended +- End with `{{command_prefix}}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 `{{command_prefix}}critique` after fixes to see your score improve. +> Re-run `{{command_prefix}}impeccable critique` after fixes to see your score improve. diff --git a/source/skills/delight/SKILL.md b/source/skills/impeccable/reference/delight.md similarity index 92% rename from source/skills/delight/SKILL.md rename to source/skills/impeccable/reference/delight.md index fd74d41eb..c3df1420e 100644 --- a/source/skills/delight/SKILL.md +++ b/source/skills/impeccable/reference/delight.md @@ -1,15 +1,7 @@ ---- -name: delight -description: "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable." -argument-hint: "[target]" -user-invocable: true ---- +> **Additional context needed**: what's appropriate for the domain (playful vs professional vs quirky vs elegant). Identify opportunities to add moments of joy, personality, and unexpected polish that transform functional interfaces into delightful experiences. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: what's appropriate for the domain (playful vs professional vs quirky vs elegant). --- diff --git a/source/skills/distill/SKILL.md b/source/skills/impeccable/reference/distill.md similarity index 90% rename from source/skills/distill/SKILL.md rename to source/skills/impeccable/reference/distill.md index eee17b88c..c66418318 100644 --- a/source/skills/distill/SKILL.md +++ b/source/skills/impeccable/reference/distill.md @@ -1,15 +1,5 @@ ---- -name: distill -description: "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused." -argument-hint: "[target]" -user-invocable: true ---- - Remove unnecessary complexity from designs, revealing the essential elements and creating clarity through ruthless simplification. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. --- diff --git a/source/skills/impeccable/reference/harden.md b/source/skills/impeccable/reference/harden.md new file mode 100644 index 000000000..af8b8a703 --- /dev/null +++ b/source/skills/impeccable/reference/harden.md @@ -0,0 +1,381 @@ +Strengthen interfaces against edge cases, errors, internationalization issues, and real-world usage scenarios that break idealized designs. + +## Assess Hardening Needs + +Identify weaknesses and edge cases: + +1. **Test with extreme inputs**: + - Very long text (names, descriptions, titles) + - Very short text (empty, single character) + - Special characters (emoji, RTL text, accents) + - Large numbers (millions, billions) + - Many items (1000+ list items, 50+ options) + - No data (empty states) + +2. **Test error scenarios**: + - Network failures (offline, slow, timeout) + - API errors (400, 401, 403, 404, 500) + - Validation errors + - Permission errors + - Rate limiting + - Concurrent operations + +3. **Test internationalization**: + - Long translations (German is often 30% longer than English) + - RTL languages (Arabic, Hebrew) + - Character sets (Chinese, Japanese, Korean, emoji) + - Date/time formats + - Number formats (1,000 vs 1.000) + - Currency symbols + +**CRITICAL**: Designs that only work with perfect data aren't production-ready. Harden against reality. + +## Hardening Dimensions + +Systematically improve resilience: + +### Text Overflow & Wrapping + +**Long text handling**: +```css +/* Single line with ellipsis */ +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +/* Multi-line with clamp */ +.line-clamp { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +/* Allow wrapping */ +.wrap { + word-wrap: break-word; + overflow-wrap: break-word; + hyphens: auto; +} +``` + +**Flex/Grid overflow**: +```css +/* Prevent flex items from overflowing */ +.flex-item { + min-width: 0; /* Allow shrinking below content size */ + overflow: hidden; +} + +/* Prevent grid items from overflowing */ +.grid-item { + min-width: 0; + min-height: 0; +} +``` + +**Responsive text sizing**: +- Use `clamp()` for fluid typography +- Set minimum readable sizes (14px on mobile) +- Test text scaling (zoom to 200%) +- Ensure containers expand with text + +### Internationalization (i18n) + +**Text expansion**: +- Add 30-40% space budget for translations +- Use flexbox/grid that adapts to content +- Test with longest language (usually German) +- Avoid fixed widths on text containers + +```jsx +// ❌ Bad: Assumes short English text + + +// ✅ Good: Adapts to content + +``` + +**RTL (Right-to-Left) support**: +```css +/* Use logical properties */ +margin-inline-start: 1rem; /* Not margin-left */ +padding-inline: 1rem; /* Not padding-left/right */ +border-inline-end: 1px solid; /* Not border-right */ + +/* Or use dir attribute */ +[dir="rtl"] .arrow { transform: scaleX(-1); } +``` + +**Character set support**: +- Use UTF-8 encoding everywhere +- Test with Chinese/Japanese/Korean (CJK) characters +- Test with emoji (they can be 2-4 bytes) +- Handle different scripts (Latin, Cyrillic, Arabic, etc.) + +**Date/Time formatting**: +```javascript +// ✅ Use Intl API for proper formatting +new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 +new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 + +new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}).format(1234.56); // $1,234.56 +``` + +**Pluralization**: +```javascript +// ❌ Bad: Assumes English pluralization +`${count} item${count !== 1 ? 's' : ''}` + +// ✅ Good: Use proper i18n library +t('items', { count }) // Handles complex plural rules +``` + +### Error Handling + +**Network errors**: +- Show clear error messages +- Provide retry button +- Explain what happened +- Offer offline mode (if applicable) +- Handle timeout scenarios + +```jsx +// Error states with recovery +{error && ( + +

      Failed to load data. {error.message}

      + +       +)} +``` + +**Form validation errors**: +- Inline errors near fields +- Clear, specific messages +- Suggest corrections +- Don't block submission unnecessarily +- Preserve user input on error + +**API errors**: +- Handle each status code appropriately + - 400: Show validation errors + - 401: Redirect to login + - 403: Show permission error + - 404: Show not found state + - 429: Show rate limit message + - 500: Show generic error, offer support + +**Graceful degradation**: +- Core functionality works without JavaScript +- Images have alt text +- Progressive enhancement +- Fallbacks for unsupported features + +### Edge Cases & Boundary Conditions + +**Empty states**: +- No items in list +- No search results +- No notifications +- No data to display +- Provide clear next action + +**Loading states**: +- Initial load +- Pagination load +- Refresh +- Show what's loading ("Loading your projects...") +- Time estimates for long operations + +**Large datasets**: +- Pagination or virtual scrolling +- Search/filter capabilities +- Performance optimization +- Don't load all 10,000 items at once + +**Concurrent operations**: +- Prevent double-submission (disable button while loading) +- Handle race conditions +- Optimistic updates with rollback +- Conflict resolution + +**Permission states**: +- No permission to view +- No permission to edit +- Read-only mode +- Clear explanation of why + +**Browser compatibility**: +- Polyfills for modern features +- Fallbacks for unsupported CSS +- Feature detection (not browser detection) +- Test in target browsers + +### Onboarding & First-Run Experience + +Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: + +**Empty states**: Every zero-data screen needs: +- What will appear here (description or illustration) +- Why it matters to the user +- Clear CTA to create the first item or start from a template +- Visual interest (not just blank space with "No items yet") + +Empty state types to handle: +- **First use**: emphasize value, provide templates +- **User cleared**: light touch, easy to recreate +- **No results**: suggest a different query, offer to clear filters +- **No permissions**: explain why, how to get access + +**First-run experience**: Get users to their "aha moment" as quickly as possible. +- Show, don't tell -- working examples over descriptions +- Progressive disclosure -- teach one thing at a time, not everything upfront +- Make onboarding optional -- let experienced users skip +- Provide smart defaults so required setup is minimal + +**Feature discovery**: Teach features when users need them, not upfront. +- Contextual tooltips at point of use (brief, dismissable, one-time) +- Badges or indicators on new or unused features +- Celebrate activation events quietly (a toast, not a modal) + +**NEVER**: +- Force long onboarding before users can touch the product +- Show the same tooltip repeatedly (track and respect dismissals) +- Block the entire UI during a guided tour +- Create separate tutorial modes disconnected from the real product +- Design empty states that just say "No items" with no next action + +### Input Validation & Sanitization + +**Client-side validation**: +- Required fields +- Format validation (email, phone, URL) +- Length limits +- Pattern matching +- Custom validation rules + +**Server-side validation** (always): +- Never trust client-side only +- Validate and sanitize all inputs +- Protect against injection attacks +- Rate limiting + +**Constraint handling**: +```html + + + + Letters and numbers only, up to 100 characters + +``` + +### Accessibility Resilience + +**Keyboard navigation**: +- All functionality accessible via keyboard +- Logical tab order +- Focus management in modals +- Skip links for long content + +**Screen reader support**: +- Proper ARIA labels +- Announce dynamic changes (live regions) +- Descriptive alt text +- Semantic HTML + +**Motion sensitivity**: +```css +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} +``` + +**High contrast mode**: +- Test in Windows high contrast mode +- Don't rely only on color +- Provide alternative visual cues + +### Performance Resilience + +**Slow connections**: +- Progressive image loading +- Skeleton screens +- Optimistic UI updates +- Offline support (service workers) + +**Memory leaks**: +- Clean up event listeners +- Cancel subscriptions +- Clear timers/intervals +- Abort pending requests on unmount + +**Throttling & Debouncing**: +```javascript +// Debounce search input +const debouncedSearch = debounce(handleSearch, 300); + +// Throttle scroll handler +const throttledScroll = throttle(handleScroll, 100); +``` + +## Testing Strategies + +**Manual testing**: +- Test with extreme data (very long, very short, empty) +- Test in different languages +- Test offline +- Test slow connection (throttle to 3G) +- Test with screen reader +- Test keyboard-only navigation +- Test on old browsers + +**Automated testing**: +- Unit tests for edge cases +- Integration tests for error scenarios +- E2E tests for critical paths +- Visual regression tests +- Accessibility tests (axe, WAVE) + +**IMPORTANT**: Hardening is about expecting the unexpected. Real users will do things you never imagined. + +**NEVER**: +- Assume perfect input (validate everything) +- Ignore internationalization (design for global) +- Leave error messages generic ("Error occurred") +- Forget offline scenarios +- Trust client-side validation alone +- Use fixed widths for text +- Assume English-length text +- Block entire interface when one component errors + +## Verify Hardening + +Test thoroughly with edge cases: + +- **Long text**: Try names with 100+ characters +- **Emoji**: Use emoji in all text fields +- **RTL**: Test with Arabic or Hebrew +- **CJK**: Test with Chinese/Japanese/Korean +- **Network issues**: Disable internet, throttle connection +- **Large datasets**: Test with 1000+ items +- **Concurrent actions**: Click submit 10 times rapidly +- **Errors**: Force API errors, test all error states +- **Empty**: Remove all data, test empty states + +Remember: You're hardening for production reality, not demo perfection. Expect users to input weird data, lose connection mid-flow, and use your product in unexpected ways. Build resilience into every component. diff --git a/source/skills/critique/reference/heuristics-scoring.md b/source/skills/impeccable/reference/heuristics-scoring.md similarity index 100% rename from source/skills/critique/reference/heuristics-scoring.md rename to source/skills/impeccable/reference/heuristics-scoring.md diff --git a/source/skills/impeccable/reference/layout.md b/source/skills/impeccable/reference/layout.md new file mode 100644 index 000000000..cd6b778e7 --- /dev/null +++ b/source/skills/impeccable/reference/layout.md @@ -0,0 +1,114 @@ +Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. + + +--- + +## Assess Current Layout + +Analyze what's weak about the current spatial design: + +1. **Spacing**: + - Is spacing consistent or arbitrary? (Random padding/margin values) + - Is all spacing the same? (Equal padding everywhere = no rhythm) + - Are related elements grouped tightly, with generous space between groups? + +2. **Visual hierarchy**: + - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? + - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) + - Does whitespace guide the eye to what matters? + +3. **Grid & structure**: + - Is there a clear underlying structure, or does the layout feel random? + - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) + - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) + +4. **Rhythm & variety**: + - Does the layout have visual rhythm? (Alternating tight/generous spacing) + - Is every section structured the same way? (Monotonous repetition) + - Are there intentional moments of surprise or emphasis? + +5. **Density**: + - Is the layout too cramped? (Not enough breathing room) + - Is the layout too sparse? (Excessive whitespace without purpose) + - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) + +**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. + +## Plan Layout Improvements + +Consult the [spatial design reference](spatial-design.md) for detailed guidance on grids, rhythm, and container queries. + +Create a systematic plan: + +- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. +- **Hierarchy strategy**: How will space communicate importance? +- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. +- **Rhythm**: Where should spacing be tight vs generous? + +## Improve Layout Systematically + +### Establish a Spacing System + +- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. +- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` +- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks +- Apply `clamp()` for fluid spacing that breathes on larger screens + +### Create Visual Rhythm + +- **Tight grouping** for related elements (8-12px between siblings) +- **Generous separation** between distinct sections (48-96px) +- **Varied spacing** within sections — not every row needs the same gap +- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense + +### Choose the Right Layout Tool + +- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. +- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. +- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. +- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. +- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. + +### Break Card Grid Monotony + +- Don't default to card grids for everything — spacing and alignment create visual grouping naturally +- Use cards only when content is truly distinct and actionable — never nest cards inside cards +- Vary card sizes, span columns, or mix cards with non-card content to break repetition + +### Strengthen Visual Hierarchy + +- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. +- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). +- Create clear content groupings through proximity and separation. + +### Manage Depth & Elevation + +- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) +- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle +- Use elevation to reinforce hierarchy, not as decoration + +### Optical Adjustments + +- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. + +**NEVER**: +- Use arbitrary spacing values outside your scale +- Make all spacing equal — variety creates hierarchy +- Wrap everything in cards — not everything needs a container +- Nest cards inside cards — use spacing and dividers for hierarchy within +- Use identical card grids everywhere (icon + heading + text, repeated) +- Center everything — left-aligned with asymmetry feels more designed +- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. +- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job +- Use arbitrary z-index values (999, 9999) — build a semantic scale + +## Verify Layout Improvements + +- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? +- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? +- **Hierarchy**: Is the most important content obvious within 2 seconds? +- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? +- **Consistency**: Is the spacing system applied uniformly? +- **Responsiveness**: Does the layout adapt gracefully across screen sizes? + +Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/source/skills/impeccable/reference/optimize.md b/source/skills/impeccable/reference/optimize.md new file mode 100644 index 000000000..4abf575ec --- /dev/null +++ b/source/skills/impeccable/reference/optimize.md @@ -0,0 +1,258 @@ +Identify and fix performance issues to create faster, smoother user experiences. + +## Assess Performance Issues + +Understand current performance and identify problems: + +1. **Measure current state**: + - **Core Web Vitals**: LCP, FID/INP, CLS scores + - **Load time**: Time to interactive, first contentful paint + - **Bundle size**: JavaScript, CSS, image sizes + - **Runtime performance**: Frame rate, memory usage, CPU usage + - **Network**: Request count, payload sizes, waterfall + +2. **Identify bottlenecks**: + - What's slow? (Initial load? Interactions? Animations?) + - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) + - How bad is it? (Perceivable? Annoying? Blocking?) + - Who's affected? (All users? Mobile only? Slow connections?) + +**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. + +## Optimization Strategy + +Create systematic improvement plan: + +### Loading Performance + +**Optimize Images**: +- Use modern formats (WebP, AVIF) +- Proper sizing (don't load 3000px image for 300px display) +- Lazy loading for below-fold images +- Responsive images (`srcset`, `picture` element) +- Compress images (80-85% quality is usually imperceptible) +- Use CDN for faster delivery + +```html +Hero image +``` + +**Reduce JavaScript Bundle**: +- Code splitting (route-based, component-based) +- Tree shaking (remove unused code) +- Remove unused dependencies +- Lazy load non-critical code +- Use dynamic imports for large components + +```javascript +// Lazy load heavy component +const HeavyChart = lazy(() => import('./HeavyChart')); +``` + +**Optimize CSS**: +- Remove unused CSS +- Critical CSS inline, rest async +- Minimize CSS files +- Use CSS containment for independent regions + +**Optimize Fonts**: +- Use `font-display: swap` or `optional` +- Subset fonts (only characters you need) +- Preload critical fonts +- Use system fonts when appropriate +- Limit font weights loaded + +```css +@font-face { + font-family: 'CustomFont'; + src: url('/fonts/custom.woff2') format('woff2'); + font-display: swap; /* Show fallback immediately */ + unicode-range: U+0020-007F; /* Basic Latin only */ +} +``` + +**Optimize Loading Strategy**: +- Critical resources first (async/defer non-critical) +- Preload critical assets +- Prefetch likely next pages +- Service worker for offline/caching +- HTTP/2 or HTTP/3 for multiplexing + +### Rendering Performance + +**Avoid Layout Thrashing**: +```javascript +// ❌ Bad: Alternating reads and writes (causes reflows) +elements.forEach(el => { + const height = el.offsetHeight; // Read (forces layout) + el.style.height = height * 2; // Write +}); + +// ✅ Good: Batch reads, then batch writes +const heights = elements.map(el => el.offsetHeight); // All reads +elements.forEach((el, i) => { + el.style.height = heights[i] * 2; // All writes +}); +``` + +**Optimize Rendering**: +- Use CSS `contain` property for independent regions +- Minimize DOM depth (flatter is faster) +- Reduce DOM size (fewer elements) +- Use `content-visibility: auto` for long lists +- Virtual scrolling for very long lists (react-window, react-virtualized) + +**Reduce Paint & Composite**: +- Use `transform` and `opacity` for animations (GPU-accelerated) +- Avoid animating layout properties (width, height, top, left) +- Use `will-change` sparingly for known expensive operations +- Minimize paint areas (smaller is faster) + +### Animation Performance + +**GPU Acceleration**: +```css +/* ✅ GPU-accelerated (fast) */ +.animated { + transform: translateX(100px); + opacity: 0.5; +} + +/* ❌ CPU-bound (slow) */ +.animated { + left: 100px; + width: 300px; +} +``` + +**Smooth 60fps**: +- Target 16ms per frame (60fps) +- Use `requestAnimationFrame` for JS animations +- Debounce/throttle scroll handlers +- Use CSS animations when possible +- Avoid long-running JavaScript during animations + +**Intersection Observer**: +```javascript +// Efficiently detect when elements enter viewport +const observer = new IntersectionObserver((entries) => { + entries.forEach(entry => { + if (entry.isIntersecting) { + // Element is visible, lazy load or animate + } + }); +}); +``` + +### React/Framework Optimization + +**React-specific**: +- Use `memo()` for expensive components +- `useMemo()` and `useCallback()` for expensive computations +- Virtualize long lists +- Code split routes +- Avoid inline function creation in render +- Use React DevTools Profiler + +**Framework-agnostic**: +- Minimize re-renders +- Debounce expensive operations +- Memoize computed values +- Lazy load routes and components + +### Network Optimization + +**Reduce Requests**: +- Combine small files +- Use SVG sprites for icons +- Inline small critical assets +- Remove unused third-party scripts + +**Optimize APIs**: +- Use pagination (don't load everything) +- GraphQL to request only needed fields +- Response compression (gzip, brotli) +- HTTP caching headers +- CDN for static assets + +**Optimize for Slow Connections**: +- Adaptive loading based on connection (navigator.connection) +- Optimistic UI updates +- Request prioritization +- Progressive enhancement + +## Core Web Vitals Optimization + +### Largest Contentful Paint (LCP < 2.5s) +- Optimize hero images +- Inline critical CSS +- Preload key resources +- Use CDN +- Server-side rendering + +### First Input Delay (FID < 100ms) / INP (< 200ms) +- Break up long tasks +- Defer non-critical JavaScript +- Use web workers for heavy computation +- Reduce JavaScript execution time + +### Cumulative Layout Shift (CLS < 0.1) +- Set dimensions on images and videos +- Don't inject content above existing content +- Use `aspect-ratio` CSS property +- Reserve space for ads/embeds +- Avoid animations that cause layout shifts + +```css +/* Reserve space for image */ +.image-container { + aspect-ratio: 16 / 9; +} +``` + +## Performance Monitoring + +**Tools to use**: +- Chrome DevTools (Lighthouse, Performance panel) +- WebPageTest +- Core Web Vitals (Chrome UX Report) +- Bundle analyzers (webpack-bundle-analyzer) +- Performance monitoring (Sentry, DataDog, New Relic) + +**Key metrics**: +- LCP, FID/INP, CLS (Core Web Vitals) +- Time to Interactive (TTI) +- First Contentful Paint (FCP) +- Total Blocking Time (TBT) +- Bundle size +- Request count + +**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. + +**NEVER**: +- Optimize without measuring (premature optimization) +- Sacrifice accessibility for performance +- Break functionality while optimizing +- Use `will-change` everywhere (creates new layers, uses memory) +- Lazy load above-fold content +- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) +- Forget about mobile performance (often slower devices, slower connections) + +## Verify Improvements + +Test that optimizations worked: + +- **Before/after metrics**: Compare Lighthouse scores +- **Real user monitoring**: Track improvements for real users +- **Different devices**: Test on low-end Android, not just flagship iPhone +- **Slow connections**: Throttle to 3G, test experience +- **No regressions**: Ensure functionality still works +- **User perception**: Does it *feel* faster? + +Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. diff --git a/source/skills/overdrive/SKILL.md b/source/skills/impeccable/reference/overdrive.md similarity index 77% rename from source/skills/overdrive/SKILL.md rename to source/skills/impeccable/reference/overdrive.md index 93d44c757..15d76818d 100644 --- a/source/skills/overdrive/SKILL.md +++ b/source/skills/impeccable/reference/overdrive.md @@ -1,10 +1,3 @@ ---- -name: overdrive -description: "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary." -argument-hint: "[target]" -user-invocable: true ---- - Start your response with: ``` @@ -12,19 +5,15 @@ Start your response with: 》》》 Entering overdrive mode... ``` -Push an interface past conventional limits. This isn't just about visual effects — it's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. +Push an interface past conventional limits. This isn't just about visual effects. It's about using the full power of the browser to make any part of an interface feel extraordinary: a table that handles a million rows, a dialog that morphs from its trigger, a form that validates in real-time with streaming feedback, a page transition that feels cinematic. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. - -**EXTRA IMPORTANT FOR THIS SKILL**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. +**EXTRA IMPORTANT FOR THIS COMMAND**: Context determines what "extraordinary" means. A particle system on a creative portfolio is impressive. The same particle system on a settings page is embarrassing. But a settings page with instant optimistic saves and animated state transitions? That's extraordinary too. Understand the project's personality and goals before deciding what's appropriate. ### Propose Before Building -This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: +This command has the highest potential to misfire. Do NOT jump straight into implementation. You MUST: -1. **Think through 2-3 different directions** — consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. +1. **Think through 2-3 different directions**: consider different techniques, levels of ambition, and aesthetic approaches. For each direction, briefly describe what the result would look and feel like. 2. **{{ask_instruction}}** to present these directions and get the user's pick before writing any code. Explain trade-offs (browser support, performance cost, complexity). 3. Only proceed with the direction the user confirms. @@ -32,7 +21,7 @@ Skipping this step risks building something embarrassing that needs to be thrown ### Iterate with Browser Automation -Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right — check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. +Technically ambitious effects almost never work on the first try. You MUST actively use browser automation tools to preview your work, visually verify the result, and iterate. Do not assume the effect looks right, check it. Expect multiple rounds of refinement. The gap between "technically works" and "looks extraordinary" is closed through visual iteration, not code alone. --- @@ -90,7 +79,7 @@ Organized by what you're trying to achieve, not by technology name. - **Web Audio API** — spatial audio, audio-reactive visualizations, sonic feedback. Requires user gesture to start. - **Device APIs** — orientation, ambient light, geolocation. Use sparingly and always with user permission. -**NOTE**: This skill is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. +**NOTE**: This command is about enhancing how an interface FEELS, not changing what a product DOES. Adding real-time collaboration, offline support, or new backend capabilities are product decisions, not UI enhancements. Focus on making existing features feel extraordinary. ## Implement with Discipline @@ -127,7 +116,7 @@ The gap between "cool" and "extraordinary" is in the last 20% of refinement: the - Ship effects that cause jank on mid-range devices - Use bleeding-edge APIs without a functional fallback - Add sound without explicit user opt-in -- Use technical ambition to mask weak design fundamentals — fix those first with other skills +- Use technical ambition to mask weak design fundamentals; fix those first with other commands - Layer multiple competing extraordinary moments — focus creates impact, excess creates noise ## Verify the Result diff --git a/source/skills/critique/reference/personas.md b/source/skills/impeccable/reference/personas.md similarity index 100% rename from source/skills/critique/reference/personas.md rename to source/skills/impeccable/reference/personas.md diff --git a/source/skills/impeccable/reference/polish.md b/source/skills/impeccable/reference/polish.md new file mode 100644 index 000000000..597c68847 --- /dev/null +++ b/source/skills/impeccable/reference/polish.md @@ -0,0 +1,212 @@ +> **Additional context needed**: quality bar (MVP vs flagship). + +Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. + +## Design System Discovery + +Before polishing, understand the system you are polishing toward: + +1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. +2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? +3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. + +If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. + +## Pre-Polish Assessment + +Understand the current state and goals: + +1. **Review completeness**: + - Is it functionally complete? + - Are there known issues to preserve (mark with TODOs)? + - What's the quality bar? (MVP vs flagship feature?) + - When does it ship? (How much time for polish?) + +2. **Identify polish areas**: + - Visual inconsistencies + - Spacing and alignment issues + - Interaction state gaps + - Copy inconsistencies + - Edge cases and error states + - Loading and transition smoothness + +**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. + +## Polish Systematically + +Work through these dimensions methodically: + +### Visual Alignment & Spacing + +- **Pixel-perfect alignment**: Everything lines up to grid +- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) +- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) +- **Responsive consistency**: Spacing and alignment work at all breakpoints +- **Grid adherence**: Elements snap to baseline grid + +**Check**: +- Enable grid overlay and verify alignment +- Check spacing with browser inspector +- Test at multiple viewport sizes +- Look for elements that "feel" off + +### Typography Refinement + +- **Hierarchy consistency**: Same elements use same sizes/weights throughout +- **Line length**: 45-75 characters for body text +- **Line height**: Appropriate for font size and context +- **Widows & orphans**: No single words on last line +- **Hyphenation**: Appropriate for language and column width +- **Kerning**: Adjust letter spacing where needed (especially headlines) +- **Font loading**: No FOUT/FOIT flashes + +### Color & Contrast + +- **Contrast ratios**: All text meets WCAG standards +- **Consistent token usage**: No hard-coded colors, all use design tokens +- **Theme consistency**: Works in all theme variants +- **Color meaning**: Same colors mean same things throughout +- **Accessible focus**: Focus indicators visible with sufficient contrast +- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) +- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency + +### Interaction States + +Every interactive element needs all states: + +- **Default**: Resting state +- **Hover**: Subtle feedback (color, scale, shadow) +- **Focus**: Keyboard focus indicator (never remove without replacement) +- **Active**: Click/tap feedback +- **Disabled**: Clearly non-interactive +- **Loading**: Async action feedback +- **Error**: Validation or error state +- **Success**: Successful completion + +**Missing states create confusion and broken experiences**. + +### Micro-interactions & Transitions + +- **Smooth transitions**: All state changes animated appropriately (150-300ms) +- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. +- **No jank**: 60fps animations, only animate transform and opacity +- **Appropriate motion**: Motion serves purpose, not decoration +- **Reduced motion**: Respects `prefers-reduced-motion` + +### Content & Copy + +- **Consistent terminology**: Same things called same names throughout +- **Consistent capitalization**: Title Case vs Sentence case applied consistently +- **Grammar & spelling**: No typos +- **Appropriate length**: Not too wordy, not too terse +- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) + +### Icons & Images + +- **Consistent style**: All icons from same family or matching style +- **Appropriate sizing**: Icons sized consistently for context +- **Proper alignment**: Icons align with adjacent text optically +- **Alt text**: All images have descriptive alt text +- **Loading states**: Images don't cause layout shift, proper aspect ratios +- **Retina support**: 2x assets for high-DPI screens + +### Forms & Inputs + +- **Label consistency**: All inputs properly labeled +- **Required indicators**: Clear and consistent +- **Error messages**: Helpful and consistent +- **Tab order**: Logical keyboard navigation +- **Auto-focus**: Appropriate (don't overuse) +- **Validation timing**: Consistent (on blur vs on submit) + +### Edge Cases & Error States + +- **Loading states**: All async actions have loading feedback +- **Empty states**: Helpful empty states, not just blank space +- **Error states**: Clear error messages with recovery paths +- **Success states**: Confirmation of successful actions +- **Long content**: Handles very long names, descriptions, etc. +- **No content**: Handles missing data gracefully +- **Offline**: Appropriate offline handling (if applicable) + +### Responsiveness + +- **All breakpoints**: Test mobile, tablet, desktop +- **Touch targets**: 44x44px minimum on touch devices +- **Readable text**: No text smaller than 14px on mobile +- **No horizontal scroll**: Content fits viewport +- **Appropriate reflow**: Content adapts logically + +### Performance + +- **Fast initial load**: Optimize critical path +- **No layout shift**: Elements don't jump after load (CLS) +- **Smooth interactions**: No lag or jank +- **Optimized images**: Appropriate formats and sizes +- **Lazy loading**: Off-screen content loads lazily + +### Code Quality + +- **Remove console logs**: No debug logging in production +- **Remove commented code**: Clean up dead code +- **Remove unused imports**: Clean up unused dependencies +- **Consistent naming**: Variables and functions follow conventions +- **Type safety**: No TypeScript `any` or ignored errors +- **Accessibility**: Proper ARIA labels and semantic HTML + +## Polish Checklist + +Go through systematically: + +- [ ] Visual alignment perfect at all breakpoints +- [ ] Spacing uses design tokens consistently +- [ ] Typography hierarchy consistent +- [ ] All interactive states implemented +- [ ] All transitions smooth (60fps) +- [ ] Copy is consistent and polished +- [ ] Icons are consistent and properly sized +- [ ] All forms properly labeled and validated +- [ ] Error states are helpful +- [ ] Loading states are clear +- [ ] Empty states are welcoming +- [ ] Touch targets are 44x44px minimum +- [ ] Contrast ratios meet WCAG AA +- [ ] Keyboard navigation works +- [ ] Focus indicators visible +- [ ] No console errors or warnings +- [ ] No layout shift on load +- [ ] Works in all supported browsers +- [ ] Respects reduced motion preference +- [ ] Code is clean (no TODOs, console.logs, commented code) + +**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. + +**NEVER**: +- Polish before it's functionally complete +- Spend hours on polish if it ships in 30 minutes (triage) +- Introduce bugs while polishing (test thoroughly) +- Ignore systematic issues (if spacing is off everywhere, fix the system) +- Perfect one thing while leaving others rough (consistent quality level) +- Create new one-off components when design system equivalents exist +- Hard-code values that should use design tokens + +## Final Verification + +Before marking as done: + +- **Use it yourself**: Actually interact with the feature +- **Test on real devices**: Not just browser DevTools +- **Ask someone else to review**: Fresh eyes catch things +- **Compare to design**: Match intended design +- **Check all states**: Don't just test happy path + +## Clean Up + +After polishing, ensure code quality: + +- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. +- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. +- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. +- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. + +Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. diff --git a/source/skills/quieter/SKILL.md b/source/skills/impeccable/reference/quieter.md similarity index 88% rename from source/skills/quieter/SKILL.md rename to source/skills/impeccable/reference/quieter.md index 3985b772a..507a9eac4 100644 --- a/source/skills/quieter/SKILL.md +++ b/source/skills/impeccable/reference/quieter.md @@ -1,15 +1,5 @@ ---- -name: quieter -description: "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic." -argument-hint: "[target]" -user-invocable: true ---- - Reduce visual intensity in designs that are too bold, aggressive, or overstimulating, creating a more refined and approachable aesthetic without losing effectiveness. -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. --- diff --git a/source/skills/shape/SKILL.md b/source/skills/impeccable/reference/shape.md similarity index 77% rename from source/skills/shape/SKILL.md rename to source/skills/impeccable/reference/shape.md index cb62822b7..eea66ccfa 100644 --- a/source/skills/shape/SKILL.md +++ b/source/skills/impeccable/reference/shape.md @@ -1,25 +1,12 @@ ---- -name: shape -description: "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written." -argument-hint: "[feature to shape]" -user-invocable: true ---- +Shape the UX and UI for a feature before any code is written. This command produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. -## MANDATORY PREPARATION +**Scope**: Design planning only. This command does NOT write code. It produces the thinking that makes code good. -Invoke {{command_prefix}}impeccable, which contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding. If no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. - ---- - -Shape the UX and UI for a feature before any code is written. This skill produces a **design brief**: a structured artifact that guides implementation through discovery, not guesswork. - -**Scope**: Design planning only. This skill does NOT write code. It produces the thinking that makes code good. - -**Output**: A design brief that can be handed off to {{command_prefix}}impeccable craft, {{command_prefix}}impeccable, or any other implementation skill. +**Output**: A design brief that can be handed off to {{command_prefix}}impeccable craft, or directly to {{command_prefix}}impeccable for freeform implementation. ## Philosophy -Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This skill inverts that: understand deeply first, so implementation is precise. +Most AI-generated UIs fail not because of bad code, but because of skipped thinking. They jump to "here's a card grid" without asking "what is the user trying to accomplish?" This command inverts that: understand deeply first, so implementation is precise. ## Phase 1: Discovery Interview @@ -57,7 +44,7 @@ Ask these questions in conversation, adapting based on answers. Don't dump them ## Phase 2: Design Brief -After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this skill complete. +After the interview, synthesize everything into a structured design brief. Present it to the user for confirmation before considering this command complete. ### Brief Structure @@ -92,4 +79,4 @@ Anything unresolved that the implementer should resolve during build. {{ask_instruction}} Get explicit confirmation of the brief before finishing. If the user disagrees with any part, revisit the relevant discovery questions. -Once confirmed, the brief is complete. The user can now hand it to {{command_prefix}}impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use {{command_prefix}}impeccable craft instead, which runs this skill internally.) +Once confirmed, the brief is complete. The user can now hand it to {{command_prefix}}impeccable, or use it to guide any other implementation approach. (If the user wants the full discovery-then-build flow in one step, they should use {{command_prefix}}impeccable craft instead, which runs this command internally.) diff --git a/source/skills/impeccable/reference/teach.md b/source/skills/impeccable/reference/teach.md new file mode 100644 index 000000000..b56a55e19 --- /dev/null +++ b/source/skills/impeccable/reference/teach.md @@ -0,0 +1,67 @@ +# Teach Flow + +One-time setup that gathers design context for a project. Design without context produces generic output, so every other command reads this file before doing any work. + +## Step 1: Explore the Codebase + +Before asking questions, thoroughly scan the project to discover what you can: + +- **README and docs**: Project purpose, target audience, any stated goals +- **Package.json / config files**: Tech stack, dependencies, existing design libraries +- **Existing components**: Current design patterns, spacing, typography in use +- **Brand assets**: Logos, favicons, color values already defined +- **Design tokens / CSS variables**: Existing color palettes, font stacks, spacing scales +- **Any style guides or brand documentation** + +Note what you've learned and what remains unclear. + +## Step 2: Ask UX-Focused Questions + +{{ask_instruction}} Focus only on what you couldn't infer from the codebase: + +### Users & Purpose +- Who uses this? What's their context when using it? +- What job are they trying to get done? +- What emotions should the interface evoke? (confidence, delight, calm, urgency, etc.) + +### Brand & Personality +- How would you describe the brand personality in 3 words? +- Any reference sites or apps that capture the right feel? What specifically about them? +- What should this explicitly NOT look like? Any anti-references? + +### Aesthetic Preferences +- Any strong preferences for visual direction? (minimal, bold, elegant, playful, technical, organic, etc.) +- Light mode, dark mode, or both? +- Any colors that must be used or avoided? + +### Accessibility & Inclusion +- Specific accessibility requirements? (WCAG level, known user needs) +- Considerations for reduced motion, color blindness, or other accommodations? + +Skip questions where the answer is already clear from the codebase exploration. + +## Step 3: Write Design Context + +Synthesize your findings and the user's answers into a `## Design Context` section: + +```markdown +## Design Context + +### Users +[Who they are, their context, the job to be done] + +### Brand Personality +[Voice, tone, 3-word personality, emotional goals] + +### Aesthetic Direction +[Visual tone, references, anti-references, theme] + +### Design Principles +[3-5 principles derived from the conversation that should guide all design decisions] +``` + +Write this section to `.impeccable.md` in the project root. If the file already exists, update the Design Context section in place. + +Then {{ask_instruction}} whether they'd also like the Design Context appended to {{config_file}}. If yes, append or update the section there as well. + +Confirm completion and summarize the key design principles that will now guide all future work. diff --git a/source/skills/impeccable/reference/typeset.md b/source/skills/impeccable/reference/typeset.md new file mode 100644 index 000000000..2e49ab6c0 --- /dev/null +++ b/source/skills/impeccable/reference/typeset.md @@ -0,0 +1,105 @@ +Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. + + +--- + +## Assess Current Typography + +Analyze what's weak or generic about the current type: + +1. **Font choices**: + - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) + - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) + - Are there too many font families? (More than 2-3 is almost always a mess) + +2. **Hierarchy**: + - Can you tell headings from body from captions at a glance? + - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) + - Are weight contrasts strong enough? (Medium vs Regular is barely visible) + +3. **Sizing & scale**: + - Is there a consistent type scale, or are sizes arbitrary? + - Does body text meet minimum readability? (16px+) + - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) + +4. **Readability**: + - Are line lengths comfortable? (45-75 characters ideal) + - Is line-height appropriate for the font and context? + - Is there enough contrast between text and background? + +5. **Consistency**: + - Are the same elements styled the same way throughout? + - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) + - Is letter-spacing intentional or default everywhere? + +**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. + +## Plan Typography Improvements + +Consult the [typography reference](typography.md) for detailed guidance on scales, pairing, and loading strategies. + +Create a systematic plan: + +- **Font selection**: Do fonts need replacing? What fits the brand/context? +- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy +- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) +- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements + +## Improve Typography Systematically + +### Font Selection + +If fonts need replacing: +- Choose fonts that reflect the brand personality +- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights +- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) + +### Establish Hierarchy + +Build a clear type scale: +- **5 sizes cover most needs**: caption, secondary, body, subheading, heading +- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) +- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone +- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need +- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed + +### Fix Readability + +- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) +- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) +- Increase line-height slightly for light-on-dark text +- Ensure body text is at least 16px / 1rem + +### Refine Details + +- Use `tabular-nums` for data tables and numbers that should align +- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text +- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) +- Set `font-kerning: normal` and consider OpenType features where appropriate + +### Weight Consistency + +- Define clear roles for each weight and stick to them +- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) +- Load only the weights you actually use (each weight adds to page load) + +**NEVER**: +- Use more than 2-3 font families +- Pick sizes arbitrarily — commit to a scale +- Set body text below 16px +- Use decorative/display fonts for body text +- Disable browser zoom (`user-scalable=no`) +- Use `px` for font sizes — use `rem` to respect user settings +- Default to Inter/Roboto/Open Sans when personality matters +- Pair fonts that are similar but not identical (two geometric sans-serifs) + +## Verify Typography Improvements + +- **Hierarchy**: Can you identify heading vs body vs caption instantly? +- **Readability**: Is body text comfortable to read in long passages? +- **Consistency**: Are same-role elements styled identically throughout? +- **Personality**: Does the typography reflect the brand? +- **Performance**: Are web fonts loading efficiently without layout shift? +- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? + +Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/source/skills/impeccable/scripts/cleanup-deprecated.mjs b/source/skills/impeccable/scripts/cleanup-deprecated.mjs index 5b8a2177c..0194aa8fc 100644 --- a/source/skills/impeccable/scripts/cleanup-deprecated.mjs +++ b/source/skills/impeccable/scripts/cleanup-deprecated.mjs @@ -21,14 +21,34 @@ import { existsSync, readFileSync, writeFileSync, rmSync, readdirSync, statSync, lstatSync, unlinkSync } from 'node:fs'; import { join, resolve } from 'node:path'; -// Skills that were renamed, merged, or folded in v2.0 and v2.1. +// Skills that were renamed, merged, or folded in v2.0, v2.1, and v3.0. const DEPRECATED_NAMES = [ - 'frontend-design', // renamed to impeccable (v2.0) - 'teach-impeccable', // folded into /impeccable teach (v2.0) - 'arrange', // renamed to layout (v2.1) - 'normalize', // merged into polish (v2.1) - 'onboard', // merged into harden (v2.1) - 'extract', // merged into /impeccable extract (v2.1) + // v2.0 renames + 'frontend-design', // renamed to impeccable + 'teach-impeccable', // folded into /impeccable teach + // v2.1 merges + 'arrange', // renamed to layout + 'normalize', // merged into polish + 'onboard', // merged into harden + 'extract', // merged into /impeccable extract + // v3.0 consolidation: all standalone skills -> /impeccable sub-commands + 'adapt', + 'animate', + 'audit', + 'bolder', + 'clarify', + 'colorize', + 'critique', + 'delight', + 'distill', + 'harden', + 'layout', + 'optimize', + 'overdrive', + 'polish', + 'quieter', + 'shape', + 'typeset', ]; // All known harness directories that may contain a skills/ subfolder. diff --git a/source/skills/impeccable/scripts/command-metadata.json b/source/skills/impeccable/scripts/command-metadata.json new file mode 100644 index 000000000..38806f3f5 --- /dev/null +++ b/source/skills/impeccable/scripts/command-metadata.json @@ -0,0 +1,82 @@ +{ + "craft": { + "description": "Full shape-then-build flow with visual iteration. Plans the UX with /impeccable shape, loads the right reference files, then builds and iterates visually until the result is delightful. Use when building a new feature end-to-end.", + "argumentHint": "[feature description]" + }, + "teach": { + "description": "One-time setup that gathers design context for a project. Runs a short discovery interview and writes the answers to .impeccable.md. Every other command reads this file before doing work. Use once per project.", + "argumentHint": "" + }, + "extract": { + "description": "Pull reusable patterns, components, and design tokens into the design system. Identifies repeated patterns and consolidates them. Use when you have drift across the codebase and want to bring things back to a consistent system.", + "argumentHint": "[target]" + }, + "adapt": { + "description": "Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.", + "argumentHint": "[target] [context (mobile, tablet, print...)]" + }, + "animate": { + "description": "Review a feature and enhance it with purposeful animations, micro-interactions, and motion effects that improve usability and delight. Use when the user mentions adding animation, transitions, micro-interactions, motion design, hover effects, or making the UI feel more alive.", + "argumentHint": "[target]" + }, + "audit": { + "description": "Run technical quality checks across accessibility, performance, theming, responsive design, and anti-patterns. Generates a scored report with P0-P3 severity ratings and actionable plan. Use when the user wants an accessibility check, performance audit, or technical quality review.", + "argumentHint": "[area (feature, page, component...)]" + }, + "bolder": { + "description": "Amplify safe or boring designs to make them more visually interesting and stimulating. Increases impact while maintaining usability. Use when the user says the design looks bland, generic, too safe, lacks personality, or wants more visual impact and character.", + "argumentHint": "[target]" + }, + "clarify": { + "description": "Improve unclear UX copy, error messages, microcopy, labels, and instructions to make interfaces easier to understand. Use when the user mentions confusing text, unclear labels, bad error messages, hard-to-follow instructions, or wanting better UX writing.", + "argumentHint": "[target]" + }, + "colorize": { + "description": "Add strategic color to features that are too monochromatic or lack visual interest, making interfaces more engaging and expressive. Use when the user mentions the design looking gray, dull, lacking warmth, needing more color, or wanting a more vibrant or expressive palette.", + "argumentHint": "[target]" + }, + "critique": { + "description": "Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or give feedback on a design or component.", + "argumentHint": "[area (feature, page, component...)]" + }, + "delight": { + "description": "Add moments of joy, personality, and unexpected touches that make interfaces memorable and enjoyable to use. Elevates functional to delightful. Use when the user asks to add polish, personality, animations, micro-interactions, delight, or make an interface feel fun or memorable.", + "argumentHint": "[target]" + }, + "distill": { + "description": "Strip designs to their essence by removing unnecessary complexity. Great design is simple, powerful, and clean. Use when the user asks to simplify, declutter, reduce noise, remove elements, or make a UI cleaner and more focused.", + "argumentHint": "[target]" + }, + "harden": { + "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "layout": { + "description": "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.", + "argumentHint": "[target]" + }, + "optimize": { + "description": "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience.", + "argumentHint": "[target]" + }, + "overdrive": { + "description": "Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations. Use when the user wants to wow, impress, go all-out, or make something that feels extraordinary.", + "argumentHint": "[target]" + }, + "polish": { + "description": "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great.", + "argumentHint": "[target]" + }, + "quieter": { + "description": "Tones down visually aggressive or overstimulating designs, reducing intensity while preserving quality. Use when the user mentions too bold, too loud, overwhelming, aggressive, garish, or wants a calmer, more refined aesthetic.", + "argumentHint": "[target]" + }, + "shape": { + "description": "Plan the UX and UI for a feature before writing code. Runs a structured discovery interview, then produces a design brief that guides implementation. Use during the planning phase to establish design direction, constraints, and strategy before any code is written.", + "argumentHint": "[feature to shape]" + }, + "typeset": { + "description": "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography.", + "argumentHint": "[target]" + } +} diff --git a/source/skills/impeccable/scripts/pin.mjs b/source/skills/impeccable/scripts/pin.mjs new file mode 100644 index 000000000..2abfc6050 --- /dev/null +++ b/source/skills/impeccable/scripts/pin.mjs @@ -0,0 +1,214 @@ +#!/usr/bin/env node +/** + * Pin/unpin sub-commands as standalone skill shortcuts. + * + * Usage: + * node /pin.mjs pin + * node /pin.mjs unpin + * + * `pin audit` creates a lightweight /audit skill that redirects to /impeccable audit. + * `unpin audit` removes that shortcut. + * + * The script discovers harness directories (.claude/skills, .cursor/skills, etc.) + * in the project root and creates/removes the pin in all of them. + */ + +import { existsSync, readFileSync, writeFileSync, mkdirSync, rmSync, readdirSync } from 'node:fs'; +import { join, resolve, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); + +// All known harness directories +const HARNESS_DIRS = [ + '.claude', '.cursor', '.gemini', '.codex', '.agents', + '.trae', '.trae-cn', '.pi', '.opencode', '.kiro', '.rovodev', +]; + +// Valid sub-command names +const VALID_COMMANDS = [ + 'craft', 'teach', 'extract', 'shape', + 'critique', 'audit', + 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', + 'clarify', 'adapt', 'optimize', +]; + +// Marker to identify pinned skills (so unpin doesn't delete user skills) +const PIN_MARKER = ''; + +/** + * Walk up from startDir to find a project root. + */ +function findProjectRoot(startDir = process.cwd()) { + let dir = resolve(startDir); + while (dir !== '/') { + if ( + existsSync(join(dir, 'package.json')) || + existsSync(join(dir, '.git')) || + existsSync(join(dir, 'skills-lock.json')) + ) { + return dir; + } + const parent = resolve(dir, '..'); + if (parent === dir) break; + dir = parent; + } + return resolve(startDir); +} + +/** + * Find harness skill directories that have an impeccable skill installed. + */ +function findHarnessDirs(projectRoot) { + const dirs = []; + for (const harness of HARNESS_DIRS) { + const skillsDir = join(projectRoot, harness, 'skills'); + // Only pin in harness dirs that already have impeccable installed + const impeccableDir = join(skillsDir, 'impeccable'); + if (existsSync(impeccableDir) || existsSync(join(skillsDir, 'i-impeccable'))) { + dirs.push(skillsDir); + } + } + return dirs; +} + +/** + * Load command metadata (descriptions for pinned skills). + */ +function loadCommandMetadata() { + const metadataPath = join(__dirname, 'command-metadata.json'); + if (existsSync(metadataPath)) { + return JSON.parse(readFileSync(metadataPath, 'utf-8')); + } + return {}; +} + +/** + * Generate a pinned skill's SKILL.md content. + */ +function generatePinnedSkill(command, metadata) { + const desc = metadata[command]?.description || `Shortcut for /impeccable ${command}.`; + const hint = metadata[command]?.argumentHint || '[target]'; + + return `--- +name: ${command} +description: "${desc}" +argument-hint: "${hint}" +user-invocable: true +--- + +${PIN_MARKER} + +This is a pinned shortcut for \`{{command_prefix}}impeccable ${command}\`. + +Invoke {{command_prefix}}impeccable ${command}, passing along any arguments provided here, and follow its instructions. +`; +} + +/** + * Pin a command: create shortcut skill in all harness dirs. + */ +function pin(command, projectRoot) { + const metadata = loadCommandMetadata(); + const harnessDirs = findHarnessDirs(projectRoot); + + if (harnessDirs.length === 0) { + console.log('No harness directories with impeccable installed found.'); + return false; + } + + const content = generatePinnedSkill(command, metadata); + let created = 0; + + for (const skillsDir of harnessDirs) { + // Check if skill already exists (and isn't a pin) + const skillDir = join(skillsDir, command); + if (existsSync(skillDir)) { + const existingMd = join(skillDir, 'SKILL.md'); + if (existsSync(existingMd)) { + const existing = readFileSync(existingMd, 'utf-8'); + if (!existing.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (non-pinned skill already exists)`); + continue; + } + } + } + + mkdirSync(skillDir, { recursive: true }); + writeFileSync(join(skillDir, 'SKILL.md'), content, 'utf-8'); + console.log(` + ${skillDir}`); + created++; + } + + if (created > 0) { + console.log(`\nPinned '${command}' as a standalone shortcut in ${created} location(s).`); + console.log(`You can now use /${command} directly.`); + } + + return created > 0; +} + +/** + * Unpin a command: remove shortcut skill from all harness dirs. + */ +function unpin(command, projectRoot) { + const harnessDirs = findHarnessDirs(projectRoot); + let removed = 0; + + for (const skillsDir of harnessDirs) { + const skillDir = join(skillsDir, command); + if (!existsSync(skillDir)) continue; + + const skillMd = join(skillDir, 'SKILL.md'); + if (!existsSync(skillMd)) continue; + + // Safety: only remove if it's a pinned skill + const content = readFileSync(skillMd, 'utf-8'); + if (!content.includes(PIN_MARKER)) { + console.log(` SKIP: ${skillDir} (not a pinned skill)`); + continue; + } + + rmSync(skillDir, { recursive: true, force: true }); + console.log(` - ${skillDir}`); + removed++; + } + + if (removed > 0) { + console.log(`\nUnpinned '${command}' from ${removed} location(s).`); + console.log(`Use /impeccable ${command} to access it.`); + } else { + console.log(`No pinned '${command}' shortcut found.`); + } + + return removed > 0; +} + +// --- CLI --- +const [,, action, command] = process.argv; + +if (!action || !command) { + console.log('Usage: node pin.mjs '); + console.log(`\nAvailable commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +if (action !== 'pin' && action !== 'unpin') { + console.error(`Unknown action: ${action}. Use 'pin' or 'unpin'.`); + process.exit(1); +} + +if (!VALID_COMMANDS.includes(command)) { + console.error(`Unknown command: ${command}`); + console.error(`Available commands: ${VALID_COMMANDS.join(', ')}`); + process.exit(1); +} + +const root = findProjectRoot(); + +if (action === 'pin') { + pin(command, root); +} else { + unpin(command, root); +} diff --git a/source/skills/layout/SKILL.md b/source/skills/layout/SKILL.md deleted file mode 100644 index 747fb66be..000000000 --- a/source/skills/layout/SKILL.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -name: layout -description: "Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition." -argument-hint: "[target]" -user-invocable: true ---- - -Assess and improve layout and spacing that feels monotonous, crowded, or structurally weak — turning generic arrangements into intentional, rhythmic compositions. - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. - ---- - -## Assess Current Layout - -Analyze what's weak about the current spatial design: - -1. **Spacing**: - - Is spacing consistent or arbitrary? (Random padding/margin values) - - Is all spacing the same? (Equal padding everywhere = no rhythm) - - Are related elements grouped tightly, with generous space between groups? - -2. **Visual hierarchy**: - - Apply the squint test: blur your (metaphorical) eyes — can you still identify the most important element, second most important, and clear groupings? - - Is hierarchy achieved effectively? (Space and weight alone can be enough — but is the current approach working?) - - Does whitespace guide the eye to what matters? - -3. **Grid & structure**: - - Is there a clear underlying structure, or does the layout feel random? - - Are identical card grids used everywhere? (Icon + heading + text, repeated endlessly) - - Is everything centered? (Left-aligned with asymmetric layouts feels more designed, but not a hard and fast rule) - -4. **Rhythm & variety**: - - Does the layout have visual rhythm? (Alternating tight/generous spacing) - - Is every section structured the same way? (Monotonous repetition) - - Are there intentional moments of surprise or emphasis? - -5. **Density**: - - Is the layout too cramped? (Not enough breathing room) - - Is the layout too sparse? (Excessive whitespace without purpose) - - Does density match the content type? (Data-dense UIs need tighter spacing; marketing pages need more air) - -**CRITICAL**: Layout problems are often the root cause of interfaces feeling "off" even when colors and fonts are fine. Space is a design material — use it with intention. - -## Plan Layout Improvements - -Consult the [spatial design reference](reference/spatial-design.md) from the impeccable skill for detailed guidance on grids, rhythm, and container queries. - -Create a systematic plan: - -- **Spacing system**: Use a consistent scale — whether that's a framework's built-in scale (e.g., Tailwind), rem-based tokens, or a custom system. The specific values matter less than consistency. -- **Hierarchy strategy**: How will space communicate importance? -- **Layout approach**: What structure fits the content? Flex for 1D, Grid for 2D, named areas for complex page layouts. -- **Rhythm**: Where should spacing be tight vs generous? - -## Improve Layout Systematically - -### Establish a Spacing System - -- Use a consistent spacing scale — framework scales (Tailwind, etc.), rem-based tokens, or a custom scale all work. What matters is that values come from a defined set, not arbitrary numbers. -- Name tokens semantically if using custom properties: `--space-xs` through `--space-xl`, not `--spacing-8` -- Use `gap` for sibling spacing instead of margins — eliminates margin collapse hacks -- Apply `clamp()` for fluid spacing that breathes on larger screens - -### Create Visual Rhythm - -- **Tight grouping** for related elements (8-12px between siblings) -- **Generous separation** between distinct sections (48-96px) -- **Varied spacing** within sections — not every row needs the same gap -- **Asymmetric compositions** — break the predictable centered-content pattern when it makes sense - -### Choose the Right Layout Tool - -- **Use Flexbox for 1D layouts**: Rows of items, nav bars, button groups, card contents, most component internals. Flex is simpler and more appropriate for the majority of layout tasks. -- **Use Grid for 2D layouts**: Page-level structure, dashboards, data-dense interfaces, anything where rows AND columns need coordinated control. -- **Don't default to Grid** when Flexbox with `flex-wrap` would be simpler and more flexible. -- Use `repeat(auto-fit, minmax(280px, 1fr))` for responsive grids without breakpoints. -- Use named grid areas (`grid-template-areas`) for complex page layouts — redefine at breakpoints. - -### Break Card Grid Monotony - -- Don't default to card grids for everything — spacing and alignment create visual grouping naturally -- Use cards only when content is truly distinct and actionable — never nest cards inside cards -- Vary card sizes, span columns, or mix cards with non-card content to break repetition - -### Strengthen Visual Hierarchy - -- Use the fewest dimensions needed for clear hierarchy. Space alone can be enough — generous whitespace around an element draws the eye. Some of the most sophisticated designs achieve rhythm with just space and weight. Add color or size contrast only when simpler means aren't sufficient. -- Be aware of reading flow — in LTR languages, the eye naturally scans top-left to bottom-right, but primary action placement depends on context (e.g., bottom-right in dialogs, top in navigation). -- Create clear content groupings through proximity and separation. - -### Manage Depth & Elevation - -- Create a semantic z-index scale (dropdown → sticky → modal-backdrop → modal → toast → tooltip) -- Build a consistent shadow scale (sm → md → lg → xl) — shadows should be subtle -- Use elevation to reinforce hierarchy, not as decoration - -### Optical Adjustments - -- If an icon looks visually off-center despite being geometrically centered, nudge it — but only if you're confident it actually looks wrong. Don't adjust speculatively. - -**NEVER**: -- Use arbitrary spacing values outside your scale -- Make all spacing equal — variety creates hierarchy -- Wrap everything in cards — not everything needs a container -- Nest cards inside cards — use spacing and dividers for hierarchy within -- Use identical card grids everywhere (icon + heading + text, repeated) -- Center everything — left-aligned with asymmetry feels more designed -- Default to the hero metric layout (big number, small label, stats, gradient) as a template. If showing real user data, a prominent metric can work — but it should display actual data, not decorative numbers. -- Default to CSS Grid when Flexbox would be simpler — use the simplest tool for the job -- Use arbitrary z-index values (999, 9999) — build a semantic scale - -## Verify Layout Improvements - -- **Squint test**: Can you identify primary, secondary, and groupings with blurred vision? -- **Rhythm**: Does the page have a satisfying beat of tight and generous spacing? -- **Hierarchy**: Is the most important content obvious within 2 seconds? -- **Breathing room**: Does the layout feel comfortable, not cramped or wasteful? -- **Consistency**: Is the spacing system applied uniformly? -- **Responsiveness**: Does the layout adapt gracefully across screen sizes? - -Remember: Space is the most underused design tool. A layout with the right rhythm and hierarchy can make even simple content feel polished and intentional. diff --git a/source/skills/optimize/SKILL.md b/source/skills/optimize/SKILL.md deleted file mode 100644 index ad3a40552..000000000 --- a/source/skills/optimize/SKILL.md +++ /dev/null @@ -1,266 +0,0 @@ ---- -name: optimize -description: "Diagnoses and fixes UI performance across loading speed, rendering, animations, images, and bundle size. Use when the user mentions slow, laggy, janky, performance, bundle size, load time, or wants a faster, smoother experience." -argument-hint: "[target]" -user-invocable: true ---- - -Identify and fix performance issues to create faster, smoother user experiences. - -## Assess Performance Issues - -Understand current performance and identify problems: - -1. **Measure current state**: - - **Core Web Vitals**: LCP, FID/INP, CLS scores - - **Load time**: Time to interactive, first contentful paint - - **Bundle size**: JavaScript, CSS, image sizes - - **Runtime performance**: Frame rate, memory usage, CPU usage - - **Network**: Request count, payload sizes, waterfall - -2. **Identify bottlenecks**: - - What's slow? (Initial load? Interactions? Animations?) - - What's causing it? (Large images? Expensive JavaScript? Layout thrashing?) - - How bad is it? (Perceivable? Annoying? Blocking?) - - Who's affected? (All users? Mobile only? Slow connections?) - -**CRITICAL**: Measure before and after. Premature optimization wastes time. Optimize what actually matters. - -## Optimization Strategy - -Create systematic improvement plan: - -### Loading Performance - -**Optimize Images**: -- Use modern formats (WebP, AVIF) -- Proper sizing (don't load 3000px image for 300px display) -- Lazy loading for below-fold images -- Responsive images (`srcset`, `picture` element) -- Compress images (80-85% quality is usually imperceptible) -- Use CDN for faster delivery - -```html -Hero image -``` - -**Reduce JavaScript Bundle**: -- Code splitting (route-based, component-based) -- Tree shaking (remove unused code) -- Remove unused dependencies -- Lazy load non-critical code -- Use dynamic imports for large components - -```javascript -// Lazy load heavy component -const HeavyChart = lazy(() => import('./HeavyChart')); -``` - -**Optimize CSS**: -- Remove unused CSS -- Critical CSS inline, rest async -- Minimize CSS files -- Use CSS containment for independent regions - -**Optimize Fonts**: -- Use `font-display: swap` or `optional` -- Subset fonts (only characters you need) -- Preload critical fonts -- Use system fonts when appropriate -- Limit font weights loaded - -```css -@font-face { - font-family: 'CustomFont'; - src: url('/fonts/custom.woff2') format('woff2'); - font-display: swap; /* Show fallback immediately */ - unicode-range: U+0020-007F; /* Basic Latin only */ -} -``` - -**Optimize Loading Strategy**: -- Critical resources first (async/defer non-critical) -- Preload critical assets -- Prefetch likely next pages -- Service worker for offline/caching -- HTTP/2 or HTTP/3 for multiplexing - -### Rendering Performance - -**Avoid Layout Thrashing**: -```javascript -// ❌ Bad: Alternating reads and writes (causes reflows) -elements.forEach(el => { - const height = el.offsetHeight; // Read (forces layout) - el.style.height = height * 2; // Write -}); - -// ✅ Good: Batch reads, then batch writes -const heights = elements.map(el => el.offsetHeight); // All reads -elements.forEach((el, i) => { - el.style.height = heights[i] * 2; // All writes -}); -``` - -**Optimize Rendering**: -- Use CSS `contain` property for independent regions -- Minimize DOM depth (flatter is faster) -- Reduce DOM size (fewer elements) -- Use `content-visibility: auto` for long lists -- Virtual scrolling for very long lists (react-window, react-virtualized) - -**Reduce Paint & Composite**: -- Use `transform` and `opacity` for animations (GPU-accelerated) -- Avoid animating layout properties (width, height, top, left) -- Use `will-change` sparingly for known expensive operations -- Minimize paint areas (smaller is faster) - -### Animation Performance - -**GPU Acceleration**: -```css -/* ✅ GPU-accelerated (fast) */ -.animated { - transform: translateX(100px); - opacity: 0.5; -} - -/* ❌ CPU-bound (slow) */ -.animated { - left: 100px; - width: 300px; -} -``` - -**Smooth 60fps**: -- Target 16ms per frame (60fps) -- Use `requestAnimationFrame` for JS animations -- Debounce/throttle scroll handlers -- Use CSS animations when possible -- Avoid long-running JavaScript during animations - -**Intersection Observer**: -```javascript -// Efficiently detect when elements enter viewport -const observer = new IntersectionObserver((entries) => { - entries.forEach(entry => { - if (entry.isIntersecting) { - // Element is visible, lazy load or animate - } - }); -}); -``` - -### React/Framework Optimization - -**React-specific**: -- Use `memo()` for expensive components -- `useMemo()` and `useCallback()` for expensive computations -- Virtualize long lists -- Code split routes -- Avoid inline function creation in render -- Use React DevTools Profiler - -**Framework-agnostic**: -- Minimize re-renders -- Debounce expensive operations -- Memoize computed values -- Lazy load routes and components - -### Network Optimization - -**Reduce Requests**: -- Combine small files -- Use SVG sprites for icons -- Inline small critical assets -- Remove unused third-party scripts - -**Optimize APIs**: -- Use pagination (don't load everything) -- GraphQL to request only needed fields -- Response compression (gzip, brotli) -- HTTP caching headers -- CDN for static assets - -**Optimize for Slow Connections**: -- Adaptive loading based on connection (navigator.connection) -- Optimistic UI updates -- Request prioritization -- Progressive enhancement - -## Core Web Vitals Optimization - -### Largest Contentful Paint (LCP < 2.5s) -- Optimize hero images -- Inline critical CSS -- Preload key resources -- Use CDN -- Server-side rendering - -### First Input Delay (FID < 100ms) / INP (< 200ms) -- Break up long tasks -- Defer non-critical JavaScript -- Use web workers for heavy computation -- Reduce JavaScript execution time - -### Cumulative Layout Shift (CLS < 0.1) -- Set dimensions on images and videos -- Don't inject content above existing content -- Use `aspect-ratio` CSS property -- Reserve space for ads/embeds -- Avoid animations that cause layout shifts - -```css -/* Reserve space for image */ -.image-container { - aspect-ratio: 16 / 9; -} -``` - -## Performance Monitoring - -**Tools to use**: -- Chrome DevTools (Lighthouse, Performance panel) -- WebPageTest -- Core Web Vitals (Chrome UX Report) -- Bundle analyzers (webpack-bundle-analyzer) -- Performance monitoring (Sentry, DataDog, New Relic) - -**Key metrics**: -- LCP, FID/INP, CLS (Core Web Vitals) -- Time to Interactive (TTI) -- First Contentful Paint (FCP) -- Total Blocking Time (TBT) -- Bundle size -- Request count - -**IMPORTANT**: Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative. - -**NEVER**: -- Optimize without measuring (premature optimization) -- Sacrifice accessibility for performance -- Break functionality while optimizing -- Use `will-change` everywhere (creates new layers, uses memory) -- Lazy load above-fold content -- Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first) -- Forget about mobile performance (often slower devices, slower connections) - -## Verify Improvements - -Test that optimizations worked: - -- **Before/after metrics**: Compare Lighthouse scores -- **Real user monitoring**: Track improvements for real users -- **Different devices**: Test on low-end Android, not just flagship iPhone -- **Slow connections**: Throttle to 3G, test experience -- **No regressions**: Ensure functionality still works -- **User perception**: Does it *feel* faster? - -Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance. - diff --git a/source/skills/polish/SKILL.md b/source/skills/polish/SKILL.md deleted file mode 100644 index 0cd35a7a5..000000000 --- a/source/skills/polish/SKILL.md +++ /dev/null @@ -1,224 +0,0 @@ ---- -name: polish -description: "Performs a final quality pass fixing alignment, spacing, consistency, and micro-detail issues before shipping. Use when the user mentions polish, finishing touches, pre-launch review, something looks off, or wants to go from good to great." -argument-hint: "[target]" -user-invocable: true ---- - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. Additionally gather: quality bar (MVP vs flagship). - ---- - -Perform a meticulous final pass to catch all the small details that separate good work from great work. The difference between shipped and polished. - -## Design System Discovery - -Before polishing, understand the system you are polishing toward: - -1. **Find the design system**: Search for design system documentation, component libraries, style guides, or token definitions. Study the core patterns: color tokens, spacing scale, typography styles, component API. -2. **Note the conventions**: How are shared components imported? What spacing scale is used? Which colors come from tokens vs hard-coded values? What motion and interaction patterns are established? -3. **Identify drift**: Where does the target feature deviate from the system? Hard-coded values that should be tokens, custom components that duplicate shared ones, spacing that doesn't match the scale. - -If a design system exists, polish should align the feature with it. If none exists, polish against the conventions visible in the codebase. - -## Pre-Polish Assessment - -Understand the current state and goals: - -1. **Review completeness**: - - Is it functionally complete? - - Are there known issues to preserve (mark with TODOs)? - - What's the quality bar? (MVP vs flagship feature?) - - When does it ship? (How much time for polish?) - -2. **Identify polish areas**: - - Visual inconsistencies - - Spacing and alignment issues - - Interaction state gaps - - Copy inconsistencies - - Edge cases and error states - - Loading and transition smoothness - -**CRITICAL**: Polish is the last step, not the first. Don't polish work that's not functionally complete. - -## Polish Systematically - -Work through these dimensions methodically: - -### Visual Alignment & Spacing - -- **Pixel-perfect alignment**: Everything lines up to grid -- **Consistent spacing**: All gaps use spacing scale (no random 13px gaps) -- **Optical alignment**: Adjust for visual weight (icons may need offset for optical centering) -- **Responsive consistency**: Spacing and alignment work at all breakpoints -- **Grid adherence**: Elements snap to baseline grid - -**Check**: -- Enable grid overlay and verify alignment -- Check spacing with browser inspector -- Test at multiple viewport sizes -- Look for elements that "feel" off - -### Typography Refinement - -- **Hierarchy consistency**: Same elements use same sizes/weights throughout -- **Line length**: 45-75 characters for body text -- **Line height**: Appropriate for font size and context -- **Widows & orphans**: No single words on last line -- **Hyphenation**: Appropriate for language and column width -- **Kerning**: Adjust letter spacing where needed (especially headlines) -- **Font loading**: No FOUT/FOIT flashes - -### Color & Contrast - -- **Contrast ratios**: All text meets WCAG standards -- **Consistent token usage**: No hard-coded colors, all use design tokens -- **Theme consistency**: Works in all theme variants -- **Color meaning**: Same colors mean same things throughout -- **Accessible focus**: Focus indicators visible with sufficient contrast -- **Tinted neutrals**: No pure gray or pure black—add subtle color tint (0.01 chroma) -- **Gray on color**: Never put gray text on colored backgrounds—use a shade of that color or transparency - -### Interaction States - -Every interactive element needs all states: - -- **Default**: Resting state -- **Hover**: Subtle feedback (color, scale, shadow) -- **Focus**: Keyboard focus indicator (never remove without replacement) -- **Active**: Click/tap feedback -- **Disabled**: Clearly non-interactive -- **Loading**: Async action feedback -- **Error**: Validation or error state -- **Success**: Successful completion - -**Missing states create confusion and broken experiences**. - -### Micro-interactions & Transitions - -- **Smooth transitions**: All state changes animated appropriately (150-300ms) -- **Consistent easing**: Use ease-out-quart/quint/expo for natural deceleration. Never bounce or elastic—they feel dated. -- **No jank**: 60fps animations, only animate transform and opacity -- **Appropriate motion**: Motion serves purpose, not decoration -- **Reduced motion**: Respects `prefers-reduced-motion` - -### Content & Copy - -- **Consistent terminology**: Same things called same names throughout -- **Consistent capitalization**: Title Case vs Sentence case applied consistently -- **Grammar & spelling**: No typos -- **Appropriate length**: Not too wordy, not too terse -- **Punctuation consistency**: Periods on sentences, not on labels (unless all labels have them) - -### Icons & Images - -- **Consistent style**: All icons from same family or matching style -- **Appropriate sizing**: Icons sized consistently for context -- **Proper alignment**: Icons align with adjacent text optically -- **Alt text**: All images have descriptive alt text -- **Loading states**: Images don't cause layout shift, proper aspect ratios -- **Retina support**: 2x assets for high-DPI screens - -### Forms & Inputs - -- **Label consistency**: All inputs properly labeled -- **Required indicators**: Clear and consistent -- **Error messages**: Helpful and consistent -- **Tab order**: Logical keyboard navigation -- **Auto-focus**: Appropriate (don't overuse) -- **Validation timing**: Consistent (on blur vs on submit) - -### Edge Cases & Error States - -- **Loading states**: All async actions have loading feedback -- **Empty states**: Helpful empty states, not just blank space -- **Error states**: Clear error messages with recovery paths -- **Success states**: Confirmation of successful actions -- **Long content**: Handles very long names, descriptions, etc. -- **No content**: Handles missing data gracefully -- **Offline**: Appropriate offline handling (if applicable) - -### Responsiveness - -- **All breakpoints**: Test mobile, tablet, desktop -- **Touch targets**: 44x44px minimum on touch devices -- **Readable text**: No text smaller than 14px on mobile -- **No horizontal scroll**: Content fits viewport -- **Appropriate reflow**: Content adapts logically - -### Performance - -- **Fast initial load**: Optimize critical path -- **No layout shift**: Elements don't jump after load (CLS) -- **Smooth interactions**: No lag or jank -- **Optimized images**: Appropriate formats and sizes -- **Lazy loading**: Off-screen content loads lazily - -### Code Quality - -- **Remove console logs**: No debug logging in production -- **Remove commented code**: Clean up dead code -- **Remove unused imports**: Clean up unused dependencies -- **Consistent naming**: Variables and functions follow conventions -- **Type safety**: No TypeScript `any` or ignored errors -- **Accessibility**: Proper ARIA labels and semantic HTML - -## Polish Checklist - -Go through systematically: - -- [ ] Visual alignment perfect at all breakpoints -- [ ] Spacing uses design tokens consistently -- [ ] Typography hierarchy consistent -- [ ] All interactive states implemented -- [ ] All transitions smooth (60fps) -- [ ] Copy is consistent and polished -- [ ] Icons are consistent and properly sized -- [ ] All forms properly labeled and validated -- [ ] Error states are helpful -- [ ] Loading states are clear -- [ ] Empty states are welcoming -- [ ] Touch targets are 44x44px minimum -- [ ] Contrast ratios meet WCAG AA -- [ ] Keyboard navigation works -- [ ] Focus indicators visible -- [ ] No console errors or warnings -- [ ] No layout shift on load -- [ ] Works in all supported browsers -- [ ] Respects reduced motion preference -- [ ] Code is clean (no TODOs, console.logs, commented code) - -**IMPORTANT**: Polish is about details. Zoom in. Squint at it. Use it yourself. The little things add up. - -**NEVER**: -- Polish before it's functionally complete -- Spend hours on polish if it ships in 30 minutes (triage) -- Introduce bugs while polishing (test thoroughly) -- Ignore systematic issues (if spacing is off everywhere, fix the system) -- Perfect one thing while leaving others rough (consistent quality level) -- Create new one-off components when design system equivalents exist -- Hard-code values that should use design tokens - -## Final Verification - -Before marking as done: - -- **Use it yourself**: Actually interact with the feature -- **Test on real devices**: Not just browser DevTools -- **Ask someone else to review**: Fresh eyes catch things -- **Compare to design**: Match intended design -- **Check all states**: Don't just test happy path - -## Clean Up - -After polishing, ensure code quality: - -- **Replace custom implementations**: If the design system provides a component you reimplemented, switch to the shared version. -- **Remove orphaned code**: Delete unused styles, components, or files made obsolete by polish. -- **Consolidate tokens**: If you introduced new values, check whether they should be tokens. -- **Verify DRYness**: Look for duplication introduced during polishing and consolidate. - -Remember: You have impeccable attention to detail and exquisite taste. Polish until it feels effortless, looks intentional, and works flawlessly. Sweat the details - they matter. - diff --git a/source/skills/typeset/SKILL.md b/source/skills/typeset/SKILL.md deleted file mode 100644 index c76f77406..000000000 --- a/source/skills/typeset/SKILL.md +++ /dev/null @@ -1,115 +0,0 @@ ---- -name: typeset -description: "Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography." -argument-hint: "[target]" -user-invocable: true ---- - -Assess and improve typography that feels generic, inconsistent, or poorly structured — turning default-looking text into intentional, well-crafted type. - -## MANDATORY PREPARATION - -Invoke {{command_prefix}}impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run {{command_prefix}}impeccable teach first. - ---- - -## Assess Current Typography - -Analyze what's weak or generic about the current type: - -1. **Font choices**: - - Are we using invisible defaults? (Inter, Roboto, Arial, Open Sans, system defaults) - - Does the font match the brand personality? (A playful brand shouldn't use a corporate typeface) - - Are there too many font families? (More than 2-3 is almost always a mess) - -2. **Hierarchy**: - - Can you tell headings from body from captions at a glance? - - Are font sizes too close together? (14px, 15px, 16px = muddy hierarchy) - - Are weight contrasts strong enough? (Medium vs Regular is barely visible) - -3. **Sizing & scale**: - - Is there a consistent type scale, or are sizes arbitrary? - - Does body text meet minimum readability? (16px+) - - Is the sizing strategy appropriate for the context? (Fixed `rem` scales for app UIs; fluid `clamp()` for marketing/content page headings) - -4. **Readability**: - - Are line lengths comfortable? (45-75 characters ideal) - - Is line-height appropriate for the font and context? - - Is there enough contrast between text and background? - -5. **Consistency**: - - Are the same elements styled the same way throughout? - - Are font weights used consistently? (Not bold in one section, semibold in another for the same role) - - Is letter-spacing intentional or default everywhere? - -**CRITICAL**: The goal isn't to make text "fancier" — it's to make it clearer, more readable, and more intentional. Good typography is invisible; bad typography is distracting. - -## Plan Typography Improvements - -Consult the [typography reference](reference/typography.md) from the impeccable skill for detailed guidance on scales, pairing, and loading strategies. - -Create a systematic plan: - -- **Font selection**: Do fonts need replacing? What fits the brand/context? -- **Type scale**: Establish a modular scale (e.g., 1.25 ratio) with clear hierarchy -- **Weight strategy**: Which weights serve which roles? (Regular for body, Semibold for labels, Bold for headings — or whatever fits) -- **Spacing**: Line-heights, letter-spacing, and margins between typographic elements - -## Improve Typography Systematically - -### Font Selection - -If fonts need replacing: -- Choose fonts that reflect the brand personality -- Pair with genuine contrast (serif + sans, geometric + humanist) — or use a single family in multiple weights -- Ensure web font loading doesn't cause layout shift (`font-display: swap`, metric-matched fallbacks) - -### Establish Hierarchy - -Build a clear type scale: -- **5 sizes cover most needs**: caption, secondary, body, subheading, heading -- **Use a consistent ratio** between levels (1.25, 1.333, or 1.5) -- **Combine dimensions**: Size + weight + color + space for strong hierarchy — don't rely on size alone -- **App UIs**: Use a fixed `rem`-based type scale, optionally adjusted at 1-2 breakpoints. Fluid sizing undermines the spatial predictability that dense, container-based layouts need -- **Marketing / content pages**: Use fluid sizing via `clamp(min, preferred, max)` for headings and display text. Keep body text fixed - -### Fix Readability - -- Set `max-width` on text containers using `ch` units (`max-width: 65ch`) -- Adjust line-height per context: tighter for headings (1.1-1.2), looser for body (1.5-1.7) -- Increase line-height slightly for light-on-dark text -- Ensure body text is at least 16px / 1rem - -### Refine Details - -- Use `tabular-nums` for data tables and numbers that should align -- Apply proper `letter-spacing`: slightly open for small caps and uppercase, default or tight for large display text -- Use semantic token names (`--text-body`, `--text-heading`), not value names (`--font-16`) -- Set `font-kerning: normal` and consider OpenType features where appropriate - -### Weight Consistency - -- Define clear roles for each weight and stick to them -- Don't use more than 3-4 weights (Regular, Medium, Semibold, Bold is plenty) -- Load only the weights you actually use (each weight adds to page load) - -**NEVER**: -- Use more than 2-3 font families -- Pick sizes arbitrarily — commit to a scale -- Set body text below 16px -- Use decorative/display fonts for body text -- Disable browser zoom (`user-scalable=no`) -- Use `px` for font sizes — use `rem` to respect user settings -- Default to Inter/Roboto/Open Sans when personality matters -- Pair fonts that are similar but not identical (two geometric sans-serifs) - -## Verify Typography Improvements - -- **Hierarchy**: Can you identify heading vs body vs caption instantly? -- **Readability**: Is body text comfortable to read in long passages? -- **Consistency**: Are same-role elements styled identically throughout? -- **Personality**: Does the typography reflect the brand? -- **Performance**: Are web fonts loading efficiently without layout shift? -- **Accessibility**: Does text meet WCAG contrast ratios? Is it zoomable to 200%? - -Remember: Typography is the foundation of interface design — it carries the majority of information. Getting it right is the highest-leverage improvement you can make. diff --git a/tests/cleanup-deprecated.test.mjs b/tests/cleanup-deprecated.test.mjs index 7dead6b3a..2a1fad6f9 100644 --- a/tests/cleanup-deprecated.test.mjs +++ b/tests/cleanup-deprecated.test.mjs @@ -77,7 +77,7 @@ describe('cleanup-deprecated', () => { assert.ok(names.includes('i-arrange')); assert.ok(names.includes('frontend-design')); assert.ok(names.includes('i-frontend-design')); - assert.equal(names.length, 12); // 6 deprecated * 2 + assert.equal(names.length, 46); // 23 deprecated * 2 }); }); @@ -128,11 +128,11 @@ describe('cleanup-deprecated', () => { }); it('leaves non-deprecated skills alone', () => { - writeSkill(tmp, '.claude', 'polish', 'Invoke /impeccable first.'); + writeSkill(tmp, '.claude', 'my-custom-skill', 'Invoke /impeccable first.'); writeSkill(tmp, '.claude', 'arrange', 'Invoke /impeccable first.'); const deleted = removeDeprecatedSkills(tmp); assert.equal(deleted.length, 1); // only arrange - assert.equal(existsSync(join(tmp, '.claude', 'skills', 'polish')), true); + assert.equal(existsSync(join(tmp, '.claude', 'skills', 'my-custom-skill')), true); }); it('handles symlinks to deprecated skills', () => { @@ -152,7 +152,7 @@ describe('cleanup-deprecated', () => { version: 1, skills: { arrange: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'abc' }, - polish: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'def' }, + impeccable: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'def' }, 'resolve-reviews': { source: 'pbakaus/agent-reviews', sourceType: 'github', computedHash: 'ghi' }, }, }; @@ -161,7 +161,7 @@ describe('cleanup-deprecated', () => { assert.deepEqual(removed, ['arrange']); const updated = JSON.parse(readFileSync(join(tmp, 'skills-lock.json'), 'utf-8')); assert.equal(updated.skills.arrange, undefined); - assert.ok(updated.skills.polish); // not deprecated + assert.ok(updated.skills.impeccable); // not deprecated assert.ok(updated.skills['resolve-reviews']); // different source }); @@ -209,7 +209,7 @@ describe('cleanup-deprecated', () => { skills: { arrange: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'a' }, extract: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'b' }, - polish: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'c' }, + impeccable: { source: 'pbakaus/impeccable', sourceType: 'github', computedHash: 'c' }, }, }; writeFileSync(join(tmp, 'skills-lock.json'), JSON.stringify(lock), 'utf-8'); @@ -221,13 +221,13 @@ describe('cleanup-deprecated', () => { assert.equal(existsSync(join(tmp, '.agents', 'skills', 'arrange')), false); const updated = JSON.parse(readFileSync(join(tmp, 'skills-lock.json'), 'utf-8')); - assert.ok(updated.skills.polish); + assert.ok(updated.skills.impeccable); // not deprecated assert.equal(updated.skills.arrange, undefined); assert.equal(updated.skills.extract, undefined); }); it('is a no-op when nothing needs cleaning', () => { - writeSkill(tmp, '.claude', 'polish', 'Invoke /impeccable.'); + writeSkill(tmp, '.claude', 'my-custom-skill', 'Invoke /impeccable.'); const result = cleanup(tmp); assert.equal(result.deletedPaths.length, 0); assert.equal(result.removedLockEntries.length, 0); From 2233d82f3aeb368a97775a0c98369106c1b90aa9 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Fri, 10 Apr 2026 20:28:07 -0700 Subject: [PATCH 003/125] Bump skills to 3.0, remove prefixed bundle, redesign install section - Bump skills plugin version 2.1.1 -> 3.0.0 (plugin.json, marketplace.json, harness SKILL.md files). CLI and Chrome extension unchanged. - Remove prefixed universal zip bundle and all related code: factory.js prefix/outputSuffix options, zip.js variant pass, utils.js prefixSkillReferences, the "universal-prefixed" entry in download-providers.js, and the matching test suite in utils.test.js. - Redesign Get Started step 1 "Install the skill and CLI": two terminal rows (npx skills + npm i -g impeccable) with paired notes, drop the Recommended badge. - Collapse "Other install methods" back into a
      element so the primary install path is the first thing users see. - Simplify step 3 to "Add the Chrome extension": remove the CLI tool block (now in step 1), use standard .btn .btn-primary for the CTA so it matches other primary buttons (square corners, accent slide-up hover), and lay out the preview screenshot next to the button instead of stacked so the screenshot no longer dominates vertical space. - CLAUDE.md: rewrite with v3.0 architecture, the "no em dash also means no --" rule, the harness-dirs-are-tracked gotcha, the named-export test-spy warning, and the evals inline-skill.ts sync note. - AGENTS.md, DEVELOP.md: drop prefixed variant references. Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/SKILL.md | 2 +- .claude-plugin/marketplace.json | 2 +- .claude-plugin/plugin.json | 2 +- .claude/skills/impeccable/SKILL.md | 2 +- .codex/skills/impeccable/SKILL.md | 2 +- .cursor/skills/impeccable/SKILL.md | 2 +- .gemini/skills/impeccable/SKILL.md | 2 +- .kiro/skills/impeccable/SKILL.md | 2 +- .opencode/skills/impeccable/SKILL.md | 2 +- .pi/skills/impeccable/SKILL.md | 2 +- .rovodev/skills/impeccable/SKILL.md | 2 +- .trae-cn/skills/impeccable/SKILL.md | 2 +- .trae/skills/impeccable/SKILL.md | 2 +- AGENTS.md | 256 ++------------------------- CLAUDE.md | 125 ++++++++++--- DEVELOP.md | 3 +- lib/download-providers.js | 1 - public/app.js | 4 +- public/css/main.css | 125 +++++++++---- public/index.html | 179 ++++++++++--------- scripts/build.js | 42 ++--- scripts/lib/transformers/factory.js | 15 +- scripts/lib/utils.js | 42 +---- scripts/lib/zip.js | 1 - tests/lib/utils.test.js | 58 +----- 25 files changed, 345 insertions(+), 532 deletions(-) diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index 14acacac2..3763c7471 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 7fcd222d2..15754b175 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -12,7 +12,7 @@ { "name": "impeccable", "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", - "version": "2.1.1", + "version": "3.0.0", "author": { "name": "Paul Bakaus", "email": "paul@paulbakaus.com" diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 25dce892c..a42ac27a3 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "impeccable", "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", - "version": "2.1.1", + "version": "3.0.0", "author": { "name": "Paul Bakaus", "email": "paul@paulbakaus.com" diff --git a/.claude/skills/impeccable/SKILL.md b/.claude/skills/impeccable/SKILL.md index 5c0676008..182c33604 100644 --- a/.claude/skills/impeccable/SKILL.md +++ b/.claude/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/.codex/skills/impeccable/SKILL.md b/.codex/skills/impeccable/SKILL.md index b96bef77e..f49846747 100644 --- a/.codex/skills/impeccable/SKILL.md +++ b/.codex/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- diff --git a/.cursor/skills/impeccable/SKILL.md b/.cursor/skills/impeccable/SKILL.md index 79ed6debb..f3baccb6a 100644 --- a/.cursor/skills/impeccable/SKILL.md +++ b/.cursor/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- diff --git a/.gemini/skills/impeccable/SKILL.md b/.gemini/skills/impeccable/SKILL.md index 49b489705..ed6950695 100644 --- a/.gemini/skills/impeccable/SKILL.md +++ b/.gemini/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 --- This skill guides creation and editing/iteration of distinctive, production-grade frontend interfaces. Implement real working code with exceptional attention to aesthetic details and creative choices. diff --git a/.kiro/skills/impeccable/SKILL.md b/.kiro/skills/impeccable/SKILL.md index 80efc2f9a..e06824c74 100644 --- a/.kiro/skills/impeccable/SKILL.md +++ b/.kiro/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- diff --git a/.opencode/skills/impeccable/SKILL.md b/.opencode/skills/impeccable/SKILL.md index 219cb7402..6d274ae73 100644 --- a/.opencode/skills/impeccable/SKILL.md +++ b/.opencode/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md index ea2f01ccd..be8ec284a 100644 --- a/.pi/skills/impeccable/SKILL.md +++ b/.pi/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. allowed-tools: - Bash(npx impeccable *) diff --git a/.rovodev/skills/impeccable/SKILL.md b/.rovodev/skills/impeccable/SKILL.md index 5a380eafa..b42e08bfb 100644 --- a/.rovodev/skills/impeccable/SKILL.md +++ b/.rovodev/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/.trae-cn/skills/impeccable/SKILL.md b/.trae-cn/skills/impeccable/SKILL.md index 5ef54ec67..177238ebb 100644 --- a/.trae-cn/skills/impeccable/SKILL.md +++ b/.trae-cn/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/.trae/skills/impeccable/SKILL.md b/.trae/skills/impeccable/SKILL.md index 005f325c3..d97a8e5ce 100644 --- a/.trae/skills/impeccable/SKILL.md +++ b/.trae/skills/impeccable/SKILL.md @@ -1,7 +1,7 @@ --- name: impeccable description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." -version: 2.1.1 +version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. diff --git a/AGENTS.md b/AGENTS.md index 6252f0cb8..954bc3df1 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,250 +1,32 @@ -# Impeccable +# Repository Guidelines -The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable style. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI. +## Project Structure & Module Organization -## Repository Purpose +`source/` is the source of truth. Author skills in `source/skills/impeccable/` and keep provider output in `dist/` generated, not hand-edited. Build logic lives in `scripts/`, with provider configs in `scripts/lib/transformers/`. Runtime detection code ships from `src/`. The website lives in `public/`, local API/dev serving lives in `server/`, and regression coverage lives in `tests/` with fixtures under `tests/fixtures/`. -Maintain a **single source of truth** for design-focused skills and commands, then automatically transform them into provider-specific formats. Each provider has different capabilities (frontmatter, arguments, modular files), so we use a build system to generate appropriate outputs. +## Build, Test, and Development Commands -## Architecture: Option A (Feature-Rich Source) +- `bun run dev` - start the local Bun server. +- `bun run build` - regenerate `dist/`, derived site assets, and validation output. +- `bun run rebuild` - clean and rebuild everything from scratch. +- `bun test tests/build.test.js` - run a focused Bun test. +- `bun run test` - run the full Bun + Node test suite. +- `bun run build:browser` / `bun run build:extension` - rebuild browser-specific bundles. -We use a **feature-rich source format** that gets transformed for each provider: +Run `bun run build` after changing anything in `source/`, transformer code, or user-facing counts. -- **Source files** (`source/`): Full metadata with YAML frontmatter, args, descriptions -- **Build system** (`scripts/`): Transforms source → provider-specific formats -- **Distribution** (`dist/`): Committed output files for 4 providers +## Coding Style & Naming Conventions -### Why Option A? +Use ESM, semicolons, and the existing two-space indentation style in JS, HTML, and CSS. Prefer small, single-purpose modules over large abstractions. Keep filenames descriptive and lowercase with hyphens where needed; skill entrypoints stay as `SKILL.md`, helper scripts use `.js` or `.mjs`. In source frontmatter, use clear kebab-case names and concise descriptions. There is no dedicated formatter or linter configured here, so match surrounding code closely. -Cursor doesn't support frontmatter or arguments (lowest common denominator). Instead of limiting all providers, we: -1. Author with full metadata in source files -2. Generate full-featured versions for providers that support it (Claude Code, Gemini, Codex) -3. Generate downgraded versions for Cursor (strip frontmatter, rely on appending) +## Testing Guidelines -## Repository Structure +Tests use Bun’s test runner plus Node’s built-in `--test`. Name tests `*.test.js` or `*.test.mjs` and place new fixtures near the behavior they cover, usually under `tests/fixtures/`. Prefer targeted test runs while iterating, then finish with `bun run test`. If you change generated outputs or provider transforms, verify both source parsing and at least one affected provider path in `dist/`. -``` -impeccable/ -├── source/ # EDIT THESE! Single source of truth -│ ├── commands/ # Command definitions with frontmatter -│ │ └── normalize.md -│ └── skills/ # Skill definitions with frontmatter -│ └── impeccable/ -├── dist/ # Generated outputs (committed for users) -│ ├── cursor/ # Commands + Agent Skills -│ │ └── .cursor/ -│ │ ├── commands/*.md -│ │ └── skills/*/SKILL.md -│ ├── claude-code/ # Full featured -│ │ └── .claude/ -│ │ ├── commands/*.md -│ │ └── skills/*/SKILL.md -│ ├── gemini/ # TOML commands + modular skills -│ │ ├── .gemini/ -│ │ │ └── commands/*.toml -│ │ ├── GEMINI.md -│ │ └── GEMINI.*.md -│ └── codex/ # Custom prompts + Agent Skills -│ └── .codex/ -│ ├── prompts/*.md -│ └── skills/*/SKILL.md -├── api/ # Vercel Functions (production) -│ ├── skills.js # GET /api/skills -│ ├── commands.js # GET /api/commands -│ └── download/ -│ ├── [type]/[provider]/[id].js # Individual downloads -│ └── bundle/[provider].js # Bundle downloads -├── public/ # Website for impeccable.style -│ ├── index.html # Main page -│ ├── css/ # Modular CSS (9 files) -│ │ ├── main.css # Entry point with imports -│ │ ├── tokens.css # Design system -│ │ └── ... # Component styles -│ └── app.js # Vanilla JS -├── server/ # Bun server (local dev only) -│ ├── index.js # Serves website + API routes -│ └── lib/ -│ └── api-handlers.js # Shared API logic (used by both server & functions) -├── scripts/ # Build system (Bun) -│ ├── build.js # Main orchestrator -│ ├── lib/ -│ │ ├── utils.js # Shared utilities -│ │ ├── zip.js # ZIP generation -│ │ └── transformers/ # Provider-specific transformers -│ │ ├── cursor.js -│ │ ├── claude-code.js -│ │ ├── gemini.js -│ │ └── codex.js -├── README.md # End user documentation -├── DEVELOP.md # Contributor documentation -└── package.json # Bun scripts -``` +## Commit & Pull Request Guidelines -## Website (impeccable.style) +Recent history favors short, imperative subjects such as `Fix: ...`, `Add ...`, `Improve ...`, or `Bump ...`. Keep commits focused and explain the user-facing impact when it is not obvious. PRs should summarize what changed, list validation performed, and call out regenerated artifacts like `dist/` or `build/`. Include screenshots for visible `public/` changes and mention affected providers when transform behavior changes. -**Tech Stack:** -- Vanilla JavaScript (no frameworks) -- Modern CSS with Bun's bundler (nesting, OKLCH colors, @import) -- **Local Development**: Bun server with native routes (`server/index.js`) -- **Production**: Vercel Functions with Bun runtime (`/api` directory) -- Deployed on Vercel with Bun runtime - -**Dual Setup:** -- `/api` directory contains individual Vercel Functions for production -- `/server` directory contains monolithic Bun server for local development -- `/server/lib/api-handlers.js` contains shared logic used by both -- Zero duplication: API functions and dev server import the same handlers - -**Design:** -- Editorial precision aesthetic -- Cormorant Garamond (display) + Instrument Sans (body) -- OKLCH color space for vibrant, perceptually uniform colors -- Editorial sidebar layout (title left, content right) -- Modular CSS architecture (9 files) - -**API Endpoints** (Vercel Functions): -- `/` - Homepage (static HTML) -- `/api/skills` - JSON list of all skills -- `/api/commands` - JSON list of all commands -- `/api/download/[type]/[provider]/[id]` - Individual file download -- `/api/download/bundle/[provider]` - ZIP bundle download - -## Source File Format - -### Commands (`source/commands/*.md`) - -```yaml ---- -name: command-name -description: Clear description of what this command does -args: - - name: argname - description: Argument description - required: false ---- - -Command prompt here. Use {{argname}} placeholders for arguments. -``` - -### Skills (`source/skills/*.md`) - -```yaml ---- -name: skill-name -description: Clear description of what this skill provides -license: License info (optional) ---- - -Skill instructions for the LLM here. -``` - -## Build System - -Uses **Bun** for fast builds. Modular architecture: - -- **`utils.js`**: Shared functions (parseFrontmatter, readSourceFiles, writeFile, etc.) -- **Transformer pattern**: Each provider has one focused file -- **Registry**: `transformers/index.js` exports all transformers -- **Main script**: `build.js` orchestrates everything (~50 lines) - -Run: `bun run build` - -## Provider Transformations - -### 1. Cursor (Agent Skills Standard) -- **Commands**: Body only → `dist/cursor/.cursor/commands/*.md` (no frontmatter support) -- **Skills**: Agent Skills standard → `dist/cursor/.cursor/skills/{name}/SKILL.md` - - Full YAML frontmatter with name/description - - Reference files in skill subdirectories -- **Installation**: Extract ZIP into your project root, creates `.cursor/` folder -- **Note**: Agent Skills require Cursor nightly channel - -### 2. Claude Code (Full Featured) -- **Commands**: Full YAML frontmatter → `dist/claude-code/.claude/commands/*.md` -- **Skills**: Full YAML frontmatter → `dist/claude-code/.claude/skills/{name}/SKILL.md` -- **Preserves**: All metadata, all args -- **Format**: Matches [Anthropic Skills spec](https://github.com/anthropics/skills) -- **Installation**: Extract ZIP into your project root, creates `.claude/` folder - -### 3. Gemini CLI (Full Featured) -- **Commands**: TOML format → `dist/gemini/.gemini/commands/*.toml` - - Uses `description` and `prompt` keys - - Transforms `{{argname}}` → `{{args}}` (Gemini uses single args string) -- **Skills**: Modular with imports → `dist/gemini/GEMINI.{name}.md` (root level) - - Main `GEMINI.md` uses `@./GEMINI.{name}.md` import syntax - - Gemini automatically loads imported files -- **Installation**: Extract ZIP into your project root, creates `.gemini/` folder + skill files - -### 4. Codex CLI (Full Featured) -- **Commands**: Custom prompt format → `dist/codex/.codex/prompts/*.md` - - Uses `description` and `argument-hint` in frontmatter - - Transforms `{{argname}}` → `$ARGNAME` (uppercase variables) - - Invoked as `/prompts:` -- **Skills**: Agent Skills standard → `dist/codex/.codex/skills/{name}/SKILL.md` - - Same SKILL.md format as Claude Code with YAML frontmatter - - Reference files in skill subdirectories -- **Installation**: Extract ZIP into your project root, creates `.codex/` folder - -## Key Design Decisions - -### Why commit dist/? -End users can copy files directly without needing build tools. - -### Why separate transformers? -- Each provider ~30-85 lines, easy to understand -- Can modify one without affecting others -- Easy to add new providers - -### Why Bun? -- Much faster than Node.js (2-4x) -- All-in-one toolkit (runtime + package manager) -- Zero config, TypeScript native -- Node.js compatible (works with existing code) - -### Why modular skills for Gemini/Codex? -- Better context management (load only what's needed) -- Cleaner file organization -- Gemini: Uses native `@file.md` import feature -- Codex: Uses routing pattern with AGENTS.md guide - -### Why vanilla JS for website? -- No build complexity -- Bun handles everything natively -- Modern features (ES6+, CSS nesting, OKLCH colors) -- Fast, lean, maintainable - -## Adding New Content - -1. **Create source file** in `source/commands/` or `source/skills/` -2. **Add frontmatter** with name, description, args (for commands) or license (for skills) -3. **Write body** with instructions/prompt -4. **Build**: `bun run build` -5. **Test** with your provider -6. **Commit** both source and dist files - -## Important Notes - -- **Source is truth**: Always edit `source/`, never edit `dist/` directly -- **Test across providers**: Changes affect 4 different outputs -- **Argument handling**: Write prompts that work with both placeholders and appending -- **Cursor limitations**: No frontmatter/args, so design for graceful degradation - -## Documentation - -- **README.md**: End user guide (installation, usage, quick dev setup) -- **DEVELOP.md**: Contributor guide (architecture, build system, adding content) -- **This file (AGENTS.md)**: Context for AI assistants and new developers - -## Provider Documentation Links - -- [Agent Skills Specification](https://agentskills.io/specification) - Open standard -- [Cursor Commands](https://cursor.com/docs/agent/chat/commands) -- [Cursor Rules](https://cursor.com/docs/context/rules) -- [Cursor Skills](https://cursor.com/docs/context/skills) -- [Claude Code Slash Commands](https://code.claude.com/docs/en/slash-commands) -- [Anthropic Skills](https://github.com/anthropics/skills) -- [Gemini CLI Custom Commands](https://cloud.google.com/blog/topics/developers-practitioners/gemini-cli-custom-slash-commands) -- [Gemini CLI GEMINI.md](https://github.com/google-gemini/gemini-cli/blob/main/docs/cli/gemini-md.md) -- [Codex CLI Slash Commands](https://developers.openai.com/codex/guides/slash-commands) -- [Codex CLI Skills](https://developers.openai.com/codex/skills/) +## Contributor Notes +Do not edit generated provider files directly unless you are intentionally patching generated output as part of a build-system change. Prefer fixing the root source in `source/`, `scripts/`, or `src/`, then regenerate artifacts. diff --git a/CLAUDE.md b/CLAUDE.md index 87349124c..c89f6ed1a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,17 +1,39 @@ # Project Instructions for Claude +## Architecture (v3.0+) + +There is **one** user-invocable skill, `impeccable`, with **20 commands** underneath it. Users type `/impeccable polish`, `/impeccable audit`, etc. The skill is defined in `source/skills/impeccable/`: + +- `SKILL.md` — frontmatter (with the auto-trigger-optimized description and the `allowed-tools` list), shared design principles, and the **Command Router** section that dispatches sub-commands via argument matching. +- `reference/` — one `.md` per command (`audit.md`, `polish.md`, `critique.md`, etc.) plus the domain reference files (`typography.md`, `color-and-contrast.md`, etc.). When a sub-command is matched, the router loads its reference file. +- `scripts/command-metadata.json` — single source of truth for each command's description, argument hint, and (eventually) category. Both the build and `pin.mjs` read from this. +- `scripts/pin.mjs` — creates/removes lightweight redirect shims so users can have `/audit` as a standalone shortcut that delegates to `/impeccable audit`. +- `scripts/cleanup-deprecated.mjs` — runs once after an update to remove leftover files from renamed/merged commands. + +**Do not add standalone skills** unless there's a strong reason. The consolidation was deliberate: the `/` menu pollution problem is real and gets worse as users install more plugins. + ## CSS -Plain hand-written CSS, no Tailwind, no build step. Bun's HTML loader resolves -`` and inlines `@import` chains automatically for both -`bun run dev` and `bun run build`. +Plain hand-written CSS, no Tailwind, no build step. Bun's HTML loader resolves `` and inlines `@import` chains automatically for both `bun run dev` and `bun run build`. The CSS architecture: -- `public/css/main.css` - Main entry point, imports the partials and defines tokens/reset -- `public/css/workflow.css` - Commands section, glass terminal, case studies styles -- `public/css/gallery.css`, `skill-demos.css`, `problem-section.css` - section partials +- `public/css/main.css` — Main entry point, imports the partials and defines tokens/reset +- `public/css/workflow.css` — Commands section, glass terminal, magazine spread styles +- `public/css/sub-pages.css` — `/docs`, `/anti-patterns`, `/tutorials`, detail pages +- `public/css/tokens.css` — OKLCH color tokens (ink, charcoal, ash, mist, cream, accent) -Edit any of these directly and reload — no rebuild needed. +Edit any of these directly and reload. No rebuild needed for CSS changes. + +## Color token rule + +- **`--color-ink`** (10% lightness) is for body copy. Use it even for small text. +- **`--color-charcoal`** (25% lightness) reads as washed-out gray in small text. Only use for headings or larger body copy at ≥16px. +- **`--color-ash`** (55%) is for secondary labels, captions, relationship meta lines. +- **Never use pure black or pure white.** Use the tinted tokens. + +## No em dashes, no `--` either + +CLAUDE.md feedback from multiple sessions: "no em dashes in project copy" does NOT mean "replace with `--`". It means **use actual punctuation**: commas, colons, semicolons, periods, parentheses. The `--` substitution makes the problem worse. The build validator (`validateNoEmDashes` in `scripts/build.js`) catches real em dashes but not the `--` double-hyphen habit, so you have to catch yourself. ## Development Server @@ -20,6 +42,10 @@ bun run dev # Bun dev server at http://localhost:3000 bun run preview # Build + Cloudflare Pages local preview ``` +The dev server (in `server/index.js`) runs `generateSubPages` at module load, so editing source files in `content/site/skills/`, `source/skills/impeccable/`, or the sub-page generator requires a **server restart** (not just a browser reload) to see the change. CSS hot-reloads fine without a restart. + +**Legacy URL redirects** live in `server/index.js` and must stay in sync with `scripts/build.js` `_redirects` generation. Current redirects: `/skills` → `/docs`, `/skills/:id` → `/docs/:id`, `/cheatsheet` → `/docs`, `/gallery` → `/visual-mode#try-it-live`. + ## Deployment Hosted on Cloudflare Pages. Static assets served from `build/`, API routes handled via `_redirects` rewrites (JSON) and Pages Functions (downloads). @@ -30,7 +56,7 @@ bun run deploy # Build + deploy to Cloudflare Pages ## Build System -The build system compiles skills and commands from `source/` to provider-specific formats in `dist/`: +The build system compiles the impeccable skill from `source/` to provider-specific formats in `dist/`: ```bash bun run build # Build all providers @@ -38,9 +64,22 @@ bun run rebuild # Clean and rebuild ``` Source files use placeholders that get replaced per-provider: -- `{{model}}` - Model name (Claude, Gemini, GPT, etc.) -- `{{config_file}}` - Config file name (CLAUDE.md, .cursorrules, etc.) -- `{{ask_instruction}}` - How to ask user questions +- `{{model}}` — Model name (Claude, Gemini, GPT, etc.) +- `{{config_file}}` — Config file name (CLAUDE.md, .cursorrules, etc.) +- `{{ask_instruction}}` — How to ask user questions +- `{{command_prefix}}` — `/` or `$` depending on provider +- `{{available_commands}}` — auto-populated list of commands (from `IMPECCABLE_SUB_COMMANDS` in `scripts/lib/utils.js`) +- `{{scripts_path}}` — provider-aware path to the skill's scripts directory + +### Harness output directories are tracked + +`.claude/skills/`, `.cursor/skills/`, `.agents/skills/`, and the other 8 harness directories are **intentionally committed to the repo**. `npx skills` reads them directly from this repo at install time, and they enable clean submodule use. Do not gitignore them. Run `bun run build` to refresh them after editing `source/skills/`. + +Local state files inside harness directories (e.g. `.claude/scheduled_tasks.lock`, `.claude/settings.local.json`) ARE gitignored. + +### Generated sub-pages are gitignored + +`public/docs/`, `public/anti-patterns/`, `public/tutorials/`, `public/visual-mode/` are generated by `scripts/build-sub-pages.js` on dev server startup and during `bun run build`. They're gitignored because the production site (Cloudflare Pages) runs its own build and nobody consumes them directly from git. ## Testing @@ -48,7 +87,9 @@ Source files use placeholders that get replaced per-provider: bun run test # Run all tests ``` -Unit tests (build, detector logic) run via `bun test`. Fixture tests (jsdom-based HTML detection) run via `node --test` because bun is too slow with jsdom. The `test` script handles this split automatically. +Unit tests (build orchestration, detector logic) run via `bun test`. Fixture tests (jsdom-based HTML detection) run via `node --test` because bun is too slow with jsdom. The `test` script handles this split automatically. + +**Important:** `tests/build.test.js` uses `spyOn(transformers, 'transformCursor')` with the named exports from `scripts/lib/transformers/index.js`. Those named exports (`transformCursor`, `transformClaudeCode`, etc.) are kept specifically for test spying, even though `build.js` itself uses `createTransformer + PROVIDERS` directly. **Do not delete them as "dead code"** — I made that mistake once and broke 8 tests. ## CLI @@ -81,37 +122,57 @@ There are three independently versioned components. Only bump the one(s) that ac **Skills** (Claude Code plugin / skill definitions): - `.claude-plugin/plugin.json` → `version` - `.claude-plugin/marketplace.json` → `plugins[0].version` -- Bump when: skill content changes (`source/skills/`, skill count changes, etc.) +- Bump when: skill content changes (`source/skills/`, reference files, command metadata, etc.) **Chrome extension**: - `extension/manifest.json` → `version` - Bump when: extension code changes (`extension/`) **Website changelog** (`public/index.html`): -- Hero version link text + new changelog entry +- Hero version link text + new changelog entry in the changelog section - Update for user-facing changes only, not internal build/tooling details -- Use the most prominent version that changed (e.g. skills version for skill consolidation) +- Use the most prominent version that changed (skills version is usually the right one) -## Adding New Sub-commands +## Adding New Commands -All commands are accessed through `/impeccable`. To add a new one: +All commands live under `/impeccable`. To add a new one: -1. Create `source/skills/impeccable/reference/.md` with the command's instructions +1. Create `source/skills/impeccable/reference/.md` with the command's instructions (this is what the LLM loads when the command is invoked) 2. Add a row to the **Sub-command reference table** in `source/skills/impeccable/SKILL.md` 3. Add an entry to the **Command menu** section in the same file 4. Add the command name to `IMPECCABLE_SUB_COMMANDS` in `scripts/lib/utils.js` 5. Add it to `VALID_COMMANDS` in `source/skills/impeccable/scripts/pin.mjs` -6. Add its metadata to `source/skills/impeccable/scripts/command-metadata.json` +6. Add its metadata (description + argumentHint) to `source/skills/impeccable/scripts/command-metadata.json` +7. Add its category to `SKILL_CATEGORIES` in `scripts/lib/sub-pages-data.js` +8. Add its relationships (leadsTo / pairs / combinesWith) to `COMMAND_RELATIONSHIPS` in the same file +9. Add the same category entry to `public/js/data.js` `commandCategories` and `commandProcessSteps` (for the homepage carousel) +10. Add symbol + number to `commandSymbols` and `commandNumbers` in `public/js/components/framework-viz.js` (periodic table) +11. Optional: write an editorial wrapper at `content/site/skills/.md` with a short `tagline` and expanded body (When to use it / How it works / Try it / Pitfalls) -The build system counts commands from the router table automatically. Update the command count in **all** of these locations: +The build system counts commands from the router table automatically. Update the command count in **all** of these locations when the total changes: -- `public/index.html` -- meta descriptions, hero box, section lead -- `public/cheatsheet.html` -- meta description, subtitle -- `README.md` -- intro, command count, commands table -- `NOTICE.md` -- command count -- `AGENTS.md` -- intro command count -- `.claude-plugin/plugin.json` -- description -- `.claude-plugin/marketplace.json` -- metadata description + plugin description +- `public/index.html` — meta descriptions, hero box, section lead +- `public/cheatsheet.html` does not exist anymore; `/cheatsheet` redirects to `/docs` +- `README.md` — intro, command count, commands table +- `NOTICE.md` — command count +- `AGENTS.md` — intro command count +- `.claude-plugin/plugin.json` — description +- `.claude-plugin/marketplace.json` — metadata description + plugin description + +The build validator (`generateCounts` in `scripts/build.js`) checks these files for stale numeric counts and fails the build if any disagree with the router table. + +## Adding editorial content for existing commands + +Editorial files live at `content/site/skills/.md` and have a `tagline` frontmatter plus a body with the standard four sections: + +- **When to use it** — the specific scenarios this command owns +- **How it works** — the internal process, phases, or approach +- **Try it** — one or two concrete examples with expected output +- **Pitfalls** — real failure modes, with alternatives to reach for instead + +The tagline is used by UI surfaces (magazine spread, docs cards) that need a short human-friendly label. The long description in `command-metadata.json` stays optimized for auto-trigger keyword matching in the AI harness. + +Every command should have an editorial file eventually, but the build does not require one: commands without editorials fall back to the frontmatter description. ## Evals Framework (private, gitignored) @@ -119,6 +180,16 @@ There is a controlled eval framework at `evals/` that measures whether the `/imp **If you're picking up eval work in a new session, read `evals/AGENT.md` first.** It captures everything we've learned: model choices, sample size policy, lessons learned, common workflows, and gotchas. Don't try to reinvent the workflow from scratch — there's significant prior context. +### After structural skill changes, update `evals/runner/inline-skill.ts` + +The eval harness inlines `SKILL.md` into the system prompt for the "skill-on" condition, stripping sections that are irrelevant to an API-driven craft run. The stripped sections list (`sectionsToStrip` in `inline-skill.ts`) needs to stay in sync with `SKILL.md`'s top-level `##` headings. As of v3.0, it strips: + +- `## Context Gathering Protocol` — references a `.impeccable.md` file that doesn't exist in the test harness +- `## Command Router` — sub-command dispatch is meaningless for a single API call +- `## Pin / Unpin` — harness tooling, not design instruction + +If you add or rename a top-level section in `SKILL.md`, check whether `inline-skill.ts` needs updating. A stale strip list either leaves noise in the prompt or accidentally strips useful content. + ### Quick orientation - **Primary baseline model**: `gpt-5.4` with `--reasoning-effort medium`. Frontier intelligence at ~5-10× lower cost than high reasoning. **Do NOT use `--reasoning-effort high`** unless you specifically need it — reasoning tokens count against `max_completion_tokens` and burn ~$1-2/file with no quality benefit for our use case. diff --git a/DEVELOP.md b/DEVELOP.md index 96627c70c..ba594cf06 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -68,7 +68,7 @@ source/ -> dist/ skills/{name}/SKILL.md {provider}/{configDir}/skills/{name}/SKILL.md ``` -Each provider gets its own output directory. Two variants are generated per provider: unprefixed and prefixed (with `i-` prefix for skill names). +Each provider gets its own output directory. ## Build System Details @@ -130,7 +130,6 @@ scripts/ - `readSourceFiles()`: Reads all skill directories from `source/skills/` - `replacePlaceholders()`: Substitutes `{{model}}`, `{{config_file}}`, etc. per provider - `generateYamlFrontmatter()`: Serializes objects to YAML frontmatter (auto-quotes values starting with `[` or `{`) -- `prefixSkillReferences()`: Replaces `/skillname` with `/i-skillname` for prefixed variants ## Best Practices diff --git a/lib/download-providers.js b/lib/download-providers.js index b7f6917cd..cca47b27a 100644 --- a/lib/download-providers.js +++ b/lib/download-providers.js @@ -15,7 +15,6 @@ export const FILE_DOWNLOAD_PROVIDERS = Object.freeze( export const BUNDLE_DOWNLOAD_PROVIDERS = Object.freeze([ 'universal', - 'universal-prefixed', ]); export const DOWNLOAD_PROVIDERS = Object.freeze([ diff --git a/public/app.js b/public/app.js index 280189f5b..1b54a7054 100644 --- a/public/app.js +++ b/public/app.js @@ -170,8 +170,8 @@ function renderPatternsWithTabs(patterns, antipatterns) { // ============================================ // Handle bundle download clicks via event delegation. -// Each download button carries the full bundle name in data-bundle (e.g. -// "universal" or "universal-prefixed") so the handler is just a redirect. +// Each download button carries the full bundle name in data-bundle +// (currently just "universal") so the handler is just a redirect. document.addEventListener("click", (e) => { const bundleBtn = e.target.closest("[data-bundle]"); if (bundleBtn) { diff --git a/public/css/main.css b/public/css/main.css index d2c15a660..43dfa0fc0 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -2785,59 +2785,46 @@ code { } .install-primary-alts { - display: flex; - flex-direction: column; - gap: var(--spacing-lg); min-width: 0; } -/* Collapsible "other install methods" under the main install card. */ -.install-alts-collapse { - margin-top: var(--spacing-md); - border-top: 1px solid var(--color-mist); +/* "Other install methods" is a collapsed
      panel that sits + directly under the main install card. The alternatives are worth + keeping discoverable but don't need to be visible by default. */ +.install-primary-main > .install-primary-alts { + margin-top: var(--spacing-lg); padding-top: var(--spacing-md); + border-top: 1px solid var(--color-mist); } -.install-alts-collapse[open] { - padding-bottom: var(--spacing-sm); +.install-primary-alts[open] > .install-alts-summary > .install-alts-arrow { + transform: rotate(90deg); } .install-alts-summary { display: flex; align-items: center; - justify-content: space-between; - gap: var(--spacing-sm); - cursor: pointer; + gap: var(--spacing-xs); list-style: none; - padding: 0.25rem 0; - user-select: none; + cursor: pointer; + padding: 2px 0; } .install-alts-summary::-webkit-details-marker { display: none; } -.install-alts-summary-label { - font-family: var(--font-body); - font-size: 0.6875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.08em; +.install-alts-arrow { color: var(--color-ash); + transition: transform var(--duration-fast) var(--ease-out, ease); } -.install-alts-chevron { - color: var(--color-ash); - transition: transform 0.2s ease; - flex-shrink: 0; +.install-primary-alts[open] > .install-alts-summary { + margin-bottom: var(--spacing-md); } -.install-alts-collapse[open] .install-alts-chevron { - transform: rotate(180deg); -} - -.install-alts-collapse[open] .install-primary-alts { - margin-top: var(--spacing-md); +.install-primary-alts[open] > .install-alt-method + .install-alt-method { + margin-top: var(--spacing-lg); } /* Editorial "How to use" step list on the right side of the install row. @@ -2956,6 +2943,42 @@ code { min-width: 0; } +/* Solo install-tool (no grid wrapper) — used when step 3 is Chrome-only. + The preview screenshot sits to the left of the CTA button so neither + dominates vertical space. Collapses to a stack on narrow screens. */ +.install-tool--solo { + flex-direction: row; + align-items: center; + gap: var(--spacing-lg); + margin-top: var(--spacing-md); + width: 100%; +} + +.install-tool--solo .install-tool-preview { + flex: 0 1 260px; + min-width: 0; + margin-top: 0; +} + +.install-tool--solo .install-tool-cta { + flex: 1 1 auto; + margin-top: 0; + width: auto; + white-space: nowrap; +} + +@media (max-width: 640px) { + .install-tool--solo { + flex-direction: column; + align-items: stretch; + } + + .install-tool--solo .install-tool-preview, + .install-tool--solo .install-tool-cta { + flex: 1 1 auto; + } +} + .install-tool-label { font-family: var(--font-body); font-size: 0.9375rem; @@ -2969,10 +2992,50 @@ code { .install-tool-desc { margin: 0; font-size: 0.8125rem; - color: var(--color-charcoal); + color: var(--color-ink); line-height: 1.55; } +/* Chrome extension screenshot preview inside the install-tool column */ +.install-tool-preview { + display: block; + margin-top: var(--spacing-sm); + border: 1px solid var(--color-mist); + border-radius: 8px; + overflow: hidden; + text-decoration: none; + background: var(--color-paper); + transition: border-color var(--duration-fast) var(--ease-out, ease), + transform var(--duration-fast) var(--ease-out, ease); +} + +.install-tool-preview:hover { + border-color: var(--color-accent); + transform: translateY(-1px); +} + +.install-tool-preview img { + display: block; + width: 100%; + height: auto; +} + +.install-tool-preview-caption { + display: block; + padding: 0.4rem 0.75rem; + font-family: var(--font-body); + font-size: 0.75rem; + color: var(--color-ash); + border-top: 1px solid var(--color-mist); +} + +/* "Install from Chrome Web Store" uses the standard .btn .btn-primary + styles; this modifier only adds layout (full width + top spacing). */ +.install-tool-cta { + margin-top: var(--spacing-sm); + width: 100%; +} + .install-alts-label { display: block; font-family: var(--font-mono); diff --git a/public/index.html b/public/index.html index 387083c39..867da43d8 100644 --- a/public/index.html +++ b/public/index.html @@ -117,7 +117,7 @@
    -

    v2.2: 1 skill, 20 commands

    +

    v3.0: 1 skill, 20 commands

    @@ -329,10 +329,10 @@
    - +
    -

    1Install the skill Recommended

    -

    One agent skill that teaches your AI to design, with 20 commands bundled inside.

    +

    1Install the skill and CLI

    +

    One agent skill that teaches your AI to design, with 20 commands bundled inside. Plus the CLI that powers visual mode and scans files outside the skill.

    @@ -355,51 +355,54 @@
    Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and more.
    +
    +
    + $ + npm i -g impeccable + +
    + Recommended for visual mode and anti-pattern scans. +
    -
    +
    - Other install methods - + Other install methods + -
    -
    - Claude Code plugin -
    - $ - /plugin marketplace add pbakaus/impeccable - -
    - Then open /plugin in Claude Code -
    -
    - Manual download all 11 providers -
    - - -
    +
    + Claude Code plugin +
    + $ + /plugin marketplace add pbakaus/impeccable +
    + Then open /plugin in Claude Code +
    + +
    + Manual download all 11 providers +
    @@ -433,40 +436,23 @@
    - +
    -

    3Add the anti-pattern tools Optional

    +

    3Add the Chrome extension Optional
    -

    Two ways to catch AI slop outside the skill: a CLI for the terminal and a Chrome extension for any webpage. Both catch gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules.

    +

    Click the toolbar icon on any page and every anti-pattern lights up right where it lives. Catches gradient text, AI color palettes, nested cards, low contrast, and 20+ more rules. Works on localhost, staging, production, or anyone else's site.

    -
    -
    -
    CLI Beta
    -

    Scan files, directories, or live URLs from the terminal. Drop into CI pipelines, pre-commit hooks, or one-off audits.

    -
    -
    - $ - npm i -g impeccable - -
    - Or use npx impeccable detect src/ without installing. -
    -

    Full command reference on npm →

    -
    - -
    -
    Chrome extension
    -

    Click the toolbar icon on any page and every anti-pattern lights up right where it lives. Works on localhost, staging, production, or anyone else's site.

    -

    Install from Chrome Web Store →

    -
    +
    + + Screenshot of the Impeccable Chrome extension highlighting anti-patterns on a webpage + Live detection on any webpage + + + Install from Chrome Web Store → +
    @@ -519,36 +505,49 @@
    - v2.1 - April 9, 2026 + v3.0 + April 10, 2026
      -
    • Streamlined from 21 to 18 commands. Removed overlap and confusion: /arrange renamed to /layout, /normalize merged into /polish (design system alignment is now part of the final pass), /onboard merged into /harden (empty states and first-run experiences are part of production readiness), and /extract became /impeccable extract (a sub-mode alongside craft and teach). Every remaining command has a clearly distinct job.
      • -
    • Automatic cleanup of deprecated skills. On first load after updating, the skill detects and removes leftover files from renamed or merged commands. No manual cleanup needed.
      • -
    -
    - -
    -
    - v2.0 - April 8, 2026 -
    -
      -
    • Renamed frontend-design to impeccable. The core skill now shares its name with the project, and the teach subcommand moved from /teach-impeccable to /impeccable teach. One skill, one namespace.
      • -
    • Data-driven skill rewrite. The core skill was rebuilt against an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture. The result: dramatically more font and color diversity, sharper overall design quality, and much stronger Codex support. The biggest unlock was an anti-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking. Validated on gpt-5.4 and Qwen 3.6 Plus across 15 niches.
      • -
    • Anti-pattern detection engine. 25 deterministic rules across typography, color, layout, motion, and quality. Handles oklch, oklab, lch, and lab color formats, CSS variables inside border shorthands, gradient-backed text, and emoji-only nodes.
      • -
    • CLI: npx impeccable detect. Scans HTML, CSS, JSX/TSX, Vue, Svelte, and CSS-in-JS. Framework detection, multi-file import tracking, Puppeteer-backed live URL scanning, CI-ready JSON output, and a --fast regex mode for huge codebases.
      • -
    • Chrome DevTools extension. One-click detection on any page: yours, staging, production, or someone else's. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page. In Chrome Web Store review.
      • -
    • /critique got teeth. Persona sub-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place.
      • -
    • New ways to create with Impeccable. /shape runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written. /impeccable craft chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid.
      • -
    • New docs site. Top-level Docs, Anti-Patterns, and Visual Mode sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two tutorials, and 38 rule cards with inline visual examples.
      • -
    • New harness: Rovo Dev. 11 supported AI tools total.
      • +
    • 18 skills became 1 skill with 20 commands. Every command now lives under /impeccable: /impeccable audit, /impeccable polish, /impeccable critique, and the rest. One entry in your / menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type /impeccable.
      • +
    • Pin your favorites back as shortcuts. Run /impeccable pin audit and /audit becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to /impeccable audit, so updates to the parent skill flow through automatically. /impeccable unpin audit removes it.
      • +
    • Rewritten docs site. New /docs home with a featured home command card, dense cheatsheet-style command rows by category, and per-command detail pages. The standalone /cheatsheet was merged into /docs. URL renamed from /skills to /docs with permanent redirects so existing links keep working. The homepage install section was rebuilt 50/50 with a proper "how to use" panel explaining the mixture-of-experts model in plain language.
      • +
    • Teach runs automatically on first use. You no longer have to run /impeccable teach before anything else. Invoke any command in a fresh project and the Context Gathering Protocol kicks off the discovery interview mid-flight, then saves .impeccable.md so every future command reads it silently.
    View older releases
    +
    +
    + v2.1 + April 9, 2026 +
    +
      +
    • Streamlined from 21 to 18 commands. Removed overlap and confusion: /arrange renamed to /layout, /normalize merged into /polish (design system alignment is now part of the final pass), /onboard merged into /harden (empty states and first-run experiences are part of production readiness), and /extract became /impeccable extract (a sub-mode alongside craft and teach). Every remaining command has a clearly distinct job.
      • +
    • Automatic cleanup of deprecated skills. On first load after updating, the skill detects and removes leftover files from renamed or merged commands. No manual cleanup needed.
      • +
    +
    + +
    +
    + v2.0 + April 8, 2026 +
    +
      +
    • Renamed frontend-design to impeccable. The core skill now shares its name with the project, and the teach subcommand moved from /teach-impeccable to /impeccable teach. One skill, one namespace.
      • +
    • Data-driven skill rewrite. The core skill was rebuilt against an internal eval framework that runs the same brief through frontier models with and without the skill loaded, then measures how much the output collapses into monoculture. The result: dramatically more font and color diversity, sharper overall design quality, and much stronger Codex support. The biggest unlock was an anti-attractor procedure that forces the model to enumerate and reject its reflex defaults before picking. Validated on gpt-5.4 and Qwen 3.6 Plus across 15 niches.
      • +
    • Anti-pattern detection engine. 25 deterministic rules across typography, color, layout, motion, and quality. Handles oklch, oklab, lch, and lab color formats, CSS variables inside border shorthands, gradient-backed text, and emoji-only nodes.
      • +
    • CLI: npx impeccable detect. Scans HTML, CSS, JSX/TSX, Vue, Svelte, and CSS-in-JS. Framework detection, multi-file import tracking, Puppeteer-backed live URL scanning, CI-ready JSON output, and a --fast regex mode for huge codebases.
      • +
    • Chrome DevTools extension. One-click detection on any page: yours, staging, production, or someone else's. Reads live computed styles, surfaces findings in an interactive panel, and highlights elements on the page. In Chrome Web Store review.
      • +
    • /critique got teeth. Persona sub-agents review in parallel, score against Nielsen's heuristics, run the detector automatically, and open a live browser overlay so you can walk each finding in place.
      • +
    • New ways to create with Impeccable. /shape runs a structured discovery interview about purpose, audience, and goals, then produces a design brief before any code is written. /impeccable craft chains that brief straight into the full implementation flow so you ship a designed feature instead of a reflex card grid.
      • +
    • New docs site. Top-level Docs, Anti-Patterns, and Visual Mode sections. 18 per-skill pages with before/after demos and the canonical SKILL.md inline, two tutorials, and 38 rule cards with inline visual examples.
      • +
    • New harness: Rovo Dev. 11 supported AI tools total.
      • +
    +
    +
    v1.6.0 diff --git a/scripts/build.js b/scripts/build.js index 6636eec54..345f03f58 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -377,8 +377,8 @@ async function buildStaticSite(extraEntrypoints = []) { /** * Assemble universal directory from all provider outputs */ -function assembleUniversal(distDir, suffix = '') { - const universalDir = path.join(distDir, `universal${suffix}`); +function assembleUniversal(distDir) { + const universalDir = path.join(distDir, 'universal'); // Clean and recreate if (fs.existsSync(universalDir)) { @@ -388,7 +388,7 @@ function assembleUniversal(distDir, suffix = '') { const providerConfigs = Object.values(PROVIDERS); for (const { provider, configDir } of providerConfigs) { - const src = path.join(distDir, `${provider}${suffix}`, configDir); + const src = path.join(distDir, provider, configDir); const dest = path.join(universalDir, configDir); if (fs.existsSync(src)) { copyDirSync(src, dest); @@ -397,30 +397,28 @@ function assembleUniversal(distDir, suffix = '') { // Add a visible README so macOS users don't see an empty folder // (all provider dirs are dotfiles, hidden by default in Finder) - const prefixNote = suffix ? '\nSkills in this bundle are prefixed with i- (e.g. /i-audit) to avoid conflicts.\n' : ''; fs.writeFileSync(path.join(universalDir, 'README.txt'), -`Impeccable — Design fluency for AI harnesses +`Impeccable. Design fluency for AI harnesses. https://impeccable.style -${prefixNote} + This folder contains skills for all supported tools: - .cursor/ → Cursor - .claude/ → Claude Code - .gemini/ → Gemini CLI - .codex/ → Codex CLI - .agents/ → VS Code Copilot, Antigravity - .kiro/ → Kiro - .opencode/ → OpenCode - .pi/ → Pi - .trae-cn/ → Trae China - .trae/ → Trae International + .cursor/ -> Cursor + .claude/ -> Claude Code + .gemini/ -> Gemini CLI + .codex/ -> Codex CLI + .agents/ -> VS Code Copilot, Antigravity + .kiro/ -> Kiro + .opencode/ -> OpenCode + .pi/ -> Pi + .trae-cn/ -> Trae China + .trae/ -> Trae International To install, copy the relevant folder(s) into your project root. -These are hidden folders (dotfiles) — press Cmd+Shift+. in Finder to see them. +These are hidden folders (dotfiles). Press Cmd+Shift+. in Finder to see them. `); - const label = suffix ? ' (prefixed)' : ''; - console.log(`✓ Assembled universal${label} directory (${providerConfigs.length} providers)`); + console.log(`✓ Assembled universal directory (${providerConfigs.length} providers)`); } /** @@ -644,16 +642,14 @@ async function build() { const pluginJson = JSON.parse(fs.readFileSync(path.join(ROOT_DIR, '.claude-plugin/plugin.json'), 'utf-8')); const skillsVersion = pluginJson.version; - // Transform for each provider (unprefixed + prefixed) + // Transform for each provider for (const config of Object.values(PROVIDERS)) { const transform = createTransformer(config); transform(skills, DIST_DIR, { skillsVersion }); - transform(skills, DIST_DIR, { prefix: 'i-', outputSuffix: '-prefixed', skillsVersion }); } - // Assemble universal directory (unprefixed and prefixed) + // Assemble universal directory assembleUniversal(DIST_DIR); - assembleUniversal(DIST_DIR, '-prefixed'); // Create ZIP bundles (individual + universal) await createAllZips(DIST_DIR); diff --git a/scripts/lib/transformers/factory.js b/scripts/lib/transformers/factory.js index 5e13a4a4d..eeb1036a6 100644 --- a/scripts/lib/transformers/factory.js +++ b/scripts/lib/transformers/factory.js @@ -1,5 +1,5 @@ import path from 'path'; -import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter, replacePlaceholders, prefixSkillReferences, PROVIDER_PLACEHOLDERS } from '../utils.js'; +import { cleanDir, ensureDir, writeFile, generateYamlFrontmatter, replacePlaceholders } from '../utils.js'; /** * Map from frontmatter field name to extraction spec. @@ -54,8 +54,8 @@ export function createTransformer(config) { .filter(Boolean); return function transform(skills, distDir, options = {}) { - const { prefix = '', outputSuffix = '', skillsVersion = '' } = options; - const providerDir = path.join(distDir, `${provider}${outputSuffix}`); + const { skillsVersion = '' } = options; + const providerDir = path.join(distDir, provider); const skillsDir = path.join(providerDir, `${configDir}/skills`); cleanDir(providerDir); @@ -64,13 +64,13 @@ export function createTransformer(config) { const allSkillNames = skills.map((s) => s.name); const commandNames = skills .filter((s) => s.userInvocable) - .map((s) => `${prefix}${s.name}`); + .map((s) => s.name); let refCount = 0; let scriptCount = 0; for (const skill of skills) { - const skillName = `${prefix}${skill.name}`; + const skillName = skill.name; const skillDir = path.join(skillsDir, skillName); // Build frontmatter @@ -89,13 +89,11 @@ export function createTransformer(config) { const frontmatter = generateYamlFrontmatter(frontmatterObj); // Build body - const cmdPrefix = (PROVIDER_PLACEHOLDERS[placeholderKey] || {}).command_prefix || '/'; let skillBody = replacePlaceholders(skill.body, placeholderKey, commandNames, allSkillNames); // Replace {{scripts_path}} with provider-aware path to skill's scripts directory const scriptsPath = `${configDir}/skills/${skillName}/scripts`; skillBody = skillBody.replace(/\{\{scripts_path\}\}/g, scriptsPath); - if (prefix) skillBody = prefixSkillReferences(skillBody, prefix, allSkillNames, cmdPrefix); if (bodyTransform) skillBody = bodyTransform(skillBody, skill); const content = `${frontmatter}\n\n${skillBody}`; @@ -126,7 +124,6 @@ export function createTransformer(config) { const skillWord = skills.length === 1 ? 'skill' : 'skills'; const refInfo = refCount > 0 ? ` (${refCount} reference files)` : ''; const scriptInfo = scriptCount > 0 ? ` (${scriptCount} script files)` : ''; - const prefixInfo = prefix ? ` [${prefix}prefixed]` : ''; - console.log(`✓ ${displayName}${prefixInfo}: ${skills.length} ${skillWord}${refInfo}${scriptInfo}`); + console.log(`✓ ${displayName}: ${skills.length} ${skillWord}${refInfo}${scriptInfo}`); }; } diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 9ed835a30..1965a1f27 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -380,50 +380,14 @@ export const PROVIDER_PLACEHOLDERS = { /** * Replace all {{placeholder}} tokens with provider-specific values */ -/** - * Prefix skill cross-references in body text. - * Replaces patterns like `/skillname` and `the skillname skill` with prefixed versions. - * - * @param {string} content - The skill body text - * @param {string} prefix - The prefix to add (e.g., 'i-') - * @param {string[]} skillNames - Array of all skill names - * @param {string} commandPrefix - The command invocation prefix (e.g., '/' or '$') - */ -export function prefixSkillReferences(content, prefix, skillNames, commandPrefix = '/') { - if (!prefix || !skillNames || skillNames.length === 0) return content; - - let result = content; - // Sort by length descending to avoid partial matches (e.g. 'teach-impeccable' before 'teach') - const sorted = [...skillNames].sort((a, b) => b.length - a.length); - - for (const name of sorted) { - const prefixed = `${prefix}${name}`; - - // Replace command invocations (e.g., `/skillname` or `$skillname`) with prefixed versions - const escapedPrefix = escapeRegex(commandPrefix); - result = result.replace( - new RegExp(`${escapedPrefix}(?=${escapeRegex(name)}(?:[^a-zA-Z0-9_-]|$))`, 'g'), - `${commandPrefix}${prefix}` - ); - - // Replace `the skillname skill` references - result = result.replace( - new RegExp(`(the) ${escapeRegex(name)} skill`, 'gi'), - (_, article) => `${article} ${prefixed} skill` - ); - } - - return result; -} - function escapeRegex(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } const EXCLUDED_FROM_SUGGESTIONS = new Set([ - 'impeccable', 'i-impeccable', // foundational skill, not a steering command - 'teach-impeccable', 'i-teach-impeccable', // deprecated shim - 'frontend-design', 'i-frontend-design', // deprecated shim + 'impeccable', // foundational skill, not a steering command + 'teach-impeccable', // deprecated shim + 'frontend-design', // deprecated shim ]); // Sub-commands of /impeccable that should appear in {{available_commands}}. diff --git a/scripts/lib/zip.js b/scripts/lib/zip.js index 35a834272..6f563112f 100644 --- a/scripts/lib/zip.js +++ b/scripts/lib/zip.js @@ -58,5 +58,4 @@ export async function createAllZips(distDir) { console.log('\n📦 Creating ZIP bundles...'); await createProviderZip(path.join(distDir, 'universal'), distDir, 'universal'); - await createProviderZip(path.join(distDir, 'universal-prefixed'), distDir, 'universal-prefixed'); } diff --git a/tests/lib/utils.test.js b/tests/lib/utils.test.js index 7a0664005..38bfe9f0c 100644 --- a/tests/lib/utils.test.js +++ b/tests/lib/utils.test.js @@ -10,8 +10,7 @@ import { writeFile, generateYamlFrontmatter, readPatterns, - replacePlaceholders, - prefixSkillReferences + replacePlaceholders } from '../../scripts/lib/utils.js'; // Temporary test directory @@ -687,58 +686,3 @@ describe('replacePlaceholders', () => { }); }); -describe('prefixSkillReferences', () => { - test('should prefix /skillname command references', () => { - const result = prefixSkillReferences('Run /audit to check.', 'i-', ['audit', 'polish']); - expect(result).toBe('Run /i-audit to check.'); - }); - - test('should prefix "the skillname skill" references', () => { - const result = prefixSkillReferences('Use the audit skill for checks.', 'i-', ['audit', 'polish']); - expect(result).toBe('Use the i-audit skill for checks.'); - }); - - test('should prefix multiple different references', () => { - const result = prefixSkillReferences('Run /audit then /polish. The audit skill is great.', 'i-', ['audit', 'polish']); - expect(result).toContain('/i-audit'); - expect(result).toContain('/i-polish'); - expect(result).toContain('The i-audit skill'); - }); - - test('should not partially match longer skill names', () => { - const result = prefixSkillReferences('Run /teach-impeccable command.', 'i-', ['teach', 'teach-impeccable']); - expect(result).toBe('Run /i-teach-impeccable command.'); - }); - - test('should handle case-insensitive "the X skill" matching', () => { - const result = prefixSkillReferences('The audit skill is useful.', 'i-', ['audit']); - expect(result).toBe('The i-audit skill is useful.'); - }); - - test('should return content unchanged with empty prefix', () => { - const result = prefixSkillReferences('Run /audit.', '', ['audit']); - expect(result).toBe('Run /audit.'); - }); - - test('should return content unchanged with empty skill names', () => { - const result = prefixSkillReferences('Run /audit.', 'i-', []); - expect(result).toBe('Run /audit.'); - }); - - test('should not match /skillname inside longer words', () => { - const result = prefixSkillReferences('The /auditing process.', 'i-', ['audit']); - // 'auditing' starts with 'audit' but has trailing letters — should NOT match - expect(result).toBe('The /auditing process.'); - }); - - test('should match /skillname at end of string', () => { - const result = prefixSkillReferences('Run /audit', 'i-', ['audit']); - expect(result).toBe('Run /i-audit'); - }); - - test('should match /skillname before punctuation', () => { - const result = prefixSkillReferences('Try /audit, /polish.', 'i-', ['audit', 'polish']); - expect(result).toContain('/i-audit,'); - expect(result).toContain('/i-polish.'); - }); -}); From 9341feeac14ceda92fb5f729dd135aca8e9fcda6 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sat, 11 Apr 2026 17:26:45 -0700 Subject: [PATCH 004/125] Ignore package-lock.json (project uses bun.lock) npm subprocesses can regenerate a stray package-lock.json (last time this happened, it was reverted in 3ca60a8). Add it to .gitignore so it stops showing up as untracked. Co-Authored-By: Claude Opus 4.6 (1M context) --- .gitignore | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.gitignore b/.gitignore index c9ddacd18..9e7425369 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,10 @@ # Dependencies node_modules/ +# npm lockfile (project uses bun.lock; npm may regenerate this as a side +# effect of npm subprocesses, but it should not be tracked) +package-lock.json + # Generated files dist/ build/ From 2c10cfb6648b6c53ccafd3a19bc4d9e10b9a36ba Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sat, 11 Apr 2026 17:29:03 -0700 Subject: [PATCH 005/125] Trim v3.0 changelog to user-facing changes only Remove "Rewritten docs site" (internal site polish, not a shipped feature) and "Teach runs automatically on first use" (not new; that behavior already existed pre-3.0). What's left is the consolidation and the pin mechanism, which are the two user-facing changes in 3.0. Co-Authored-By: Claude Opus 4.6 (1M context) --- public/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/public/index.html b/public/index.html index 867da43d8..7e0fb3a4f 100644 --- a/public/index.html +++ b/public/index.html @@ -511,8 +511,6 @@
    • 18 skills became 1 skill with 20 commands. Every command now lives under /impeccable: /impeccable audit, /impeccable polish, /impeccable critique, and the rest. One entry in your / menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type /impeccable.
    • Pin your favorites back as shortcuts. Run /impeccable pin audit and /audit becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to /impeccable audit, so updates to the parent skill flow through automatically. /impeccable unpin audit removes it.
      • -
    • Rewritten docs site. New /docs home with a featured home command card, dense cheatsheet-style command rows by category, and per-command detail pages. The standalone /cheatsheet was merged into /docs. URL renamed from /skills to /docs with permanent redirects so existing links keep working. The homepage install section was rebuilt 50/50 with a proper "how to use" panel explaining the mixture-of-experts model in plain language.
      • -
    • Teach runs automatically on first use. You no longer have to run /impeccable teach before anything else. Invoke any command in a fresh project and the Context Gathering Protocol kicks off the discovery interview mid-flight, then saves .impeccable.md so every future command reads it silently.
    From e58cbc432f5e5233d61ecfcd09c2e3588e4e0455 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sat, 11 Apr 2026 19:21:45 -0700 Subject: [PATCH 006/125] Split /onboard back out as its own command (21 commands total) Pre-3.0, onboard was folded into /harden when we were trying to reduce namespace pollution. In the single-skill model that tradeoff is gone, so the weakest of the old merges is the first to undo. Harden and onboard live in different mental modes. Harden is defensive (edge cases, i18n, overflow, errors). Onboard is activation (first-run flows, empty states as CTAs, progressive disclosure). A user thinking "design the onboarding flow" was never going to type /impeccable harden. Changes: - New reference file at source/skills/impeccable/reference/onboard.md, restored from the pre-merge version in git history rather than the condensed 33-line summary that was in harden.md. - Removed the "Onboarding & First-Run Experience" section from source/skills/impeccable/reference/harden.md. - Updated harden description/editorial/process-steps to drop onboarding keywords; split commandProcessSteps so harden stays focused on production resilience and onboard gets its own phases. - Registered onboard in: SKILL.md description + command menu + router table, command-metadata.json, IMPECCABLE_SUB_COMMANDS, pin.mjs VALID_COMMANDS, SKILL_CATEGORIES, COMMAND_RELATIONSHIPS, data.js commandCategories + commandProcessSteps + commandRelationships, framework-viz commandSymbols + commandNumbers. - Reused the existing content/site/skills/onboard.md editorial wrapper (it was orphaned by the merge but never deleted), updating it to use /impeccable onboard. - Bumped all user-facing count references 20 -> 21: public/index.html, CLAUDE.md, README.md, NOTICE.md, plugin.json, marketplace.json, sitemap.xml, build-sub-pages.js. - Harness dir audit.md and critique.md changes are the {{available_commands}} placeholder expanding to include onboard. Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/SKILL.md | 6 +- .agents/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .agents/skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .agents/skills/impeccable/scripts/pin.mjs | 2 +- .claude-plugin/marketplace.json | 4 +- .claude-plugin/plugin.json | 2 +- .claude/skills/impeccable/SKILL.md | 6 +- .claude/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .claude/skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .claude/skills/impeccable/scripts/pin.mjs | 2 +- .codex/skills/impeccable/SKILL.md | 6 +- .codex/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .codex/skills/impeccable/reference/harden.md | 34 --- .codex/skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .codex/skills/impeccable/scripts/pin.mjs | 2 +- .cursor/skills/impeccable/SKILL.md | 6 +- .cursor/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .cursor/skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .cursor/skills/impeccable/scripts/pin.mjs | 2 +- .gemini/skills/impeccable/SKILL.md | 6 +- .gemini/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .gemini/skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .gemini/skills/impeccable/scripts/pin.mjs | 2 +- .kiro/skills/impeccable/SKILL.md | 6 +- .kiro/skills/impeccable/reference/audit.md | 4 +- .kiro/skills/impeccable/reference/critique.md | 4 +- .kiro/skills/impeccable/reference/harden.md | 34 --- .kiro/skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .kiro/skills/impeccable/scripts/pin.mjs | 2 +- .opencode/skills/impeccable/SKILL.md | 6 +- .../skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .../skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .opencode/skills/impeccable/scripts/pin.mjs | 2 +- .pi/skills/impeccable/SKILL.md | 6 +- .pi/skills/impeccable/reference/audit.md | 4 +- .pi/skills/impeccable/reference/critique.md | 4 +- .pi/skills/impeccable/reference/harden.md | 34 --- .pi/skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .pi/skills/impeccable/scripts/pin.mjs | 2 +- .rovodev/skills/impeccable/SKILL.md | 6 +- .rovodev/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .../skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .rovodev/skills/impeccable/scripts/pin.mjs | 2 +- .trae-cn/skills/impeccable/SKILL.md | 6 +- .trae-cn/skills/impeccable/reference/audit.md | 4 +- .../skills/impeccable/reference/critique.md | 4 +- .../skills/impeccable/reference/harden.md | 34 --- .../skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .trae-cn/skills/impeccable/scripts/pin.mjs | 2 +- .trae/skills/impeccable/SKILL.md | 6 +- .trae/skills/impeccable/reference/audit.md | 4 +- .trae/skills/impeccable/reference/critique.md | 4 +- .trae/skills/impeccable/reference/harden.md | 34 --- .trae/skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- .trae/skills/impeccable/scripts/pin.mjs | 2 +- CLAUDE.md | 2 +- NOTICE.md | 2 +- README.md | 9 +- content/site/skills/harden.md | 15 +- content/site/skills/onboard.md | 10 +- public/index.html | 22 +- public/js/components/framework-viz.js | 5 +- public/js/data.js | 7 +- public/js/generated/counts.js | 2 +- public/sitemap.xml | 7 +- scripts/build-sub-pages.js | 2 +- scripts/lib/sub-pages-data.js | 3 +- scripts/lib/utils.js | 4 +- source/skills/impeccable/SKILL.md | 6 +- source/skills/impeccable/reference/harden.md | 34 --- source/skills/impeccable/reference/onboard.md | 234 ++++++++++++++++++ .../impeccable/scripts/command-metadata.json | 6 +- source/skills/impeccable/scripts/pin.mjs | 2 +- 97 files changed, 3023 insertions(+), 545 deletions(-) create mode 100644 .agents/skills/impeccable/reference/onboard.md create mode 100644 .claude/skills/impeccable/reference/onboard.md create mode 100644 .codex/skills/impeccable/reference/onboard.md create mode 100644 .cursor/skills/impeccable/reference/onboard.md create mode 100644 .gemini/skills/impeccable/reference/onboard.md create mode 100644 .kiro/skills/impeccable/reference/onboard.md create mode 100644 .opencode/skills/impeccable/reference/onboard.md create mode 100644 .pi/skills/impeccable/reference/onboard.md create mode 100644 .rovodev/skills/impeccable/reference/onboard.md create mode 100644 .trae-cn/skills/impeccable/reference/onboard.md create mode 100644 .trae/skills/impeccable/reference/onboard.md create mode 100644 source/skills/impeccable/reference/onboard.md diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index 3763c7471..eb0ba0589 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -314,6 +314,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -350,7 +351,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.agents/skills/impeccable/reference/audit.md b/.agents/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.agents/skills/impeccable/reference/audit.md +++ b/.agents/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.agents/skills/impeccable/reference/critique.md b/.agents/skills/impeccable/reference/critique.md index c6a867d50..16280db0c 100644 --- a/.agents/skills/impeccable/reference/critique.md +++ b/.agents/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.agents/skills/impeccable/reference/harden.md b/.agents/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.agents/skills/impeccable/reference/harden.md +++ b/.agents/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.agents/skills/impeccable/reference/onboard.md b/.agents/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.agents/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.agents/skills/impeccable/scripts/command-metadata.json b/.agents/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.agents/skills/impeccable/scripts/command-metadata.json +++ b/.agents/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.agents/skills/impeccable/scripts/pin.mjs b/.agents/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.agents/skills/impeccable/scripts/pin.mjs +++ b/.agents/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json index 15754b175..9070e688e 100644 --- a/.claude-plugin/marketplace.json +++ b/.claude-plugin/marketplace.json @@ -2,7 +2,7 @@ "$schema": "https://anthropic.com/claude-code/marketplace.schema.json", "name": "impeccable", "metadata": { - "description": "Design fluency for AI harnesses. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design." + "description": "Design fluency for AI harnesses. 1 skill, 21 commands, and curated anti-patterns for impeccable frontend design." }, "owner": { "name": "Paul Bakaus", @@ -11,7 +11,7 @@ "plugins": [ { "name": "impeccable", - "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", + "description": "Design fluency for frontend development. 1 skill with 21 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", "version": "3.0.0", "author": { "name": "Paul Bakaus", diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index a42ac27a3..60c051727 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,6 +1,6 @@ { "name": "impeccable", - "description": "Design fluency for frontend development. 1 skill with 20 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", + "description": "Design fluency for frontend development. 1 skill with 21 commands (/impeccable polish, /impeccable audit, /impeccable critique, etc.) and curated anti-pattern detection.", "version": "3.0.0", "author": { "name": "Paul Bakaus", diff --git a/.claude/skills/impeccable/SKILL.md b/.claude/skills/impeccable/SKILL.md index 182c33604..cab244324 100644 --- a/.claude/skills/impeccable/SKILL.md +++ b/.claude/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -316,6 +316,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -352,7 +353,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.claude/skills/impeccable/reference/audit.md b/.claude/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.claude/skills/impeccable/reference/audit.md +++ b/.claude/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.claude/skills/impeccable/reference/critique.md b/.claude/skills/impeccable/reference/critique.md index e0d63443f..1da3f7efb 100644 --- a/.claude/skills/impeccable/reference/critique.md +++ b/.claude/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.claude/skills/impeccable/reference/harden.md b/.claude/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.claude/skills/impeccable/reference/harden.md +++ b/.claude/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.claude/skills/impeccable/reference/onboard.md b/.claude/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.claude/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.claude/skills/impeccable/scripts/command-metadata.json b/.claude/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.claude/skills/impeccable/scripts/command-metadata.json +++ b/.claude/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.claude/skills/impeccable/scripts/pin.mjs b/.claude/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.claude/skills/impeccable/scripts/pin.mjs +++ b/.claude/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.codex/skills/impeccable/SKILL.md b/.codex/skills/impeccable/SKILL.md index f49846747..e2e0c0b48 100644 --- a/.codex/skills/impeccable/SKILL.md +++ b/.codex/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 argument-hint: "[command] [target]" license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. @@ -313,6 +313,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `$impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `$impeccable distill [target]` - Strip to essence, remove complexity > `$impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `$impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `$impeccable animate [target]` - Add purposeful animations and motion @@ -349,7 +350,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.codex/skills/impeccable/reference/audit.md b/.codex/skills/impeccable/reference/audit.md index a86b3be95..ab5552ecd 100644 --- a/.codex/skills/impeccable/reference/audit.md +++ b/.codex/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) +- **Suggested command**: Which command to use (prefer: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $impeccable onboard, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $impeccable harden, $impeccable layout, $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. +**Rules**: Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $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. After presenting the summary, tell the user: diff --git a/.codex/skills/impeccable/reference/critique.md b/.codex/skills/impeccable/reference/critique.md index 41ec68c4d..cc0944eca 100644 --- a/.codex/skills/impeccable/reference/critique.md +++ b/.codex/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, $impeccable layout, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) +- **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 harden, $impeccable layout, $impeccable onboard, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, $impeccable layout, $impeccable optimize, $impeccable overdrive, $impeccable polish, $impeccable quieter, $impeccable shape, $impeccable typeset +- Only recommend commands from: $impeccable adapt, $impeccable animate, $impeccable audit, $impeccable bolder, $impeccable clarify, $impeccable colorize, $impeccable critique, $impeccable delight, $impeccable distill, $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 diff --git a/.codex/skills/impeccable/reference/harden.md b/.codex/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.codex/skills/impeccable/reference/harden.md +++ b/.codex/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.codex/skills/impeccable/reference/onboard.md b/.codex/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.codex/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.codex/skills/impeccable/scripts/command-metadata.json b/.codex/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.codex/skills/impeccable/scripts/command-metadata.json +++ b/.codex/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.codex/skills/impeccable/scripts/pin.mjs b/.codex/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.codex/skills/impeccable/scripts/pin.mjs +++ b/.codex/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.cursor/skills/impeccable/SKILL.md b/.cursor/skills/impeccable/SKILL.md index f3baccb6a..1647b7b40 100644 --- a/.cursor/skills/impeccable/SKILL.md +++ b/.cursor/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -312,6 +312,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -348,7 +349,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.cursor/skills/impeccable/reference/audit.md b/.cursor/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.cursor/skills/impeccable/reference/audit.md +++ b/.cursor/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.cursor/skills/impeccable/reference/critique.md b/.cursor/skills/impeccable/reference/critique.md index 8a8ebeb35..4684cb5c0 100644 --- a/.cursor/skills/impeccable/reference/critique.md +++ b/.cursor/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.cursor/skills/impeccable/reference/harden.md b/.cursor/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.cursor/skills/impeccable/reference/harden.md +++ b/.cursor/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.cursor/skills/impeccable/reference/onboard.md b/.cursor/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.cursor/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.cursor/skills/impeccable/scripts/command-metadata.json b/.cursor/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.cursor/skills/impeccable/scripts/command-metadata.json +++ b/.cursor/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.cursor/skills/impeccable/scripts/pin.mjs b/.cursor/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.cursor/skills/impeccable/scripts/pin.mjs +++ b/.cursor/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.gemini/skills/impeccable/SKILL.md b/.gemini/skills/impeccable/SKILL.md index ed6950695..56b306632 100644 --- a/.gemini/skills/impeccable/SKILL.md +++ b/.gemini/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 --- @@ -311,6 +311,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -347,7 +348,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.gemini/skills/impeccable/reference/audit.md b/.gemini/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.gemini/skills/impeccable/reference/audit.md +++ b/.gemini/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.gemini/skills/impeccable/reference/critique.md b/.gemini/skills/impeccable/reference/critique.md index aa3c4a64a..f0f30e36c 100644 --- a/.gemini/skills/impeccable/reference/critique.md +++ b/.gemini/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.gemini/skills/impeccable/reference/harden.md b/.gemini/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.gemini/skills/impeccable/reference/harden.md +++ b/.gemini/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.gemini/skills/impeccable/reference/onboard.md b/.gemini/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.gemini/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.gemini/skills/impeccable/scripts/command-metadata.json b/.gemini/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.gemini/skills/impeccable/scripts/command-metadata.json +++ b/.gemini/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.gemini/skills/impeccable/scripts/pin.mjs b/.gemini/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.gemini/skills/impeccable/scripts/pin.mjs +++ b/.gemini/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.kiro/skills/impeccable/SKILL.md b/.kiro/skills/impeccable/SKILL.md index e06824c74..ea9899a5a 100644 --- a/.kiro/skills/impeccable/SKILL.md +++ b/.kiro/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. --- @@ -312,6 +312,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -348,7 +349,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.kiro/skills/impeccable/reference/audit.md b/.kiro/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.kiro/skills/impeccable/reference/audit.md +++ b/.kiro/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.kiro/skills/impeccable/reference/critique.md b/.kiro/skills/impeccable/reference/critique.md index 2d9f41a65..f0e1374b5 100644 --- a/.kiro/skills/impeccable/reference/critique.md +++ b/.kiro/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.kiro/skills/impeccable/reference/harden.md b/.kiro/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.kiro/skills/impeccable/reference/harden.md +++ b/.kiro/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.kiro/skills/impeccable/reference/onboard.md b/.kiro/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.kiro/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.kiro/skills/impeccable/scripts/command-metadata.json b/.kiro/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.kiro/skills/impeccable/scripts/command-metadata.json +++ b/.kiro/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.kiro/skills/impeccable/scripts/pin.mjs b/.kiro/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.kiro/skills/impeccable/scripts/pin.mjs +++ b/.kiro/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.opencode/skills/impeccable/SKILL.md b/.opencode/skills/impeccable/SKILL.md index 6d274ae73..05deef881 100644 --- a/.opencode/skills/impeccable/SKILL.md +++ b/.opencode/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -316,6 +316,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -352,7 +353,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.opencode/skills/impeccable/reference/audit.md b/.opencode/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.opencode/skills/impeccable/reference/audit.md +++ b/.opencode/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.opencode/skills/impeccable/reference/critique.md b/.opencode/skills/impeccable/reference/critique.md index ea2c4d7a7..b6d5084d0 100644 --- a/.opencode/skills/impeccable/reference/critique.md +++ b/.opencode/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.opencode/skills/impeccable/reference/harden.md b/.opencode/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.opencode/skills/impeccable/reference/harden.md +++ b/.opencode/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.opencode/skills/impeccable/reference/onboard.md b/.opencode/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.opencode/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.opencode/skills/impeccable/scripts/command-metadata.json b/.opencode/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.opencode/skills/impeccable/scripts/command-metadata.json +++ b/.opencode/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.opencode/skills/impeccable/scripts/pin.mjs b/.opencode/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.opencode/skills/impeccable/scripts/pin.mjs +++ b/.opencode/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md index be8ec284a..02bf22f9c 100644 --- a/.pi/skills/impeccable/SKILL.md +++ b/.pi/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md for attribution. allowed-tools: @@ -314,6 +314,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -350,7 +351,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.pi/skills/impeccable/reference/audit.md b/.pi/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.pi/skills/impeccable/reference/audit.md +++ b/.pi/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.pi/skills/impeccable/reference/critique.md b/.pi/skills/impeccable/reference/critique.md index c282a6c80..f59217dea 100644 --- a/.pi/skills/impeccable/reference/critique.md +++ b/.pi/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.pi/skills/impeccable/reference/harden.md b/.pi/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.pi/skills/impeccable/reference/harden.md +++ b/.pi/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.pi/skills/impeccable/reference/onboard.md b/.pi/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.pi/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.pi/skills/impeccable/scripts/command-metadata.json b/.pi/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.pi/skills/impeccable/scripts/command-metadata.json +++ b/.pi/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.pi/skills/impeccable/scripts/pin.mjs b/.pi/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.pi/skills/impeccable/scripts/pin.mjs +++ b/.pi/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.rovodev/skills/impeccable/SKILL.md b/.rovodev/skills/impeccable/SKILL.md index b42e08bfb..6f33c72a5 100644 --- a/.rovodev/skills/impeccable/SKILL.md +++ b/.rovodev/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -316,6 +316,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -352,7 +353,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.rovodev/skills/impeccable/reference/audit.md b/.rovodev/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.rovodev/skills/impeccable/reference/audit.md +++ b/.rovodev/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.rovodev/skills/impeccable/reference/critique.md b/.rovodev/skills/impeccable/reference/critique.md index c282a6c80..f59217dea 100644 --- a/.rovodev/skills/impeccable/reference/critique.md +++ b/.rovodev/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.rovodev/skills/impeccable/reference/harden.md b/.rovodev/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.rovodev/skills/impeccable/reference/harden.md +++ b/.rovodev/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.rovodev/skills/impeccable/reference/onboard.md b/.rovodev/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.rovodev/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.rovodev/skills/impeccable/scripts/command-metadata.json b/.rovodev/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.rovodev/skills/impeccable/scripts/command-metadata.json +++ b/.rovodev/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.rovodev/skills/impeccable/scripts/pin.mjs b/.rovodev/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.rovodev/skills/impeccable/scripts/pin.mjs +++ b/.rovodev/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.trae-cn/skills/impeccable/SKILL.md b/.trae-cn/skills/impeccable/SKILL.md index 177238ebb..7eb04cc1a 100644 --- a/.trae-cn/skills/impeccable/SKILL.md +++ b/.trae-cn/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -314,6 +314,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -350,7 +351,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.trae-cn/skills/impeccable/reference/audit.md b/.trae-cn/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.trae-cn/skills/impeccable/reference/audit.md +++ b/.trae-cn/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.trae-cn/skills/impeccable/reference/critique.md b/.trae-cn/skills/impeccable/reference/critique.md index 8866153fc..2ced96a7c 100644 --- a/.trae-cn/skills/impeccable/reference/critique.md +++ b/.trae-cn/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.trae-cn/skills/impeccable/reference/harden.md b/.trae-cn/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.trae-cn/skills/impeccable/reference/harden.md +++ b/.trae-cn/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.trae-cn/skills/impeccable/reference/onboard.md b/.trae-cn/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.trae-cn/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.trae-cn/skills/impeccable/scripts/command-metadata.json b/.trae-cn/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.trae-cn/skills/impeccable/scripts/command-metadata.json +++ b/.trae-cn/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.trae-cn/skills/impeccable/scripts/pin.mjs b/.trae-cn/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.trae-cn/skills/impeccable/scripts/pin.mjs +++ b/.trae-cn/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/.trae/skills/impeccable/SKILL.md b/.trae/skills/impeccable/SKILL.md index d97a8e5ce..94637bd53 100644 --- a/.trae/skills/impeccable/SKILL.md +++ b/.trae/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -314,6 +314,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `/impeccable distill [target]` - Strip to essence, remove complexity > `/impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `/impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `/impeccable animate [target]` - Add purposeful animations and motion @@ -350,7 +351,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/.trae/skills/impeccable/reference/audit.md b/.trae/skills/impeccable/reference/audit.md index 206fafb5c..bbba2401b 100644 --- a/.trae/skills/impeccable/reference/audit.md +++ b/.trae/skills/impeccable/reference/audit.md @@ -95,7 +95,7 @@ For each issue, document: - **Impact**: How it affects users - **WCAG/Standard**: Which standard it violates (if applicable) - **Recommendation**: How to fix it -- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **Suggested command**: Which command to use (prefer: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) ### Patterns & Systemic Issues @@ -114,7 +114,7 @@ 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) -**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /impeccable harden, /impeccable layout, /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. +**Rules**: Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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. After presenting the summary, tell the user: diff --git a/.trae/skills/impeccable/reference/critique.md b/.trae/skills/impeccable/reference/critique.md index 8866153fc..2ced96a7c 100644 --- a/.trae/skills/impeccable/reference/critique.md +++ b/.trae/skills/impeccable/reference/critique.md @@ -132,7 +132,7 @@ For each issue, tag with **P0-P3 severity** (consult [heuristics-scoring](heuris - **[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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) +- **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 harden, /impeccable layout, /impeccable onboard, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset) #### Persona Red Flags > *Consult [personas](personas.md)* @@ -197,7 +197,7 @@ List recommended commands in priority order, based on the user's answers: ... **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 harden, /impeccable layout, /impeccable optimize, /impeccable overdrive, /impeccable polish, /impeccable quieter, /impeccable shape, /impeccable typeset +- Only recommend commands from: /impeccable adapt, /impeccable animate, /impeccable audit, /impeccable bolder, /impeccable clarify, /impeccable colorize, /impeccable critique, /impeccable delight, /impeccable distill, /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 diff --git a/.trae/skills/impeccable/reference/harden.md b/.trae/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/.trae/skills/impeccable/reference/harden.md +++ b/.trae/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/.trae/skills/impeccable/reference/onboard.md b/.trae/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/.trae/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/.trae/skills/impeccable/scripts/command-metadata.json b/.trae/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/.trae/skills/impeccable/scripts/command-metadata.json +++ b/.trae/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/.trae/skills/impeccable/scripts/pin.mjs b/.trae/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/.trae/skills/impeccable/scripts/pin.mjs +++ b/.trae/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; diff --git a/CLAUDE.md b/CLAUDE.md index c89f6ed1a..db3cb1c25 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -2,7 +2,7 @@ ## Architecture (v3.0+) -There is **one** user-invocable skill, `impeccable`, with **20 commands** underneath it. Users type `/impeccable polish`, `/impeccable audit`, etc. The skill is defined in `source/skills/impeccable/`: +There is **one** user-invocable skill, `impeccable`, with **21 commands** underneath it. Users type `/impeccable polish`, `/impeccable audit`, etc. The skill is defined in `source/skills/impeccable/`: - `SKILL.md` — frontmatter (with the auto-trigger-optimized description and the `allowed-tools` list), shared design principles, and the **Command Router** section that dispatches sub-commands via argument matching. - `reference/` — one `.md` per command (`audit.md`, `polish.md`, `critique.md`, etc.) plus the domain reference files (`typography.md`, `color-and-contrast.md`, etc.). When a sub-command is matched, the router loads its reference file. diff --git a/NOTICE.md b/NOTICE.md index 2843ee71b..89731692d 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -13,5 +13,5 @@ The `impeccable` skill in this project builds on Anthropic's original frontend-d This project extends the original with: - 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing) -- 20 commands +- 21 commands - Expanded patterns and anti-patterns diff --git a/README.md b/README.md index 629065501..5296332e0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Impeccable -The vocabulary you didn't know you needed. 1 skill, 20 commands, and curated anti-patterns for impeccable frontend design. +The vocabulary you didn't know you needed. 1 skill, 21 commands, and curated anti-patterns for impeccable frontend design. > **Quick start:** Visit [impeccable.style](https://impeccable.style) to download ready-to-use bundles. @@ -12,7 +12,7 @@ Every LLM learned from the same generic templates. Without guidance, you get the Impeccable fights that bias with: - **An expanded skill** with 7 domain-specific reference files ([view source](source/skills/impeccable/)) -- **20 commands** to audit, review, polish, distill, animate, and more +- **21 commands** to audit, review, polish, distill, animate, and more - **Curated anti-patterns** that explicitly tell the AI what NOT to do ## What's Included @@ -31,7 +31,7 @@ A comprehensive design skill with 7 domain-specific references ([view skill](sou | [responsive-design](source/skills/impeccable/reference/responsive-design.md) | Mobile-first, fluid design, container queries | | [ux-writing](source/skills/impeccable/reference/ux-writing.md) | Button labels, error messages, empty states | -### 20 Commands +### 21 Commands All commands are accessed through `/impeccable`: @@ -47,7 +47,8 @@ All commands are accessed through `/impeccable`: | `/impeccable bolder` | Amplify boring designs | | `/impeccable quieter` | Tone down overly bold designs | | `/impeccable distill` | Strip to essence | -| `/impeccable harden` | Error handling, onboarding, i18n, edge cases | +| `/impeccable harden` | Error handling, i18n, text overflow, edge cases | +| `/impeccable onboard` | First-run flows, empty states, activation paths | | `/impeccable animate` | Add purposeful motion | | `/impeccable colorize` | Introduce strategic color | | `/impeccable typeset` | Fix font choices, hierarchy, sizing | diff --git a/content/site/skills/harden.md b/content/site/skills/harden.md index 8b80e2bd0..139c96fd6 100644 --- a/content/site/skills/harden.md +++ b/content/site/skills/harden.md @@ -1,24 +1,23 @@ --- -tagline: "Make interfaces production-ready. Edge cases, onboarding, i18n, error states, overflow." +tagline: "Make interfaces production-ready. Edge cases, i18n, error states, overflow." --- ## When to use it -`/impeccable harden` is for the day your interface meets reality. Real user data is messy: names that are 60 characters long, product titles in German, prices in the billions, empty lists, 500 errors, offline modes, right-to-left text. Designs that only work with perfect data are not production-ready. +`/impeccable harden` is for the day your interface meets reality. Real user data is messy: names that are 60 characters long, product titles in German, prices in the billions, 500 errors, offline modes, right-to-left text. Designs that only work with perfect data are not production-ready. -Reach for it before launch, before opening to a new market, or any time a bug report starts with "our user had a really long name and". +Reach for it before launch, before opening to a new market, or any time a bug report starts with "our user had a really long name and". For first-run flows, empty-state activation, and onboarding design, reach for `/impeccable onboard` instead. ## How it works -The skill works through five dimensions of real-world resilience: +The skill works through four dimensions of real-world resilience: -1. **Text and data extremes**. Long text, short text, special characters, emoji, RTL, numbers in the billions, 1000-item lists, zero-data empty states. +1. **Text and data extremes**. Long text, short text, special characters, emoji, RTL, numbers in the billions, 1000-item lists. 2. **Error scenarios**. Network failures, API 4xx/5xx, validation errors, permission errors, rate limits, concurrent operations. 3. **Internationalization**. Long translations (German is often 30% longer than English), RTL languages, date and number formats, currency symbols, character sets. -4. **Onboarding and empty states**. First-run experiences, empty state design, progressive disclosure, feature discovery. Making the feature work for someone who has never seen it before. -5. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode. +4. **Device and context**. Touch targets, offline behavior, slow connections, low-power mode. -For each dimension it identifies the failure mode, then applies the concrete fix: overflow handling, proper empty states, informative error UI, i18n-safe layouts, pluralization, sensible fallbacks. +For each dimension it identifies the failure mode, then applies the concrete fix: overflow handling, informative error UI, i18n-safe layouts, pluralization, sensible fallbacks. ## Try it diff --git a/content/site/skills/onboard.md b/content/site/skills/onboard.md index d081bdf9a..dd4e2c9ca 100644 --- a/content/site/skills/onboard.md +++ b/content/site/skills/onboard.md @@ -4,11 +4,11 @@ tagline: "Design first-run experiences, empty states, and paths to value." ## When to use it -`/onboard` is for the moments that decide whether a new user sticks around: the first screen, the empty state, the setup flow, the product tour, the "what do I do now" gap. Reach for it when activation is weak, when new users drop off before reaching value, or when your product has empty states that say "no items yet" and stop there. +`/impeccable onboard` is for the moments that decide whether a new user sticks around: the first screen, the empty state, the setup flow, the product tour, the "what do I do now" gap. Reach for it when activation is weak, when new users drop off before reaching value, or when your product has empty states that say "no items yet" and stop there. ## How it works -The skill starts from one question: what is the aha moment, and how fast can a new user get there. Every design decision points at that moment. +The command starts from one question: what is the aha moment, and how fast can a new user get there. Every design decision points at that moment. It works across the surfaces that shape first impressions: @@ -18,12 +18,12 @@ It works across the surfaces that shape first impressions: 4. **Progressive disclosure**: advanced features stay out of the way until they are earned. 5. **Activation events**: the moment a user first experiences the core value is instrumented and celebrated, quietly. -The skill resists two common failure modes: over-tutorialized onboarding where users click through a carousel before they can touch anything, and zero-onboarding where users are dropped into an empty app and expected to figure it out. +The command resists two common failure modes: over-tutorialized onboarding where users click through a carousel before they can touch anything, and zero-onboarding where users are dropped into an empty app and expected to figure it out. ## Try it ``` -/onboard the editor +/impeccable onboard the editor ``` Typical output: @@ -36,5 +36,5 @@ Typical output: ## Pitfalls - **Adding a product tour as the default answer.** Most products do not need a tour. They need a better first screen. Tours are a crutch. -- **Designing onboarding without defining the aha moment.** If you cannot say in one sentence what the user should feel in the first 60 seconds, go back to `/shape` first. +- **Designing onboarding without defining the aha moment.** If you cannot say in one sentence what the user should feel in the first 60 seconds, go back to `/impeccable shape` first. - **Running onboard on a broken flow.** Fix the flow first. Onboarding cannot rescue a product where the core action is broken. diff --git a/public/index.html b/public/index.html index 7e0fb3a4f..41ac9bf99 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,7 @@ Impeccable: The missing upgrade to Anthropic's impeccable skill - + @@ -21,7 +21,7 @@ - + @@ -29,7 +29,7 @@ - + @@ -88,13 +88,13 @@

    Impeccable

    Design fluency for AI harnesses

    -

    Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 20 commands to steer the result.

    -

    Impeccable teaches your AI real design and gives you 20 commands to steer the result.

    +

    Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 21 commands to steer the result.

    +

    Impeccable teaches your AI real design and gives you 21 commands to steer the result.

    What's included
    - Impeccable agent skill with 20 design commands + Impeccable agent skill with 21 design commands · Optional CLI + Chrome extension
    @@ -117,7 +117,7 @@
    -

    v3.0: 1 skill, 20 commands

    +

    v3.0: 1 skill, 21 commands

    @@ -203,7 +203,7 @@

    The Language

    -

    20 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

    +

    21 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

    @@ -332,7 +332,7 @@

    1Install the skill and CLI

    -

    One agent skill that teaches your AI to design, with 20 commands bundled inside. Plus the CLI that powers visual mode and scans files outside the skill.

    +

    One agent skill that teaches your AI to design, with 21 commands bundled inside. Plus the CLI that powers visual mode and scans files outside the skill.

    @@ -410,7 +410,7 @@

    2Use it

    -

    Impeccable gives you a shared design vocabulary with your AI. 20 commands (polish, audit, critique, typeset, and more) that each encode a specific design discipline, so you can steer with precision.

    +

    Impeccable gives you a shared design vocabulary with your AI. 21 commands (polish, audit, critique, typeset, and more) that each encode a specific design discipline, so you can steer with precision.

    1. @@ -509,7 +509,7 @@ April 10, 2026
      -
    • 18 skills became 1 skill with 20 commands. Every command now lives under /impeccable: /impeccable audit, /impeccable polish, /impeccable critique, and the rest. One entry in your / menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type /impeccable.
      • +
    • 18 skills became 1 skill with 21 commands. Every command now lives under /impeccable: /impeccable audit, /impeccable polish, /impeccable critique, and the rest. One entry in your / menu instead of 18, a shared design vocabulary between you and your AI, and far less namespace pollution as the plugin ecosystem grows. The autocomplete shows the full list the moment you type /impeccable.
    • Pin your favorites back as shortcuts. Run /impeccable pin audit and /audit becomes a standalone command again, without reversing the consolidation. Under the hood it writes a lightweight redirect skill that delegates to /impeccable audit, so updates to the parent skill flow through automatically. /impeccable unpin audit removes it.
    diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index d74881b96..204311e89 100644 --- a/public/js/components/framework-viz.js +++ b/public/js/components/framework-viz.js @@ -44,6 +44,7 @@ const commandSymbols = { 'polish': 'Po', 'optimize': 'Op', 'harden': 'Ha', + 'onboard': 'On', 'teach': 'Te', 'extract': 'Ex' }; @@ -54,8 +55,8 @@ const commandNumbers = { 'typeset': 6, 'layout': 7, 'colorize': 8, 'animate': 9, 'delight': 10, 'bolder': 11, 'quieter': 12, 'overdrive': 13, 'distill': 14, 'clarify': 15, 'adapt': 16, - 'polish': 17, 'optimize': 18, 'harden': 19, - 'teach': 20, 'extract': 21 + 'polish': 17, 'optimize': 18, 'harden': 19, 'onboard': 20, + 'teach': 21, 'extract': 22 }; // After the v3.0 consolidation, all commands except the root "impeccable" are diff --git a/public/js/data.js b/public/js/data.js index 4861eb896..88b808d73 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -71,7 +71,8 @@ export const commandProcessSteps = { 'adapt': ['Analyze', 'Adjust', 'Optimize'], 'polish': ['Discover', 'Review', 'Refine', 'Verify'], 'optimize': ['Profile', 'Identify', 'Improve', 'Measure'], - 'harden': ['Test', 'Handle', 'Onboard', 'Validate'], + 'harden': ['Assess', 'Implement', 'Test', 'Verify'], + 'onboard': ['Identify', 'Design', 'Guide', 'Measure'], 'teach': ['Explore', 'Interview', 'Synthesize', 'Save'], 'extract': ['Identify', 'Abstract', 'Migrate', 'Document'] }; @@ -101,6 +102,7 @@ export const commandCategories = { 'polish': 'harden', 'optimize': 'harden', 'harden': 'harden', + 'onboard': 'harden', // SYSTEM - setup and tooling 'teach': 'system', 'extract': 'system' @@ -134,7 +136,8 @@ export const commandRelationships = { 'adapt': { combinesWith: ['polish', 'clarify'], flow: 'Simplify: Adapt for different contexts' }, 'polish': { flow: 'Harden: Final pass and design system alignment' }, 'optimize': { flow: 'Harden: Performance improvements' }, - 'harden': { combinesWith: ['optimize'], flow: 'Harden: Edge cases, onboarding, and error handling' }, + 'harden': { combinesWith: ['optimize'], flow: 'Harden: Edge cases, error handling, and i18n' }, + 'onboard': { combinesWith: ['clarify', 'delight'], flow: 'Harden: First-run experiences and empty states' }, 'teach': { flow: 'System: One-time project design context setup' }, 'extract': { flow: 'System: Extract design system components and tokens' } }; diff --git a/public/js/generated/counts.js b/public/js/generated/counts.js index 6a9333419..420bdc2f0 100644 --- a/public/js/generated/counts.js +++ b/public/js/generated/counts.js @@ -1,3 +1,3 @@ // GENERATED by build.js — do not edit -export const COMMAND_COUNT = 20; +export const COMMAND_COUNT = 21; export const DETECTION_COUNT = 25; diff --git a/public/sitemap.xml b/public/sitemap.xml index b78f423ef..164eb40c3 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -40,8 +40,8 @@ 0.9 - - https://impeccable.style/docs/impeccable2026-04-100.9 + + https://impeccable.style/docs/impeccable2026-04-110.9 https://impeccable.style/docs/craft2026-04-100.8 https://impeccable.style/docs/teach2026-04-100.8 https://impeccable.style/docs/extract2026-04-100.8 @@ -52,7 +52,8 @@ https://impeccable.style/docs/bolder2026-04-100.8 https://impeccable.style/docs/quieter2026-04-100.8 https://impeccable.style/docs/distill2026-04-100.8 - https://impeccable.style/docs/harden2026-04-100.8 + https://impeccable.style/docs/harden2026-04-110.8 + https://impeccable.style/docs/onboard2026-04-110.8 https://impeccable.style/docs/animate2026-04-100.8 https://impeccable.style/docs/colorize2026-04-100.8 https://impeccable.style/docs/typeset2026-04-100.8 diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index 621509328..b48c0adf1 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -695,7 +695,7 @@ export async function generateSubPages(rootDir) { const html = renderPage({ title: 'Docs | Impeccable', description: - '20 commands that teach your AI harness how to design. Browse by category: create, evaluate, refine, simplify, harden.', + '21 commands that teach your AI harness how to design. Browse by category: create, evaluate, refine, simplify, harden.', bodyHtml: wrapInDocsLayout(sidebar, main), activeNav: 'docs', canonicalPath: '/docs', diff --git a/scripts/lib/sub-pages-data.js b/scripts/lib/sub-pages-data.js index 7523de8dd..964b26399 100644 --- a/scripts/lib/sub-pages-data.js +++ b/scripts/lib/sub-pages-data.js @@ -36,7 +36,6 @@ const EXCLUDED_SKILLS = new Set([ 'teach-impeccable', // deprecated, folded into /impeccable teach 'arrange', // renamed to layout 'normalize', // merged into /polish - 'onboard', // merged into /harden ]); /** @@ -69,6 +68,7 @@ const SKILL_CATEGORIES = { polish: 'harden', optimize: 'harden', harden: 'harden', + onboard: 'harden', // SYSTEM - setup and tooling teach: 'system', extract: 'system', @@ -126,6 +126,7 @@ export const COMMAND_RELATIONSHIPS = { polish: {}, optimize: {}, harden: { combinesWith: ['optimize'] }, + onboard: { combinesWith: ['clarify', 'delight'] }, // System teach: {}, extract: {}, diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 1965a1f27..62234bfe1 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -394,8 +394,8 @@ const EXCLUDED_FROM_SUGGESTIONS = new Set([ // These are the commands that audit/critique/etc. reference when suggesting next steps. const IMPECCABLE_SUB_COMMANDS = [ 'adapt', 'animate', 'audit', 'bolder', 'clarify', 'colorize', - 'critique', 'delight', 'distill', 'harden', 'layout', 'optimize', - 'overdrive', 'polish', 'quieter', 'shape', 'typeset', + 'critique', 'delight', 'distill', 'harden', 'layout', 'onboard', + 'optimize', 'overdrive', 'polish', 'quieter', 'shape', 'typeset', ]; export function replacePlaceholders(content, provider, commandNames = [], allSkillNames = []) { diff --git a/source/skills/impeccable/SKILL.md b/source/skills/impeccable/SKILL.md index 2bd1bad97..fac01b414 100644 --- a/source/skills/impeccable/SKILL.md +++ b/source/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors/empty states, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." argument-hint: "[command] [target]" user-invocable: true allowed-tools: @@ -315,6 +315,7 @@ This skill supports sub-commands. Parse the first word of the argument string to > `{{command_prefix}}impeccable quieter [target]` - Tone down aggressive/overstimulating designs > `{{command_prefix}}impeccable distill [target]` - Strip to essence, remove complexity > `{{command_prefix}}impeccable harden [target]` - Production-ready: errors, i18n, edge cases +> `{{command_prefix}}impeccable onboard [target]` - Design first-run flows, empty states, activation > > **Enhance** > `{{command_prefix}}impeccable animate [target]` - Add purposeful animations and motion @@ -351,7 +352,8 @@ When a sub-command is matched, load the linked reference and follow its instruct | `bolder` | [bolder](reference/bolder.md) | Amplify safe or boring designs for more visual impact | | `quieter` | [quieter](reference/quieter.md) | Tone down visually aggressive or overstimulating designs | | `distill` | [distill](reference/distill.md) | Strip designs to their essence, remove unnecessary complexity | -| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, edge cases, onboarding | +| `harden` | [harden](reference/harden.md) | Production-ready: error handling, i18n, text overflow, edge cases | +| `onboard` | [onboard](reference/onboard.md) | Design onboarding flows, first-run experiences, and empty states that guide users to value | | `animate` | [animate](reference/animate.md) | Add purposeful animations and micro-interactions | | `colorize` | [colorize](reference/colorize.md) | Add strategic color to monochromatic interfaces | | `typeset` | [typeset](reference/typeset.md) | Improve typography: fonts, hierarchy, sizing, readability | diff --git a/source/skills/impeccable/reference/harden.md b/source/skills/impeccable/reference/harden.md index af8b8a703..a27c669a0 100644 --- a/source/skills/impeccable/reference/harden.md +++ b/source/skills/impeccable/reference/harden.md @@ -217,40 +217,6 @@ t('items', { count }) // Handles complex plural rules - Feature detection (not browser detection) - Test in target browsers -### Onboarding & First-Run Experience - -Production-ready features work for first-time users, not just power users. Design the paths that get new users to value: - -**Empty states**: Every zero-data screen needs: -- What will appear here (description or illustration) -- Why it matters to the user -- Clear CTA to create the first item or start from a template -- Visual interest (not just blank space with "No items yet") - -Empty state types to handle: -- **First use**: emphasize value, provide templates -- **User cleared**: light touch, easy to recreate -- **No results**: suggest a different query, offer to clear filters -- **No permissions**: explain why, how to get access - -**First-run experience**: Get users to their "aha moment" as quickly as possible. -- Show, don't tell -- working examples over descriptions -- Progressive disclosure -- teach one thing at a time, not everything upfront -- Make onboarding optional -- let experienced users skip -- Provide smart defaults so required setup is minimal - -**Feature discovery**: Teach features when users need them, not upfront. -- Contextual tooltips at point of use (brief, dismissable, one-time) -- Badges or indicators on new or unused features -- Celebrate activation events quietly (a toast, not a modal) - -**NEVER**: -- Force long onboarding before users can touch the product -- Show the same tooltip repeatedly (track and respect dismissals) -- Block the entire UI during a guided tour -- Create separate tutorial modes disconnected from the real product -- Design empty states that just say "No items" with no next action - ### Input Validation & Sanitization **Client-side validation**: diff --git a/source/skills/impeccable/reference/onboard.md b/source/skills/impeccable/reference/onboard.md new file mode 100644 index 000000000..257c7d0f0 --- /dev/null +++ b/source/skills/impeccable/reference/onboard.md @@ -0,0 +1,234 @@ +> **Additional context needed**: the "aha moment" you want users to reach, and users' experience level. + +Create or improve onboarding experiences that help users understand, adopt, and succeed with the product quickly. + +## Assess Onboarding Needs + +Understand what users need to learn and why: + +1. **Identify the challenge**: + - What are users trying to accomplish? + - What's confusing or unclear about current experience? + - Where do users get stuck or drop off? + - What's the "aha moment" we want users to reach? + +2. **Understand the users**: + - What's their experience level? (Beginners, power users, mixed?) + - What's their motivation? (Excited and exploring? Required by work?) + - What's their time commitment? (5 minutes? 30 minutes?) + - What alternatives do they know? (Coming from competitor? New to category?) + +3. **Define success**: + - What's the minimum users need to learn to be successful? + - What's the key action we want them to take? (First project? First invite?) + - How do we know onboarding worked? (Completion rate? Time to value?) + +**CRITICAL**: Onboarding should get users to value as quickly as possible, not teach everything possible. + +## Onboarding Principles + +Follow these core principles: + +### Show, Don't Tell +- Demonstrate with working examples, not just descriptions +- Provide real functionality in onboarding, not separate tutorial mode +- Use progressive disclosure, teach one thing at a time + +### Make It Optional (When Possible) +- Let experienced users skip onboarding +- Don't block access to product +- Provide "Skip" or "I'll explore on my own" options + +### Time to Value +- Get users to their "aha moment" ASAP +- Front-load most important concepts +- Teach 20% that delivers 80% of value +- Save advanced features for contextual discovery + +### Context Over Ceremony +- Teach features when users need them, not upfront +- Empty states are onboarding opportunities +- Tooltips and hints at point of use + +### Respect User Intelligence +- Don't patronize or over-explain +- Be concise and clear +- Assume users can figure out standard patterns + +## Design Onboarding Experiences + +Create appropriate onboarding for the context: + +### Initial Product Onboarding + +**Welcome Screen**: +- Clear value proposition (what is this product?) +- What users will learn/accomplish +- Time estimate (honest about commitment) +- Option to skip (for experienced users) + +**Account Setup**: +- Minimal required information (collect more later) +- Explain why you're asking for each piece of information +- Smart defaults where possible +- Social login when appropriate + +**Core Concept Introduction**: +- Introduce 1-3 core concepts (not everything) +- Use simple language and examples +- Interactive when possible (do, don't just read) +- Progress indication (step 1 of 3) + +**First Success**: +- Guide users to accomplish something real +- Pre-populated examples or templates +- Celebrate completion (but don't overdo it) +- Clear next steps + +### Feature Discovery & Adoption + +**Empty States**: +Instead of blank space, show: +- What will appear here (description + screenshot/illustration) +- Why it's valuable +- Clear CTA to create first item +- Example or template option + +Example: +``` +No projects yet +Projects help you organize your work and collaborate with your team. +[Create your first project] or [Start from template] +``` + +**Contextual Tooltips**: +- Appear at relevant moment (first time user sees feature) +- Point directly at relevant UI element +- Brief explanation + benefit +- Dismissable (with "Don't show again" option) +- Optional "Learn more" link + +**Feature Announcements**: +- Highlight new features when they're released +- Show what's new and why it matters +- Let users try immediately +- Dismissable + +**Progressive Onboarding**: +- Teach features when users encounter them +- Badges or indicators on new/unused features +- Unlock complexity gradually (don't show all options immediately) + +### Guided Tours & Walkthroughs + +**When to use**: +- Complex interfaces with many features +- Significant changes to existing product +- Industry-specific tools needing domain knowledge + +**How to design**: +- Spotlight specific UI elements (dim rest of page) +- Keep steps short (3-7 steps max per tour) +- Allow users to click through tour freely +- Include "Skip tour" option +- Make replayable (help menu) + +**Best practices**: +- Interactive over passive (let users click real buttons) +- Focus on workflow, not features ("Create a project" not "This is the project button") +- Provide sample data so actions work + +### Interactive Tutorials + +**When to use**: +- Users need hands-on practice +- Concepts are complex or unfamiliar +- High stakes (better to practice in safe environment) + +**How to design**: +- Sandbox environment with sample data +- Clear objectives ("Create a chart showing sales by region") +- Step-by-step guidance +- Validation (confirm they did it right) +- Graduation moment (you're ready!) + +### Documentation & Help + +**In-product help**: +- Contextual help links throughout interface +- Keyboard shortcut reference +- Search-able help center +- Video tutorials for complex workflows + +**Help patterns**: +- `?` icon near complex features +- "Learn more" links in tooltips +- Keyboard shortcut hints (`⌘K` shown on search box) + +## Empty State Design + +Every empty state needs: + +### What Will Be Here +"Your recent projects will appear here" + +### Why It Matters +"Projects help you organize your work and collaborate with your team" + +### How to Get Started +[Create project] or [Import from template] + +### Visual Interest +Illustration or icon (not just text on blank page) + +### Contextual Help +"Need help getting started? [Watch 2-min tutorial]" + +**Empty state types**: +- **First use**: Never used this feature (emphasize value, provide template) +- **User cleared**: Intentionally deleted everything (light touch, easy to recreate) +- **No results**: Search or filter returned nothing (suggest different query, clear filters) +- **No permissions**: Can't access (explain why, how to get access) +- **Error state**: Failed to load (explain what happened, retry option) + +## Implementation Patterns + +### Technical approaches: + +**Tooltip libraries**: Tippy.js, Popper.js +**Tour libraries**: Intro.js, Shepherd.js, React Joyride +**Modal patterns**: Focus trap, backdrop, ESC to close +**Progress tracking**: LocalStorage for "seen" states +**Analytics**: Track completion, drop-off points + +**Storage patterns**: +```javascript +// Track which onboarding steps user has seen +localStorage.setItem('onboarding-completed', 'true'); +localStorage.setItem('feature-tooltip-seen-reports', 'true'); +``` + +**IMPORTANT**: Don't show same onboarding twice (annoying). Track completion and respect dismissals. + +**NEVER**: +- Force users through long onboarding before they can use product +- Patronize users with obvious explanations +- Show same tooltip repeatedly (respect dismissals) +- Block all UI during tour (let users explore) +- Create separate tutorial mode disconnected from real product +- Overwhelm with information upfront (progressive disclosure!) +- Hide "Skip" or make it hard to find +- Forget about returning users (don't show initial onboarding again) + +## Verify Onboarding Quality + +Test with real users: + +- **Time to completion**: Can users complete onboarding quickly? +- **Comprehension**: Do users understand after completing? +- **Action**: Do users take desired next step? +- **Skip rate**: Are too many users skipping? (Maybe it's too long or not valuable) +- **Completion rate**: Are users completing? (If low, simplify) +- **Time to value**: How long until users get first value? + +Remember: You're a product educator with excellent teaching instincts. Get users to their "aha moment" as quickly as possible. Teach the essential, make it contextual, respect user time and intelligence. diff --git a/source/skills/impeccable/scripts/command-metadata.json b/source/skills/impeccable/scripts/command-metadata.json index 38806f3f5..687db0bdb 100644 --- a/source/skills/impeccable/scripts/command-metadata.json +++ b/source/skills/impeccable/scripts/command-metadata.json @@ -48,7 +48,11 @@ "argumentHint": "[target]" }, "harden": { - "description": "Make interfaces production-ready: error handling, empty states, onboarding flows, i18n, text overflow, and edge case management. Use when the user asks to harden, make production-ready, handle edge cases, add error states, design empty states, improve onboarding, or fix overflow and i18n issues.", + "description": "Make interfaces production-ready: error handling, i18n, text overflow, edge case management, and resilience under real-world data. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.", + "argumentHint": "[target]" + }, + "onboard": { + "description": "Design onboarding flows, first-run experiences, and empty states that guide new users to value. Covers welcome screens, account setup, progressive disclosure, contextual tooltips, feature announcements, and activation moments. Use when the user mentions onboarding, first-time users, empty states, activation, getting started, new user flows, or the aha moment.", "argumentHint": "[target]" }, "layout": { diff --git a/source/skills/impeccable/scripts/pin.mjs b/source/skills/impeccable/scripts/pin.mjs index 2abfc6050..28dedb882 100644 --- a/source/skills/impeccable/scripts/pin.mjs +++ b/source/skills/impeccable/scripts/pin.mjs @@ -29,7 +29,7 @@ const HARNESS_DIRS = [ const VALID_COMMANDS = [ 'craft', 'teach', 'extract', 'shape', 'critique', 'audit', - 'polish', 'bolder', 'quieter', 'distill', 'harden', + 'polish', 'bolder', 'quieter', 'distill', 'harden', 'onboard', 'animate', 'colorize', 'typeset', 'layout', 'delight', 'overdrive', 'clarify', 'adapt', 'optimize', ]; From bb94dadda07a0d2859e12b06d02444898f4913f5 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Sun, 12 Apr 2026 17:13:53 -0700 Subject: [PATCH 007/125] Add live variant mode: element picker, action panel, poll/reply bridge (22 commands) New feature: /impeccable live starts an interactive visual iteration server. Users select elements in the browser, pick a design action (bolder, quieter, etc.), and the agent generates HTML+CSS variants written directly to source. The dev server's HMR hot-swaps them in, and MutationObserver progressively reveals each variant in a cycler UI as it arrives. Architecture: - src/live/server.mjs: HTTP + WebSocket server with session token auth, long-poll /poll endpoint for the agent, WebSocket for the browser - src/live/poll.mjs: CLI client (npx impeccable poll / poll --reply) - src/live/browser.js: element picker with keyboard nav (arrows=siblings, shift+arrows=parent/child), action panel (12 commands, freeform input, variant count), variant cycler with progressive reveal via MutationObserver - src/live/protocol.mjs: shared message types and event validation - source/skills/impeccable/reference/live.md: agent loop instructions (inject script, poll loop, generate variants, accept/discard, cleanup) CLI changes: - bin/cli.js: added "poll" top-level command - src/detect-antipatterns.mjs: liveCli() now delegates to src/live/server.mjs - package.json: added ws dependency Registered /impeccable live as command #22 across all standard locations. Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/SKILL.md | 6 +- .agents/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .agents/skills/impeccable/scripts/pin.mjs | 2 +- .claude-plugin/marketplace.json | 4 +- .claude-plugin/plugin.json | 2 +- .claude/skills/impeccable/SKILL.md | 6 +- .claude/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .claude/skills/impeccable/scripts/pin.mjs | 2 +- .codex/skills/impeccable/SKILL.md | 6 +- .codex/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .codex/skills/impeccable/scripts/pin.mjs | 2 +- .cursor/skills/impeccable/SKILL.md | 6 +- .cursor/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .cursor/skills/impeccable/scripts/pin.mjs | 2 +- .gemini/skills/impeccable/SKILL.md | 6 +- .gemini/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .gemini/skills/impeccable/scripts/pin.mjs | 2 +- .kiro/skills/impeccable/SKILL.md | 6 +- .kiro/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .kiro/skills/impeccable/scripts/pin.mjs | 2 +- .opencode/skills/impeccable/SKILL.md | 6 +- .opencode/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .opencode/skills/impeccable/scripts/pin.mjs | 2 +- .pi/skills/impeccable/SKILL.md | 6 +- .pi/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .pi/skills/impeccable/scripts/pin.mjs | 2 +- .rovodev/skills/impeccable/SKILL.md | 6 +- .rovodev/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .rovodev/skills/impeccable/scripts/pin.mjs | 2 +- .trae-cn/skills/impeccable/SKILL.md | 6 +- .trae-cn/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .trae-cn/skills/impeccable/scripts/pin.mjs | 2 +- .trae/skills/impeccable/SKILL.md | 6 +- .trae/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + .trae/skills/impeccable/scripts/pin.mjs | 2 +- CLAUDE.md | 2 +- NOTICE.md | 2 +- README.md | 7 +- bin/cli.js | 8 +- package.json | 3 +- public/index.html | 22 +- public/js/components/framework-viz.js | 5 +- public/js/data.js | 9 +- public/js/generated/counts.js | 2 +- public/sitemap.xml | 3 +- scripts/build-sub-pages.js | 2 +- scripts/lib/sub-pages-data.js | 2 + source/skills/impeccable/SKILL.md | 6 +- source/skills/impeccable/reference/live.md | 198 ++++ .../impeccable/scripts/command-metadata.json | 4 + source/skills/impeccable/scripts/pin.mjs | 2 +- src/detect-antipatterns.mjs | 113 +-- src/live/browser.js | 931 ++++++++++++++++++ src/live/poll.mjs | 119 +++ src/live/protocol.mjs | 79 ++ src/live/server.mjs | 465 +++++++++ 67 files changed, 4136 insertions(+), 164 deletions(-) create mode 100644 .agents/skills/impeccable/reference/live.md create mode 100644 .claude/skills/impeccable/reference/live.md create mode 100644 .codex/skills/impeccable/reference/live.md create mode 100644 .cursor/skills/impeccable/reference/live.md create mode 100644 .gemini/skills/impeccable/reference/live.md create mode 100644 .kiro/skills/impeccable/reference/live.md create mode 100644 .opencode/skills/impeccable/reference/live.md create mode 100644 .pi/skills/impeccable/reference/live.md create mode 100644 .rovodev/skills/impeccable/reference/live.md create mode 100644 .trae-cn/skills/impeccable/reference/live.md create mode 100644 .trae/skills/impeccable/reference/live.md create mode 100644 source/skills/impeccable/reference/live.md create mode 100644 src/live/browser.js create mode 100644 src/live/poll.mjs create mode 100644 src/live/protocol.mjs create mode 100644 src/live/server.mjs diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index eb0ba0589..b9e85282a 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -1,6 +1,6 @@ --- name: impeccable -description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, or push boundaries with shaders/physics/scroll effects. Commands: craft, teach, extract, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." +description: "Design fluency for frontend interfaces. Build distinctive, production-grade web components, pages, artifacts, posters, and applications with high design quality. Also handles: critique/review/evaluate designs, audit accessibility/performance/responsive, polish finishing touches, improve typography/fonts/readability, fix layout/spacing/hierarchy, add animation/transitions/motion, adapt for mobile/tablet/responsive, simplify/declutter/distill, amplify bland/generic/safe designs, tone down loud/overwhelming designs, add color to gray/monochromatic interfaces, improve UX copy/labels/error messages, harden for production with edge cases/i18n/errors, design onboarding/first-run/empty states/activation flows, optimize slow/laggy performance, plan UX before coding, extract design tokens, push boundaries with shaders/physics/scroll effects, or visually iterate on elements in the browser with live variant mode. Commands: craft, teach, extract, live, pin, audit, critique, polish, shape, adapt, animate, bolder, quieter, colorize, clarify, delight, distill, harden, onboard, layout, optimize, overdrive, typeset." version: 3.0.0 user-invocable: true argument-hint: "[command] [target]" @@ -329,6 +329,9 @@ This skill supports sub-commands. Parse the first word of the argument string to > `/impeccable adapt [target]` - Adapt for different devices and screen sizes > `/impeccable optimize [target]` - Diagnose and fix UI performance > +> **Iterate** +> `/impeccable live` - Visual variant mode: pick elements in the browser, generate alternatives +> > **Manage** > `/impeccable pin ` - Create a standalone shortcut (e.g., pin audit creates /audit) > `/impeccable unpin ` - Remove a pinned shortcut @@ -362,6 +365,7 @@ When a sub-command is matched, load the linked reference and follow its instruct | `clarify` | [clarify](reference/clarify.md) | Improve UX copy, labels, error messages, and microcopy | | `adapt` | [adapt](reference/adapt.md) | Adapt designs across screen sizes, devices, and platforms | | `optimize` | [optimize](reference/optimize.md) | Diagnose and fix UI performance issues | +| `live` | [live](reference/live.md) | Interactive visual variant mode: pick elements, generate alternatives in the browser | --- diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md new file mode 100644 index 000000000..30b5076ca --- /dev/null +++ b/.agents/skills/impeccable/reference/live.md @@ -0,0 +1,198 @@ +Launch interactive live variant mode: select elements in the browser, pick a design action, and get AI-generated HTML+CSS variants hot-swapped via the dev server's HMR. + +## Prerequisites + +- A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser +- The impeccable CLI installed (`npm i -g impeccable`) + +## Start the Server + +1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. +2. Start the live variant server: + ```bash + npx impeccable live & + ``` +3. Note the **port** and **token** printed to stdout. + +## Inject the Browser Script + +Find the project's main HTML entry point. This varies by framework: + +| Framework | Typical file | +|-----------|-------------| +| Plain HTML | `index.html` | +| Vite / React | `index.html` (project root) | +| Next.js (App Router) | `app/layout.tsx` (add a ` + +``` + +**JSX / TSX (React, Next.js):** +```jsx +{/* impeccable-live-start */} + +{/* impeccable-live-end */} +``` + +Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. + +If browser automation tools are available, also navigate to the page so the user can see it. + +## Enter the Poll Loop + +Run a blocking poll loop. On each iteration, wait for a browser event and respond: + +``` +LOOP: + Run: npx impeccable poll + Read the JSON output. Dispatch based on the "type" field: + + TYPE "generate": + → See "Handle Generate" below + + TYPE "accept": + → See "Handle Accept" below + + TYPE "discard": + → See "Handle Discard" below + + TYPE "exit": + → Break the loop + + TYPE "timeout": + → Continue (re-poll) + +END LOOP +``` + +## Handle Generate + +The event contains: `{id, action, freeformPrompt, count, element}`. + +### Step 1: Find the source file + +Use `element.tagName`, `element.id`, `element.classes`, `element.textContent`, and `element.outerHTML` to locate the element in the project source. Search for matching markup across the codebase. + +### Step 2: Create the variant wrapper + +Wrap the original element in a variant container. Use the comment syntax appropriate for the framework: + +**HTML / Vue / Svelte:** +```html + +
    +
    + +
    +
    + +``` + +**JSX / TSX:** +```jsx +{/* impeccable-variants-start SESSION_ID */} +
    +
    + {/* move the original element here */} +
    +
    +{/* impeccable-variants-end SESSION_ID */} +``` + +Replace SESSION_ID with `event.id` and COUNT with `event.count`. + +`display: contents` makes the wrapper layout-transparent, preserving the original element's relationship with its parent (flex/grid child, etc.). + +### Step 3: Generate variants one by one + +For each variant (1 through COUNT): + +1. **Load the design command's reference file.** If `event.action` is "bolder", load `reference/bolder.md`. If "impeccable" (the default), use the main design principles from this skill without loading a sub-command reference. + +2. **Generate a complete replacement** for the original element. Each variant is a full HTML+CSS rewrite, not a patch. Consider the element's context (computed styles, parent structure, CSS custom properties from `event.element`). + +3. **Diversify across variants.** Each variant should take a distinctly different approach. For "bolder", one might focus on type weight, another on color saturation, another on spatial scale, another on structural change. Do NOT generate 4 variations on the same idea. + +4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. + +5. **Write the variant** into the wrapper in the source file: + ```html +
    + +
    + ``` + The first variant should NOT have `style="display: none"` (it should be visible by default). + +6. **Write scoped CSS** if the variant needs styles beyond inline: + ```css + /* impeccable-variants-css-start SESSION_ID */ + @scope ([data-impeccable-variant="N"]) { + :scope { /* styles for the variant root */ } + .child-class { /* styles for children */ } + } + /* impeccable-variants-css-end SESSION_ID */ + ``` + Place the CSS in a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit.
    ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing
    of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.agents/skills/impeccable/scripts/live-poll.mjs b/.agents/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.agents/skills/impeccable/scripts/live-poll.mjs +++ b/.agents/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.agents/skills/impeccable/scripts/live-server.mjs b/.agents/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.agents/skills/impeccable/scripts/live-server.mjs +++ b/.agents/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.claude/skills/impeccable/reference/live.md b/.claude/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.claude/skills/impeccable/reference/live.md +++ b/.claude/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit.
    ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing
    of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.claude/skills/impeccable/scripts/live-poll.mjs b/.claude/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.claude/skills/impeccable/scripts/live-poll.mjs +++ b/.claude/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.claude/skills/impeccable/scripts/live-server.mjs b/.claude/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.claude/skills/impeccable/scripts/live-server.mjs +++ b/.claude/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.cursor/skills/impeccable/reference/live.md b/.cursor/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.cursor/skills/impeccable/reference/live.md +++ b/.cursor/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.cursor/skills/impeccable/scripts/live-poll.mjs b/.cursor/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.cursor/skills/impeccable/scripts/live-poll.mjs +++ b/.cursor/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.cursor/skills/impeccable/scripts/live-server.mjs b/.cursor/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.cursor/skills/impeccable/scripts/live-server.mjs +++ b/.cursor/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.gemini/skills/impeccable/reference/live.md b/.gemini/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.gemini/skills/impeccable/reference/live.md +++ b/.gemini/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.gemini/skills/impeccable/scripts/live-poll.mjs b/.gemini/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.gemini/skills/impeccable/scripts/live-poll.mjs +++ b/.gemini/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.gemini/skills/impeccable/scripts/live-server.mjs b/.gemini/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.gemini/skills/impeccable/scripts/live-server.mjs +++ b/.gemini/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.github/skills/impeccable/reference/live.md b/.github/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.github/skills/impeccable/reference/live.md +++ b/.github/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.github/skills/impeccable/scripts/live-poll.mjs b/.github/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.github/skills/impeccable/scripts/live-poll.mjs +++ b/.github/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.github/skills/impeccable/scripts/live-server.mjs b/.github/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.github/skills/impeccable/scripts/live-server.mjs +++ b/.github/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.kiro/skills/impeccable/reference/live.md b/.kiro/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.kiro/skills/impeccable/reference/live.md +++ b/.kiro/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.kiro/skills/impeccable/scripts/live-poll.mjs b/.kiro/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.kiro/skills/impeccable/scripts/live-poll.mjs +++ b/.kiro/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.kiro/skills/impeccable/scripts/live-server.mjs b/.kiro/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.kiro/skills/impeccable/scripts/live-server.mjs +++ b/.kiro/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.opencode/skills/impeccable/reference/live.md b/.opencode/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.opencode/skills/impeccable/reference/live.md +++ b/.opencode/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.opencode/skills/impeccable/scripts/live-poll.mjs b/.opencode/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.opencode/skills/impeccable/scripts/live-poll.mjs +++ b/.opencode/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.opencode/skills/impeccable/scripts/live-server.mjs b/.opencode/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.opencode/skills/impeccable/scripts/live-server.mjs +++ b/.opencode/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.pi/skills/impeccable/reference/live.md b/.pi/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.pi/skills/impeccable/reference/live.md +++ b/.pi/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.pi/skills/impeccable/scripts/live-poll.mjs b/.pi/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.pi/skills/impeccable/scripts/live-poll.mjs +++ b/.pi/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.pi/skills/impeccable/scripts/live-server.mjs b/.pi/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.pi/skills/impeccable/scripts/live-server.mjs +++ b/.pi/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.rovodev/skills/impeccable/reference/live.md b/.rovodev/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.rovodev/skills/impeccable/reference/live.md +++ b/.rovodev/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.rovodev/skills/impeccable/scripts/live-poll.mjs b/.rovodev/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.rovodev/skills/impeccable/scripts/live-poll.mjs +++ b/.rovodev/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.rovodev/skills/impeccable/scripts/live-server.mjs b/.rovodev/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.rovodev/skills/impeccable/scripts/live-server.mjs +++ b/.rovodev/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.trae-cn/skills/impeccable/reference/live.md b/.trae-cn/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.trae-cn/skills/impeccable/reference/live.md +++ b/.trae-cn/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.trae-cn/skills/impeccable/scripts/live-poll.mjs b/.trae-cn/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.trae-cn/skills/impeccable/scripts/live-poll.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.trae-cn/skills/impeccable/scripts/live-server.mjs b/.trae-cn/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.trae-cn/skills/impeccable/scripts/live-server.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/.trae/skills/impeccable/reference/live.md b/.trae/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/.trae/skills/impeccable/reference/live.md +++ b/.trae/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit. ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/.trae/skills/impeccable/scripts/live-poll.mjs b/.trae/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/.trae/skills/impeccable/scripts/live-poll.mjs +++ b/.trae/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/.trae/skills/impeccable/scripts/live-server.mjs b/.trae/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/.trae/skills/impeccable/scripts/live-server.mjs +++ b/.trae/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); diff --git a/public/index.html b/public/index.html index d6232e573..b8ee0f9c6 100644 --- a/public/index.html +++ b/public/index.html @@ -40,6 +40,7 @@ + @@ -85,40 +86,40 @@
    -

    Impeccable

    -

    Design fluency for AI harnesses

    +

    Impeccable

    +

    Design fluency for AI harnesses

    -

    Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 22 commands to steer the result.

    -

    Impeccable teaches your AI real design and gives you 22 commands to steer the result.

    +

    Great design prompts require design vocabulary. Most people don't have it. Impeccable teaches your AI deep design knowledge and gives you 22 commands to steer the result.

    +

    Impeccable teaches your AI real design and gives you 22 commands to steer the result.

    -
    - What's included -
    - Impeccable agent skill with 22 design commands - · - Optional CLI + Chrome extension -
    -
    +
    + What's included +
    + Impeccable agent skill with 22 design commands + · + Optional CLI + Chrome extension +
    +
    -
    - Get Started -
    - Works with -
    - Cursor - Claude Code - Gemini CLI - Codex CLI - VS Code Copilot - Antigravity - Kiro - OpenCode - Pi -
    -
    -
    -

    v3.0: 1 skill, 22 commands

    -
    +
    + Get Started +
    + Works with +
    + Cursor + Claude Code + Gemini CLI + Codex CLI + VS Code Copilot + Antigravity + Kiro + OpenCode + Pi +
    +
    +
    +

    v3.0: 1 skill, 22 commands

    +
    @@ -206,7 +207,7 @@

    22 commands form a shared vocabulary between you and your AI. Each one encodes a specific design discipline, so you can steer with precision.

    - +
    @@ -755,5 +756,6 @@ + diff --git a/source/skills/impeccable/reference/live.md b/source/skills/impeccable/reference/live.md index 049404911..a6a449cbe 100644 --- a/source/skills/impeccable/reference/live.md +++ b/source/skills/impeccable/reference/live.md @@ -7,13 +7,11 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Start the Server 1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server and read its connection info: +2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: ```bash - node {{scripts_path}}/live-server.mjs & - sleep 2 - cat .impeccable-live.json + node {{scripts_path}}/live-server.mjs --background ``` - The JSON contains `port` and `token`. Use the port for the script tag below. + The output JSON contains `port` and `token`. Use the port for the script tag below. ## Inject the Browser Script @@ -108,10 +106,14 @@ If `wrap` fails, fall back to manual grep + edit. 4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. -5. **Write all variants in a single file edit** at the insert line reported by `wrap`. Use the comment syntax from the `wrap` output: +5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a `
    @@ -123,17 +125,9 @@ If `wrap` fails, fall back to manual grep + edit.
    ``` -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. +The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `'); + replacement.push(indent + commentSyntax.open + ' impeccable-carbonize-end ' + id + ' ' + commentSyntax.close); + } + + replacement.push(...restored); + + const newLines = [ + ...lines.slice(0, block.start), + ...replacement, + ...lines.slice(block.end + 1), + ]; + fs.writeFileSync(targetFile, newLines.join('\n'), 'utf-8'); + + return { carbonize: needsCarbonize }; +} + +// --------------------------------------------------------------------------- +// Parsing helpers +// --------------------------------------------------------------------------- + +/** + * Find the start/end marker lines for a session. + * Returns { start, end } (0-indexed line numbers) or null. + */ +function findMarkerBlock(id, lines) { + let start = -1; + let end = -1; + const startPattern = 'impeccable-variants-start ' + id; + const endPattern = 'impeccable-variants-end ' + id; + + for (let i = 0; i < lines.length; i++) { + if (start === -1 && lines[i].includes(startPattern)) start = i; + if (lines[i].includes(endPattern)) { end = i; break; } + } + + return (start !== -1 && end !== -1) ? { start, end } : null; +} + +/** + * Extract the original element content from within the variant wrapper. + * Returns an array of lines (still indented as stored in the wrapper). + */ +function extractOriginal(lines, block) { + let inOriginal = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { + inOriginal = true; + depth = 1; + continue; // skip the opening
    + } + + if (inOriginal) { + // Count div opens/closes to find the matching
    + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // this is the closing of the original wrapper + content.push(line); + } + } + + return content; +} + +/** + * Extract a specific variant's inner content (stripping the wrapper div). + * Returns an array of lines, or null if not found. + */ +function extractVariant(lines, block, variantNum) { + let inVariant = false; + let depth = 0; + const content = []; + + for (let i = block.start; i <= block.end; i++) { + const line = lines[i]; + + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { + inVariant = true; + depth = 1; + continue; // skip the opening
    + } + + if (inVariant) { + const opens = (line.match(/]/g) || []).length; + const closes = (line.match(/<\/div\s*>/g) || []).length; + depth += opens - closes; + + if (depth <= 0) break; // closing
    of the variant wrapper + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * Extract the colocated ')) break; + content.push(line); + } + } + + return content.length > 0 ? content : null; +} + +/** + * De-indent content that was indented by live-wrap.mjs. + * The wrap script adds `indent + ' '` (4 extra spaces) to each line. + * We restore to just `indent` level. + */ +function deindentContent(contentLines, baseIndent) { + // Find the minimum indentation in the content to determine how much was added + let minIndent = Infinity; + for (const line of contentLines) { + if (line.trim() === '') continue; + const leadingSpaces = line.match(/^(\s*)/)[1].length; + minIndent = Math.min(minIndent, leadingSpaces); + } + if (minIndent === Infinity) minIndent = 0; + + // Strip the extra indentation and re-add base indent + return contentLines.map(line => { + if (line.trim() === '') return ''; + return baseIndent + line.slice(minIndent); + }); +} + +function detectCommentSyntax(filePath) { + const ext = path.extname(filePath).toLowerCase(); + if (ext === '.jsx' || ext === '.tsx') { + return { open: '{/*', close: '*/}' }; + } + return { open: '' }; +} + +// --------------------------------------------------------------------------- +// File search (find the file containing session markers) +// --------------------------------------------------------------------------- + +function findSessionFile(id, cwd) { + const marker = 'impeccable-variants-start ' + id; + const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; + const seen = new Set(); + + for (const dir of searchDirs) { + const absDir = path.join(cwd, dir); + if (!fs.existsSync(absDir)) continue; + const result = searchDir(absDir, marker, seen, 0); + if (result) { + const content = fs.readFileSync(result, 'utf-8'); + return { file: result, content, lines: content.split('\n') }; + } + } + return null; +} + +function searchDir(dir, query, seen, depth) { + if (depth > 5) return null; + let realDir; + try { realDir = fs.realpathSync(dir); } catch { return null; } + if (seen.has(realDir)) return null; + seen.add(realDir); + + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return null; } + + for (const entry of entries) { + if (!entry.isFile()) continue; + if (!EXTENSIONS.includes(path.extname(entry.name).toLowerCase())) continue; + const filePath = path.join(dir, entry.name); + try { + const content = fs.readFileSync(filePath, 'utf-8'); + if (content.includes(query)) return filePath; + } catch { /* skip */ } + } + + for (const entry of entries) { + if (!entry.isDirectory()) continue; + if (['node_modules', '.git', 'dist', 'build'].includes(entry.name)) continue; + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + if (result) return result; + } + + return null; +} + +// --------------------------------------------------------------------------- +// Utilities +// --------------------------------------------------------------------------- + +function argVal(args, flag) { + const idx = args.indexOf(flag); + return idx !== -1 && idx + 1 < args.length ? args[idx + 1] : null; +} + +// Auto-execute when run directly +const _running = process.argv[1]; +if (_running?.endsWith('live-accept.mjs') || _running?.endsWith('live-accept.mjs/')) { + acceptCli(); +} + +export { findMarkerBlock, extractOriginal, extractVariant, extractCss, deindentContent, detectCommentSyntax }; diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 6297eccfc..75bb26d94 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -894,29 +894,16 @@ if (state === 'IDLE') state = 'PICKING'; break; case 'done': - if (state === 'SAVING') { - state = 'CONFIRMED'; - updateBarContent('confirmed'); - setTimeout(() => { - hideBar(); - hideHighlight(); - stopScrollTracking(); - if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } - clearSession(); - selectedElement = null; - currentSessionId = null; - selectedAction = 'impeccable'; - state = 'PICKING'; - }, 1800); - return; - } + // Generate completion: handle no-HMR fallback if (arrivedVariants === 0 && expectedVariants > 0 && msg.file) { console.log('[impeccable] No HMR detected. Fetching variants from source file...'); injectVariantsFromSource(msg.file, currentSessionId); return; } - state = 'CYCLING'; - updateBarContent('cycling'); + if (state === 'GENERATING') { + state = 'CYCLING'; + updateBarContent('cycling'); + } break; case 'error': console.error('[impeccable] Error:', msg.message); @@ -1074,16 +1061,37 @@ if (!currentSessionId || arrivedVariants === 0) return; sendEvent({ type: 'accept', id: currentSessionId, variantId: String(visibleVariant) }); markSessionHandled(); - state = 'SAVING'; - updateBarContent('saving'); - // Don't cleanup yet — wait for the "done" WS message to show confirmation + + // Instantly commit the accepted variant in the DOM (fire-and-forget) + var wrapper = document.querySelector('[data-impeccable-variants="' + currentSessionId + '"]'); + if (wrapper) { + var accepted = wrapper.querySelector('[data-impeccable-variant="' + visibleVariant + '"]'); + if (accepted && accepted.firstElementChild) { + var parent = wrapper.parentElement; + if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + } + } + + state = 'CONFIRMED'; + updateBarContent('confirmed'); + setTimeout(function() { + hideBar(); + hideHighlight(); + stopScrollTracking(); + if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } + clearSession(); + selectedElement = null; + currentSessionId = null; + selectedAction = 'impeccable'; + state = 'PICKING'; + }, 1800); } function handleDiscard() { if (!currentSessionId) return; sendEvent({ type: 'discard', id: currentSessionId }); markSessionHandled(); - // Discard dismisses immediately (no "Applying" state, the agent just cleans up) + // Instant DOM restore + fire-and-forget (script handles file cleanup) cleanup(); } diff --git a/source/skills/impeccable/scripts/live-poll.mjs b/source/skills/impeccable/scripts/live-poll.mjs index f868f1e43..b176d9f05 100644 --- a/source/skills/impeccable/scripts/live-poll.mjs +++ b/source/skills/impeccable/scripts/live-poll.mjs @@ -8,9 +8,11 @@ * npx impeccable poll --reply error "msg" # Reply with error */ +import { execSync } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; +import { fileURLToPath } from 'node:url'; const LIVE_PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); @@ -110,6 +112,25 @@ Options: } const event = await res.json(); + + // Auto-handle accept/discard via deterministic script + if (event.type === 'accept' || event.type === 'discard') { + const __dirname = path.dirname(fileURLToPath(import.meta.url)); + const acceptScript = path.join(__dirname, 'live-accept.mjs'); + const scriptArgs = event.type === 'discard' + ? ['--id', event.id, '--discard'] + : ['--id', event.id, '--variant', event.variantId]; + try { + const out = execSync( + `node "${acceptScript}" ${scriptArgs.join(' ')}`, + { encoding: 'utf-8', cwd: process.cwd(), timeout: 30_000 } + ); + event._acceptResult = JSON.parse(out.trim()); + } catch (err) { + event._acceptResult = { handled: false, error: err.message }; + } + } + // Print the event as JSON — the agent reads this from stdout console.log(JSON.stringify(event)); } catch (err) { diff --git a/source/skills/impeccable/scripts/live-server.mjs b/source/skills/impeccable/scripts/live-server.mjs index 998651d85..9fc581257 100644 --- a/source/skills/impeccable/scripts/live-server.mjs +++ b/source/skills/impeccable/scripts/live-server.mjs @@ -14,6 +14,7 @@ import http from 'node:http'; import { randomUUID } from 'node:crypto'; +import { spawn } from 'node:child_process'; import fs from 'node:fs'; import path from 'node:path'; import os from 'node:os'; @@ -364,10 +365,11 @@ if (args.includes('--help') || args.includes('-h')) { Start the live variant mode server (zero dependencies). Commands: - (default) Start the server + (default) Start the server (foreground) stop Stop a running server Options: + --background Start detached, print connection JSON to stdout, then exit --port=PORT Use a specific port (default: auto-detect starting at 8400) --help Show this help @@ -390,6 +392,35 @@ if (args.includes('stop')) { process.exit(0); } +// --background: spawn a detached child server, wait for it to be ready, +// print the connection JSON, then exit. This keeps the startup command +// simple (no shell backgrounding or chained commands). +if (args.includes('--background')) { + const childArgs = args.filter(a => a !== '--background'); + const child = spawn(process.execPath, [fileURLToPath(import.meta.url), ...childArgs], { + detached: true, + stdio: 'ignore', + cwd: process.cwd(), + }); + child.unref(); + + // Poll for the PID file (the child writes it once the HTTP server is listening). + const deadline = Date.now() + 10_000; + while (Date.now() < deadline) { + try { + const info = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); + if (info.pid !== process.pid) { + // Output JSON so the agent can read port + token from stdout. + console.log(JSON.stringify(info)); + process.exit(0); + } + } catch { /* not ready yet */ } + await new Promise(r => setTimeout(r, 200)); + } + console.error('Timed out waiting for live server to start.'); + process.exit(1); +} + // Check for existing session try { const existing = JSON.parse(fs.readFileSync(LIVE_PID_FILE, 'utf-8')); From 5fee3148be291e244608e881413056d078fc0584 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 16:14:51 -0700 Subject: [PATCH 027/125] Fix section-nav using wrong positions for nested sections The changelog and FAQ sections are inside a positioned .changelog-faq-row wrapper, so their offsetTop was 0 (relative to parent) instead of their actual document position. This broke current-section detection and caused both pills to appear permanently active. Use getBoundingClientRect() instead, which returns correct absolute positions regardless of nesting. Co-Authored-By: Claude Opus 4.6 (1M context) --- public/js/components/section-nav.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/public/js/components/section-nav.js b/public/js/components/section-nav.js index e34039387..0c182f6ff 100644 --- a/public/js/components/section-nav.js +++ b/public/js/components/section-nav.js @@ -17,10 +17,16 @@ export function initSectionNav() { let ticking = false; + // Returns the element's top position relative to the document, + // which works even when the element is inside a positioned parent. + function docTop(el) { + return el.getBoundingClientRect().top + window.scrollY; + } + function updateNav() { const scrollY = window.scrollY; const heroBottom = hero.offsetTop + hero.offsetHeight - 100; - const footerTop = footer ? footer.offsetTop : Infinity; + const footerTop = footer ? docTop(footer) : Infinity; const viewportBottom = scrollY + window.innerHeight; // Show nav after hero, hide when footer is visible @@ -36,7 +42,7 @@ export function initSectionNav() { for (let i = sectionIds.length - 1; i >= 0; i--) { const section = document.getElementById(sectionIds[i]); - if (section && section.offsetTop <= viewportMiddle) { + if (section && docTop(section) <= viewportMiddle) { currentSection = sectionIds[i]; break; } @@ -47,10 +53,10 @@ export function initSectionNav() { const activeSections = new Set(); if (currentSection) { const currentEl = document.getElementById(currentSection); - const currentTop = currentEl?.offsetTop ?? 0; + const currentTop = currentEl ? docTop(currentEl) : 0; sectionIds.forEach(id => { const el = document.getElementById(id); - if (el && Math.abs(el.offsetTop - currentTop) < 4) { + if (el && Math.abs(docTop(el) - currentTop) < 4) { activeSections.add(id); } }); From f397b9f1230996d6fece5cfa6daddb3995c680cf Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 16:31:03 -0700 Subject: [PATCH 028/125] Fix keyboard nav and click-to-deselect in live mode picker - Arrow keys now pass through to element picker when the freeform input is empty, instead of being swallowed by stopPropagation - Arrow nav works in both PICKING and CONFIGURING states, so you can change your element selection while the config bar is open - Clicking outside the selected element and bar returns to PICKING mode, matching the expected deselect behavior Co-Authored-By: Claude Opus 4.6 (1M context) --- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .pi/skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- .../skills/impeccable/scripts/live-browser.js | 38 ++++++++++++++----- 12 files changed, 348 insertions(+), 108 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 75bb26d94..59e92d239 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -342,9 +342,11 @@ input.style.background = 'transparent'; }); input.addEventListener('keydown', (e) => { - e.stopPropagation(); // Don't trigger element picker keyboard nav - if (e.key === 'Enter') { e.preventDefault(); handleGo(); } - if (e.key === 'Escape') { e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; } + if (e.key === 'Enter') { e.stopPropagation(); e.preventDefault(); handleGo(); return; } + if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); input.blur(); hideBar(); state = 'PICKING'; return; } + // Let arrow keys pass through to the element picker when the input is empty + if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && !input.value) return; + e.stopPropagation(); }); row.appendChild(input); @@ -970,6 +972,15 @@ if (pickerEl?.style.display !== 'none' && !own(e.target)) { hideActionPicker(); } + // In CONFIGURING: click outside the bar and selected element returns to PICKING + if (state === 'CONFIGURING' && !own(e.target) && selectedElement && !selectedElement.contains(e.target)) { + hideBar(); + stopScrollTracking(); + state = 'PICKING'; + hoveredElement = null; + hideHighlight(); + return; + } if (state !== 'PICKING' || !pickActive) return; if (own(e.target)) return; if (!hoveredElement || !pickable(hoveredElement)) return; @@ -992,19 +1003,21 @@ if (state === 'PICKING') { hideHighlight(); state = 'IDLE'; return; } } - if (state === 'PICKING' && hoveredElement) { + // Arrow/Enter nav works in PICKING (hover) and CONFIGURING (selected, input empty) + var navEl = (state === 'PICKING') ? hoveredElement : (state === 'CONFIGURING') ? selectedElement : null; + if (navEl && (e.key === 'ArrowUp' || e.key === 'ArrowDown' || (e.key === 'Enter' && state === 'PICKING'))) { let next = null; if (e.key === 'ArrowDown' && !e.shiftKey) { - next = hoveredElement.nextElementSibling; + next = navEl.nextElementSibling; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'ArrowUp' && !e.shiftKey) { - next = hoveredElement.previousElementSibling; + next = navEl.previousElementSibling; while (next && !pickable(next)) next = next.previousElementSibling; } else if (e.key === 'ArrowUp' && e.shiftKey) { - next = hoveredElement.parentElement; + next = navEl.parentElement; if (next && !pickable(next)) next = null; } else if (e.key === 'ArrowDown' && e.shiftKey) { - next = hoveredElement.firstElementChild; + next = navEl.firstElementChild; while (next && !pickable(next)) next = next.nextElementSibling; } else if (e.key === 'Enter') { e.preventDefault(); @@ -1017,7 +1030,14 @@ } if (next) { e.preventDefault(); - hoveredElement = next; + if (state === 'PICKING') { + hoveredElement = next; + } else { + // CONFIGURING: re-select the new element and refresh the bar + selectedElement = next; + showBar('configure'); + startScrollTracking(); + } showHighlight(next); next.scrollIntoView({ block: 'nearest', behavior: 'smooth' }); } From 8030bc226a849811a31846b5a14abd6f0437092a Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 16:44:26 -0700 Subject: [PATCH 029/125] Add live-inject.mjs: per-project config for instant script tag management MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit First live run: agent auto-detects framework and writes a small config.json (file, insertBefore/insertAfter anchor, comment syntax). Every subsequent run: live-inject.mjs handles insert/remove deterministically, no LLM needed. The config lives at {scripts_path}/config.json and is gitignored — it's a per-project cache that wipes on skill update and regenerates on next use. - New live-inject.mjs: --port (insert), --remove, --check modes - Idempotent insert: re-running with a different port replaces cleanly - Reference doc: one-time detection step, then instant insert/remove Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .claude/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .cursor/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .gemini/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .github/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .gitignore | 4 + .kiro/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .opencode/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .pi/skills/impeccable/reference/live.md | 64 ++++--- .pi/skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .rovodev/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .trae-cn/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ .trae/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ public/index.html | 1 - source/skills/impeccable/reference/live.md | 64 ++++--- .../skills/impeccable/scripts/live-inject.mjs | 174 ++++++++++++++++++ 26 files changed, 2584 insertions(+), 277 deletions(-) create mode 100644 .agents/skills/impeccable/scripts/live-inject.mjs create mode 100644 .claude/skills/impeccable/scripts/live-inject.mjs create mode 100644 .cursor/skills/impeccable/scripts/live-inject.mjs create mode 100644 .gemini/skills/impeccable/scripts/live-inject.mjs create mode 100644 .github/skills/impeccable/scripts/live-inject.mjs create mode 100644 .kiro/skills/impeccable/scripts/live-inject.mjs create mode 100644 .opencode/skills/impeccable/scripts/live-inject.mjs create mode 100644 .pi/skills/impeccable/scripts/live-inject.mjs create mode 100644 .rovodev/skills/impeccable/scripts/live-inject.mjs create mode 100644 .trae-cn/skills/impeccable/scripts/live-inject.mjs create mode 100644 .trae/skills/impeccable/scripts/live-inject.mjs create mode 100644 source/skills/impeccable/scripts/live-inject.mjs diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.agents/skills/impeccable/scripts/live-inject.mjs b/.agents/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.agents/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.claude/skills/impeccable/reference/live.md b/.claude/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.claude/skills/impeccable/reference/live.md +++ b/.claude/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.claude/skills/impeccable/scripts/live-inject.mjs b/.claude/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.claude/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.cursor/skills/impeccable/reference/live.md b/.cursor/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.cursor/skills/impeccable/reference/live.md +++ b/.cursor/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.cursor/skills/impeccable/scripts/live-inject.mjs b/.cursor/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.cursor/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.gemini/skills/impeccable/reference/live.md b/.gemini/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.gemini/skills/impeccable/reference/live.md +++ b/.gemini/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.gemini/skills/impeccable/scripts/live-inject.mjs b/.gemini/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.gemini/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.github/skills/impeccable/reference/live.md b/.github/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.github/skills/impeccable/reference/live.md +++ b/.github/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.github/skills/impeccable/scripts/live-inject.mjs b/.github/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.github/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.gitignore b/.gitignore index 1923ca3ca..631650cc6 100644 --- a/.gitignore +++ b/.gitignore @@ -35,6 +35,10 @@ Thumbs.db # Live mode session file (created by live-server.mjs, cleaned up on stop) .impeccable-live.json +# Per-project live mode injection config (generated once per project by the +# skill; wiped on skill update, regenerated on next live run) +**/skills/impeccable/scripts/config.json + # Extension build artifacts extension/detector/ diff --git a/.kiro/skills/impeccable/reference/live.md b/.kiro/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.kiro/skills/impeccable/reference/live.md +++ b/.kiro/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.kiro/skills/impeccable/scripts/live-inject.mjs b/.kiro/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.kiro/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.opencode/skills/impeccable/reference/live.md b/.opencode/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.opencode/skills/impeccable/reference/live.md +++ b/.opencode/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.opencode/skills/impeccable/scripts/live-inject.mjs b/.opencode/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.opencode/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.pi/skills/impeccable/reference/live.md b/.pi/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.pi/skills/impeccable/reference/live.md +++ b/.pi/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.pi/skills/impeccable/scripts/live-inject.mjs b/.pi/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.pi/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.rovodev/skills/impeccable/reference/live.md b/.rovodev/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.rovodev/skills/impeccable/reference/live.md +++ b/.rovodev/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.rovodev/skills/impeccable/scripts/live-inject.mjs b/.rovodev/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.rovodev/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.trae-cn/skills/impeccable/reference/live.md b/.trae-cn/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.trae-cn/skills/impeccable/reference/live.md +++ b/.trae-cn/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.trae-cn/skills/impeccable/scripts/live-inject.mjs b/.trae-cn/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.trae-cn/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/.trae/skills/impeccable/reference/live.md b/.trae/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/.trae/skills/impeccable/reference/live.md +++ b/.trae/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/.trae/skills/impeccable/scripts/live-inject.mjs b/.trae/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/.trae/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; diff --git a/public/index.html b/public/index.html index b8ee0f9c6..68bac36f0 100644 --- a/public/index.html +++ b/public/index.html @@ -756,6 +756,5 @@ - diff --git a/source/skills/impeccable/reference/live.md b/source/skills/impeccable/reference/live.md index a6a449cbe..f3b785fc7 100644 --- a/source/skills/impeccable/reference/live.md +++ b/source/skills/impeccable/reference/live.md @@ -15,34 +15,48 @@ Launch interactive live variant mode: select elements in the browser, pick a des ## Inject the Browser Script -Find the project's main HTML entry point. This varies by framework: +The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). -| Framework | Typical file | -|-----------|-------------| -| Plain HTML | `index.html` | -| Vite / React | `index.html` (project root) | -| Next.js (App Router) | `app/layout.tsx` (add a ` - +```bash +node {{scripts_path}}/live-inject.mjs --check ``` -**JSX / TSX (React, Next.js):** -```jsx -{/* impeccable-live-start */} - -{/* impeccable-live-end */} +If the output says `{"ok": true, ...}`, skip to Step 2. + +If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: + +| Framework | `file` | `insertBefore` | `commentSyntax` | +|-----------|--------|----------------|-----------------| +| Plain HTML | `index.html` | `` | `html` | +| Vite / React | `index.html` | `` | `html` | +| Next.js (App Router) | `app/layout.tsx` | `` | `jsx` | +| Next.js (Pages) | `pages/_document.tsx` | `` | `jsx` | +| Nuxt | `app.vue` | `` | `html` | +| Svelte / SvelteKit | `src/app.html` | `` | `html` | +| Astro | the root layout `.astro` file | `` | `html` | +| Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | + +Write the config to the path reported by `--check`. Example for this project: + +```json +{ + "file": "public/index.html", + "insertBefore": "", + "commentSyntax": "html" +} ``` -Place it before the closing `` or at the end of the layout component. Save the file. The dev server will reload and the element picker will activate. +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). + +### Step 2: Insert the live tag + +```bash +node {{scripts_path}}/live-inject.mjs --port PORT +``` + +Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. If browser automation tools are available, also navigate to the page so the user can see it. @@ -177,7 +191,11 @@ If the poll is still running as a background task, kill it and proceed directly When the loop ends: -1. **Remove the injected script tag** from the source file. Delete everything between `` and `` (inclusive). Use the appropriate comment syntax for the framework. +1. **Remove the injected script tag**: + ```bash + node {{scripts_path}}/live-inject.mjs --remove + ``` + (The config.json stays so future `live-inject.mjs --port PORT` calls are instant.) 2. **Remove any leftover variant wrappers** (search for `impeccable-variants-start` markers and clean up). 3. **Remove any leftover carbonize blocks** (search for `impeccable-carbonize-start` markers and clean up). 4. **Stop the server**: diff --git a/source/skills/impeccable/scripts/live-inject.mjs b/source/skills/impeccable/scripts/live-inject.mjs new file mode 100644 index 000000000..d61c17925 --- /dev/null +++ b/source/skills/impeccable/scripts/live-inject.mjs @@ -0,0 +1,174 @@ +/** + * CLI helper: insert/remove the live variant mode script tag in the project's + * main HTML entry point. + * + * On first live run, the agent generates `config.json` in this script's + * directory with the project's insertion target (framework-specific). On + * every subsequent run, this script handles insert/remove deterministically + * with zero LLM involvement. + * + * Usage: + * node live-inject.mjs --port PORT # Insert the live script tag + * node live-inject.mjs --remove # Remove the live script tag + * node live-inject.mjs --check # Check whether config.json exists + */ + +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const CONFIG_PATH = path.join(__dirname, 'config.json'); +const MARKER_OPEN_TEXT = 'impeccable-live-start'; +const MARKER_CLOSE_TEXT = 'impeccable-live-end'; + +export async function injectCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live-inject.mjs [options] + +Insert or remove the live mode script tag in the project's HTML entry point. +Reads configuration from config.json (in this same directory). + +Modes: + --port PORT Insert script tag pointing at http://localhost:PORT/live.js + --remove Remove the script tag (if present) + --check Print whether config.json exists and its content + +Output (JSON): + { ok, file, inserted|removed, config? }`); + process.exit(0); + } + + if (args.includes('--check')) { + if (!fs.existsSync(CONFIG_PATH)) { + console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(0); + } + try { + const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + } + return; + } + + // Load config + if (!fs.existsSync(CONFIG_PATH)) { + console.error(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); + process.exit(1); + } + const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); + validateConfig(config); + + const absFile = path.resolve(process.cwd(), config.file); + if (!fs.existsSync(absFile)) { + console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); + process.exit(1); + } + + const content = fs.readFileSync(absFile, 'utf-8'); + + if (args.includes('--remove')) { + const updated = removeTag(content, config.commentSyntax); + if (updated === content) { + console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); + return; + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + return; + } + + // Insert mode — need --port + const portIdx = args.indexOf('--port'); + const port = portIdx !== -1 ? parseInt(args[portIdx + 1], 10) : NaN; + if (!Number.isFinite(port)) { + console.error(JSON.stringify({ ok: false, error: 'missing_port' })); + process.exit(1); + } + + // Already inserted? Replace to refresh the port. + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) { + console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); + process.exit(1); + } + fs.writeFileSync(absFile, updated, 'utf-8'); + console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); +} + +// --------------------------------------------------------------------------- +// Core operations +// --------------------------------------------------------------------------- + +function validateConfig(cfg) { + if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); + if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { + throw new Error('config.insertBefore or config.insertAfter (string) required'); + } + if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { + throw new Error("config.commentSyntax must be 'html' or 'jsx'"); + } +} + +function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ''; } + +function buildTagBlock(syntax, port) { + const open = commentOpen(syntax); + const close = commentClose(syntax); + return ( + open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + '\n' + + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' + ); +} + +function insertTag(content, config, port) { + const block = buildTagBlock(config.commentSyntax, port); + if (config.insertBefore) { + const idx = content.indexOf(config.insertBefore); + if (idx === -1) return content; + return content.slice(0, idx) + block + content.slice(idx); + } + // insertAfter + const idx = content.indexOf(config.insertAfter); + if (idx === -1) return content; + const after = idx + config.insertAfter.length; + // Preserve a single trailing newline if the anchor didn't end with one + const prefix = content[after] === '\n' ? content.slice(0, after + 1) : content.slice(0, after) + '\n'; + return prefix + block + content.slice(prefix.length); +} + +/** + * Remove the live script block. Matches either HTML or JSX comment markers + * regardless of config (so stale tags from a wrong config can still be cleaned). + */ +function removeTag(content, _syntax) { + // Two patterns: HTML comment markers or JSX comment markers, with any content between. + const patterns = [ + /\n?[\s\S]*?\n?/, + /\n?\{\/\*\s*impeccable-live-start\s*\*\/\}[\s\S]*?\{\/\*\s*impeccable-live-end\s*\*\/\}\n?/, + ]; + for (const pat of patterns) { + const next = content.replace(pat, '\n'); + if (next !== content) return next; + } + return content; +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live-inject.mjs') || _running?.endsWith('live-inject.mjs/')) { + injectCli(); +} + +export { insertTag, removeTag, validateConfig, buildTagBlock }; From 996c9af78c6a3f46aef28ad5ddfd80ef48fdc287 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 16:56:20 -0700 Subject: [PATCH 030/125] Add live.mjs combined entry point for fast startup Previously, starting live mode required ~5-6 sequential bash calls: read .impeccable.md, start server, check config, read reference, inject tag, verify. The new live.mjs does all of this in a single command (~340ms cold, ~90ms when reusing a running server) and returns everything the agent needs in one JSON blob. Workflow is now: 1. node live.mjs # start + inject + load context (1 bash call) 2. navigate browser # optional MCP call 3. node live-poll.mjs # enter poll loop Reference doc collapsed to a single "Start Live Mode" section with the one-command path plus a first-time config creation fallback. Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/reference/live.md | 51 +++---- .agents/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .claude/skills/impeccable/reference/live.md | 51 +++---- .claude/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .cursor/skills/impeccable/reference/live.md | 51 +++---- .cursor/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .gemini/skills/impeccable/reference/live.md | 51 +++---- .gemini/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .github/skills/impeccable/reference/live.md | 51 +++---- .github/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .kiro/skills/impeccable/reference/live.md | 51 +++---- .kiro/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .opencode/skills/impeccable/reference/live.md | 51 +++---- .opencode/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .pi/skills/impeccable/reference/live.md | 51 +++---- .pi/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .rovodev/skills/impeccable/reference/live.md | 51 +++---- .rovodev/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .trae-cn/skills/impeccable/reference/live.md | 51 +++---- .trae-cn/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ .trae/skills/impeccable/reference/live.md | 51 +++---- .trae/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ source/skills/impeccable/reference/live.md | 51 +++---- source/skills/impeccable/scripts/live.mjs | 143 ++++++++++++++++++ 24 files changed, 1992 insertions(+), 336 deletions(-) create mode 100644 .agents/skills/impeccable/scripts/live.mjs create mode 100644 .claude/skills/impeccable/scripts/live.mjs create mode 100644 .cursor/skills/impeccable/scripts/live.mjs create mode 100644 .gemini/skills/impeccable/scripts/live.mjs create mode 100644 .github/skills/impeccable/scripts/live.mjs create mode 100644 .kiro/skills/impeccable/scripts/live.mjs create mode 100644 .opencode/skills/impeccable/scripts/live.mjs create mode 100644 .pi/skills/impeccable/scripts/live.mjs create mode 100644 .rovodev/skills/impeccable/scripts/live.mjs create mode 100644 .trae-cn/skills/impeccable/scripts/live.mjs create mode 100644 .trae/skills/impeccable/scripts/live.mjs create mode 100644 source/skills/impeccable/scripts/live.mjs diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.agents/skills/impeccable/scripts/live.mjs b/.agents/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.agents/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.claude/skills/impeccable/reference/live.md b/.claude/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.claude/skills/impeccable/reference/live.md +++ b/.claude/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.claude/skills/impeccable/scripts/live.mjs b/.claude/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.claude/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.cursor/skills/impeccable/reference/live.md b/.cursor/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.cursor/skills/impeccable/reference/live.md +++ b/.cursor/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.cursor/skills/impeccable/scripts/live.mjs b/.cursor/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.cursor/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.gemini/skills/impeccable/reference/live.md b/.gemini/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.gemini/skills/impeccable/reference/live.md +++ b/.gemini/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.gemini/skills/impeccable/scripts/live.mjs b/.gemini/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.gemini/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.github/skills/impeccable/reference/live.md b/.github/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.github/skills/impeccable/reference/live.md +++ b/.github/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.github/skills/impeccable/scripts/live.mjs b/.github/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.github/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.kiro/skills/impeccable/reference/live.md b/.kiro/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.kiro/skills/impeccable/reference/live.md +++ b/.kiro/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.kiro/skills/impeccable/scripts/live.mjs b/.kiro/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.kiro/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.opencode/skills/impeccable/reference/live.md b/.opencode/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.opencode/skills/impeccable/reference/live.md +++ b/.opencode/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.opencode/skills/impeccable/scripts/live.mjs b/.opencode/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.opencode/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.pi/skills/impeccable/reference/live.md b/.pi/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.pi/skills/impeccable/reference/live.md +++ b/.pi/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.pi/skills/impeccable/scripts/live.mjs b/.pi/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.pi/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.rovodev/skills/impeccable/reference/live.md b/.rovodev/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.rovodev/skills/impeccable/reference/live.md +++ b/.rovodev/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.rovodev/skills/impeccable/scripts/live.mjs b/.rovodev/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.rovodev/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.trae-cn/skills/impeccable/reference/live.md b/.trae-cn/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.trae-cn/skills/impeccable/reference/live.md +++ b/.trae-cn/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.trae-cn/skills/impeccable/scripts/live.mjs b/.trae-cn/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.trae-cn/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/.trae/skills/impeccable/reference/live.md b/.trae/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/.trae/skills/impeccable/reference/live.md +++ b/.trae/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/.trae/skills/impeccable/scripts/live.mjs b/.trae/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/.trae/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} diff --git a/source/skills/impeccable/reference/live.md b/source/skills/impeccable/reference/live.md index f3b785fc7..3f4ad029f 100644 --- a/source/skills/impeccable/reference/live.md +++ b/source/skills/impeccable/reference/live.md @@ -4,28 +4,33 @@ Launch interactive live variant mode: select elements in the browser, pick a des - A running development server with hot module replacement (Vite, Next.js, Bun, etc.), OR a static HTML file open in the browser -## Start the Server +## Start Live Mode (one command) -1. Read `.impeccable.md` if it exists. Keep the design context in mind for variant generation. -2. Start the live variant server in the background. The `--background` flag spawns a detached server process, waits for it to be ready, prints the connection JSON to stdout, and exits: - ```bash - node {{scripts_path}}/live-server.mjs --background - ``` - The output JSON contains `port` and `token`. Use the port for the script tag below. - -## Inject the Browser Script - -The `live-inject.mjs` script handles insertion deterministically. It reads `config.json` from its own directory (one-time per-project setup). - -### Step 1: Ensure config.json exists +The `live.mjs` entry point does everything in a single call: checks config, starts (or reuses) the server, injects the script tag, loads `.impeccable.md` context. ```bash -node {{scripts_path}}/live-inject.mjs --check +node {{scripts_path}}/live.mjs ``` -If the output says `{"ok": true, ...}`, skip to Step 2. +### Happy path -If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, you need to create the config **once**. Look at the project structure and package.json to determine: +Output JSON: +```json +{ + "ok": true, + "serverPort": 8400, + "serverToken": "...", + "pageFile": "public/index.html", + "hasContext": true, + "context": "...full .impeccable.md contents..." +} +``` + +Keep the `context` in mind for variant generation. If browser automation tools are available, navigate to the page so the user can see it. Then proceed directly to the poll loop — no other setup steps needed. + +### First-time setup (config missing) + +If `live.mjs` outputs `{"ok": false, "error": "config_missing", "configPath": "..."}`, this project has never used live mode before. Create the config at the reported path based on the project's framework: | Framework | `file` | `insertBefore` | `commentSyntax` | |-----------|--------|----------------|-----------------| @@ -38,7 +43,7 @@ If the output says `{"ok": false, "error": "config_missing", "path": "..."}`, yo | Astro | the root layout `.astro` file | `` | `html` | | Static site with a non-root HTML file | e.g. `public/index.html` | `` | `html` | -Write the config to the path reported by `--check`. Example for this project: +Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line. Example: ```json { @@ -48,17 +53,7 @@ Write the config to the path reported by `--check`. Example for this project: } ``` -Use `insertAfter` instead of `insertBefore` if the anchor should be matched **after** a specific line (e.g. just after the main app script). - -### Step 2: Insert the live tag - -```bash -node {{scripts_path}}/live-inject.mjs --port PORT -``` - -Use the `port` from the live-server startup output. The script writes the tag idempotently: if a stale tag is present, it's replaced with one pointing at the new port. Save is automatic. - -If browser automation tools are available, also navigate to the page so the user can see it. +Then re-run `node {{scripts_path}}/live.mjs` to proceed. ## Enter the Poll Loop diff --git a/source/skills/impeccable/scripts/live.mjs b/source/skills/impeccable/scripts/live.mjs new file mode 100644 index 000000000..93f05456e --- /dev/null +++ b/source/skills/impeccable/scripts/live.mjs @@ -0,0 +1,143 @@ +/** + * CLI entry point: prepare everything needed to enter the live variant poll loop. + * + * Does (all in one command): + * 1. Check config.json (returns config_missing if first-ever run) + * 2. Start the live server in the background (or reuse a running one) + * 3. Inject the browser script tag into the project's entry file + * 4. Read .impeccable.md for design context (if present) + * 5. Print a single JSON blob with everything the agent needs + * + * After this, the agent's only remaining steps are: + * - Navigate the browser to the page (optional, if browser automation is available) + * - Enter the poll loop: `node live-poll.mjs` + * + * Usage: + * node live.mjs # Prepare everything, print JSON, exit + * node live.mjs --help + */ + +import { execSync } from 'node:child_process'; +import fs from 'node:fs'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const PID_FILE = path.join(process.cwd(), '.impeccable-live.json'); +const CONTEXT_FILE = path.join(process.cwd(), '.impeccable.md'); + +async function liveCli() { + const args = process.argv.slice(2); + + if (args.includes('--help') || args.includes('-h')) { + console.log(`Usage: node live.mjs + +Prepare everything for live variant mode in a single command: + - Checks scripts/config.json (required, created once per project) + - Starts (or reuses) the live server in the background + - Injects the browser script tag + - Reads .impeccable.md for design context + +On success, prints a JSON blob with: + { ok, serverPort, serverToken, pageFile, hasContext, context } + +On config_missing, prints: + { ok: false, error: "config_missing", configPath, hint } + +The agent should then: + 1. If config_missing, create the config and re-run this script + 2. Optionally navigate the browser to the page + 3. Enter the poll loop: node live-poll.mjs`); + process.exit(0); + } + + // 1. Check config (fail fast if missing — no point starting anything else) + const checkOut = runScript('live-inject.mjs', ['--check']); + const checkResult = safeParse(checkOut); + if (!checkResult || !checkResult.ok) { + console.log(JSON.stringify(checkResult || { ok: false, error: 'check_failed', raw: checkOut })); + process.exit(0); + } + + // 2. Start server (or reuse existing) + const serverInfo = ensureServerRunning(); + if (!serverInfo) { + console.log(JSON.stringify({ ok: false, error: 'server_start_failed' })); + process.exit(1); + } + + // 3. Inject the script tag at the current port + const injectOut = runScript('live-inject.mjs', ['--port', String(serverInfo.port)]); + const injectResult = safeParse(injectOut); + if (!injectResult || !injectResult.ok) { + console.log(JSON.stringify({ + ok: false, + error: 'inject_failed', + detail: injectResult || injectOut, + serverPort: serverInfo.port, + })); + process.exit(1); + } + + // 4. Load design context if available + let context = null; + try { context = fs.readFileSync(CONTEXT_FILE, 'utf-8'); } catch { /* optional */ } + + // 5. Emit everything the agent needs + console.log(JSON.stringify({ + ok: true, + serverPort: serverInfo.port, + serverToken: serverInfo.token, + pageFile: checkResult.config.file, + hasContext: !!context, + context, + }, null, 2)); +} + +// --------------------------------------------------------------------------- +// Helpers +// --------------------------------------------------------------------------- + +function runScript(name, args) { + const scriptPath = path.join(__dirname, name); + const cmd = `node "${scriptPath}" ${args.map(a => `"${a}"`).join(' ')}`; + try { + return execSync(cmd, { encoding: 'utf-8', cwd: process.cwd(), timeout: 15_000 }); + } catch (err) { + // execSync throws on non-zero exit; return stdout if any + return err.stdout || err.message || ''; + } +} + +function safeParse(out) { + try { return JSON.parse(String(out).trim()); } catch { return null; } +} + +/** + * Return { pid, port, token } for the running live server, starting one if needed. + */ +function ensureServerRunning() { + // Try to reuse an existing server + try { + const existing = JSON.parse(fs.readFileSync(PID_FILE, 'utf-8')); + if (existing && existing.pid) { + try { + process.kill(existing.pid, 0); // throws if dead + return existing; + } catch { /* stale PID file — the server script will clean it up */ } + } + } catch { /* no PID file */ } + + // Start a new server + const out = runScript('live-server.mjs', ['--background']); + return safeParse(out); +} + +// --------------------------------------------------------------------------- +// Auto-execute +// --------------------------------------------------------------------------- + +const _running = process.argv[1]; +if (_running?.endsWith('live.mjs') || _running?.endsWith('live.mjs/')) { + liveCli(); +} From 7386b3033f22c8dde373efe80996e500452571c7 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 13 Apr 2026 17:07:23 -0700 Subject: [PATCH 031/125] Force variant diversity and mandatory reference loading in live mode Two failure modes observed: 1. Claude generates N near-identical variants (small shade/size tweaks) instead of meaningfully different design directions 2. When a sub-command like /bolder is chosen in the picker, Claude skips loading reference/bolder.md and generates generic variants Fixes: - "Load reference file" is now a MANDATORY Step 2a, separate and non-negotiable, called out as a critical failure to skip - Added Step 2b "Plan 3+ distinctly different directions" with 7 structural axes variants must differ on (hierarchy, layout topology, typography system, color strategy, density, tone, decomposition) - Added action-specific diversity rules (bolder = different dimensions, animate = different motion vocabulary, colorize = different hues, etc.) - Freeform prompt guidance: honor the prompt direction but explore meaningfully different interpretations, not three near-copies Co-Authored-By: Claude Opus 4.6 (1M context) --- .agents/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .claude/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .cursor/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .gemini/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .github/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .kiro/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .opencode/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .pi/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .rovodev/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .trae-cn/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- .trae/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- source/skills/impeccable/reference/live.md | 41 ++++++++++++++++--- 12 files changed, 420 insertions(+), 72 deletions(-) diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index 3f4ad029f..6d69bdd13 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -105,17 +105,46 @@ The command outputs JSON with the file path and the insert line: If `wrap` fails, fall back to manual grep + edit. -### Step 2: Generate all variants and write them in a SINGLE edit +### Step 2a: MANDATORY — Load the action's reference file -1. **Load the design command's reference file.** If `event.action` is "bolder", load `reference/bolder.md`. If "impeccable" (the default), use the main design principles from this skill without loading a sub-command reference. +**This step is non-negotiable.** Before generating anything, you MUST load the reference file for `event.action`: -2. **Generate ALL variants at once.** For each variant, create a complete HTML replacement of the original element. Consider the element's context (computed styles, parent structure, CSS custom properties from `event.element`). +- `event.action` is "impeccable" (default, no sub-command chosen): use the main design principles from `SKILL.md` (already loaded). Do NOT load a sub-command reference. +- `event.action` is any other value (e.g. "bolder", "quieter", "distill", "polish", "typeset", "colorize", "layout", "adapt", "animate", "delight", "overdrive"): use Read to load `reference/.md` right now. Do not proceed until it's in context. -3. **Diversify across variants.** Each variant should take a distinctly different approach. For "bolder", one might focus on type weight, another on color saturation, another on spatial scale, another on structural change. Do NOT generate N variations on the same idea. +Skipping this step is a critical failure. The sub-commands exist precisely because the generic "impeccable" prompt produces generic variants. Each action encodes a specific design discipline — ignoring the reference file means ignoring what the user asked for. -4. **If a freeform prompt was provided** (`event.freeformPrompt`), use it as additional guidance for all variants. +### Step 2b: Plan 3+ distinctly different directions BEFORE writing any code -5. **Write CSS + HTML together in a SINGLE edit** at the insert line reported by `wrap`. Colocate any scoped CSS inside the variant wrapper as a ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the ` +
    + +
    +
    + +
    +
    + +
    +``` + +The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the ` -
    - -
    -
    - -
    -
    - -
    -``` - -The first variant should NOT have `style="display: none"` (it should be visible by default). All others should. If variants only use inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `
    - +
    - +
    - +
    ``` +**Each variant div contains exactly one top-level element — the full replacement for the original.** Use the same tag as the original (e.g. `
    ` if the user picked a `
    `). Loose siblings (heading + paragraph + div as direct children of the variant div) break the outline tracking and the accept flow, which both assume one child. + The first variant has no `display: none` (visible by default). All others do. If variants use only inline styles and no scoped CSS, omit the `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.agents/skills/impeccable/scripts/live-inject.mjs b/.agents/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.agents/skills/impeccable/scripts/live-inject.mjs +++ b/.agents/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.agents/skills/impeccable/scripts/live-server.mjs b/.agents/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.agents/skills/impeccable/scripts/live-server.mjs +++ b/.agents/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.agents/skills/impeccable/scripts/live-wrap.mjs b/.agents/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.agents/skills/impeccable/scripts/live-wrap.mjs +++ b/.agents/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.agents/skills/impeccable/scripts/live.mjs b/.agents/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.agents/skills/impeccable/scripts/live.mjs +++ b/.agents/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.claude/skills/impeccable/reference/live.md b/.claude/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.claude/skills/impeccable/reference/live.md +++ b/.claude/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.claude/skills/impeccable/scripts/live-inject.mjs b/.claude/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.claude/skills/impeccable/scripts/live-inject.mjs +++ b/.claude/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.claude/skills/impeccable/scripts/live-server.mjs b/.claude/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.claude/skills/impeccable/scripts/live-server.mjs +++ b/.claude/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.claude/skills/impeccable/scripts/live-wrap.mjs b/.claude/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.claude/skills/impeccable/scripts/live-wrap.mjs +++ b/.claude/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.claude/skills/impeccable/scripts/live.mjs b/.claude/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.claude/skills/impeccable/scripts/live.mjs +++ b/.claude/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.cursor/skills/impeccable/reference/live.md b/.cursor/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.cursor/skills/impeccable/reference/live.md +++ b/.cursor/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.cursor/skills/impeccable/scripts/live-inject.mjs b/.cursor/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.cursor/skills/impeccable/scripts/live-inject.mjs +++ b/.cursor/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.cursor/skills/impeccable/scripts/live-server.mjs b/.cursor/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.cursor/skills/impeccable/scripts/live-server.mjs +++ b/.cursor/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.cursor/skills/impeccable/scripts/live-wrap.mjs b/.cursor/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.cursor/skills/impeccable/scripts/live-wrap.mjs +++ b/.cursor/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.cursor/skills/impeccable/scripts/live.mjs b/.cursor/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.cursor/skills/impeccable/scripts/live.mjs +++ b/.cursor/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.gemini/skills/impeccable/reference/live.md b/.gemini/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.gemini/skills/impeccable/reference/live.md +++ b/.gemini/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.gemini/skills/impeccable/scripts/live-inject.mjs b/.gemini/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.gemini/skills/impeccable/scripts/live-inject.mjs +++ b/.gemini/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.gemini/skills/impeccable/scripts/live-server.mjs b/.gemini/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.gemini/skills/impeccable/scripts/live-server.mjs +++ b/.gemini/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.gemini/skills/impeccable/scripts/live-wrap.mjs b/.gemini/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.gemini/skills/impeccable/scripts/live-wrap.mjs +++ b/.gemini/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.gemini/skills/impeccable/scripts/live.mjs b/.gemini/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.gemini/skills/impeccable/scripts/live.mjs +++ b/.gemini/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.github/skills/impeccable/reference/live.md b/.github/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.github/skills/impeccable/reference/live.md +++ b/.github/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.github/skills/impeccable/scripts/live-inject.mjs b/.github/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.github/skills/impeccable/scripts/live-inject.mjs +++ b/.github/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.github/skills/impeccable/scripts/live-server.mjs b/.github/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.github/skills/impeccable/scripts/live-server.mjs +++ b/.github/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.github/skills/impeccable/scripts/live-wrap.mjs b/.github/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.github/skills/impeccable/scripts/live-wrap.mjs +++ b/.github/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.github/skills/impeccable/scripts/live.mjs b/.github/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.github/skills/impeccable/scripts/live.mjs +++ b/.github/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.kiro/skills/impeccable/reference/live.md b/.kiro/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.kiro/skills/impeccable/reference/live.md +++ b/.kiro/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.kiro/skills/impeccable/scripts/live-inject.mjs b/.kiro/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.kiro/skills/impeccable/scripts/live-inject.mjs +++ b/.kiro/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.kiro/skills/impeccable/scripts/live-server.mjs b/.kiro/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.kiro/skills/impeccable/scripts/live-server.mjs +++ b/.kiro/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.kiro/skills/impeccable/scripts/live-wrap.mjs b/.kiro/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.kiro/skills/impeccable/scripts/live-wrap.mjs +++ b/.kiro/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.kiro/skills/impeccable/scripts/live.mjs b/.kiro/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.kiro/skills/impeccable/scripts/live.mjs +++ b/.kiro/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.opencode/skills/impeccable/reference/live.md b/.opencode/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.opencode/skills/impeccable/reference/live.md +++ b/.opencode/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.opencode/skills/impeccable/scripts/live-inject.mjs b/.opencode/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.opencode/skills/impeccable/scripts/live-inject.mjs +++ b/.opencode/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.opencode/skills/impeccable/scripts/live-server.mjs b/.opencode/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.opencode/skills/impeccable/scripts/live-server.mjs +++ b/.opencode/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.opencode/skills/impeccable/scripts/live-wrap.mjs b/.opencode/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.opencode/skills/impeccable/scripts/live-wrap.mjs +++ b/.opencode/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.opencode/skills/impeccable/scripts/live.mjs b/.opencode/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.opencode/skills/impeccable/scripts/live.mjs +++ b/.opencode/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.pi/skills/impeccable/reference/live.md b/.pi/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.pi/skills/impeccable/reference/live.md +++ b/.pi/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.pi/skills/impeccable/scripts/live-inject.mjs b/.pi/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.pi/skills/impeccable/scripts/live-inject.mjs +++ b/.pi/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.pi/skills/impeccable/scripts/live-server.mjs b/.pi/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.pi/skills/impeccable/scripts/live-server.mjs +++ b/.pi/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.pi/skills/impeccable/scripts/live-wrap.mjs b/.pi/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.pi/skills/impeccable/scripts/live-wrap.mjs +++ b/.pi/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.pi/skills/impeccable/scripts/live.mjs b/.pi/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.pi/skills/impeccable/scripts/live.mjs +++ b/.pi/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.rovodev/skills/impeccable/reference/live.md b/.rovodev/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.rovodev/skills/impeccable/reference/live.md +++ b/.rovodev/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.rovodev/skills/impeccable/scripts/live-inject.mjs b/.rovodev/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.rovodev/skills/impeccable/scripts/live-inject.mjs +++ b/.rovodev/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.rovodev/skills/impeccable/scripts/live-server.mjs b/.rovodev/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.rovodev/skills/impeccable/scripts/live-server.mjs +++ b/.rovodev/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.rovodev/skills/impeccable/scripts/live-wrap.mjs b/.rovodev/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.rovodev/skills/impeccable/scripts/live-wrap.mjs +++ b/.rovodev/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.rovodev/skills/impeccable/scripts/live.mjs b/.rovodev/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.rovodev/skills/impeccable/scripts/live.mjs +++ b/.rovodev/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.trae-cn/skills/impeccable/reference/live.md b/.trae-cn/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.trae-cn/skills/impeccable/reference/live.md +++ b/.trae-cn/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.trae-cn/skills/impeccable/scripts/live-inject.mjs b/.trae-cn/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.trae-cn/skills/impeccable/scripts/live-inject.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.trae-cn/skills/impeccable/scripts/live-server.mjs b/.trae-cn/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.trae-cn/skills/impeccable/scripts/live-server.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.trae-cn/skills/impeccable/scripts/live-wrap.mjs b/.trae-cn/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.trae-cn/skills/impeccable/scripts/live-wrap.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.trae-cn/skills/impeccable/scripts/live.mjs b/.trae-cn/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.trae-cn/skills/impeccable/scripts/live.mjs +++ b/.trae-cn/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/.trae/skills/impeccable/reference/live.md b/.trae/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/.trae/skills/impeccable/reference/live.md +++ b/.trae/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/.trae/skills/impeccable/scripts/live-inject.mjs b/.trae/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/.trae/skills/impeccable/scripts/live-inject.mjs +++ b/.trae/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/.trae/skills/impeccable/scripts/live-server.mjs b/.trae/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/.trae/skills/impeccable/scripts/live-server.mjs +++ b/.trae/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/.trae/skills/impeccable/scripts/live-wrap.mjs b/.trae/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/.trae/skills/impeccable/scripts/live-wrap.mjs +++ b/.trae/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.trae/skills/impeccable/scripts/live.mjs b/.trae/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/.trae/skills/impeccable/scripts/live.mjs +++ b/.trae/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, diff --git a/source/skills/impeccable/reference/live.md b/source/skills/impeccable/reference/live.md index 53bd64f54..60dcbda04 100644 --- a/source/skills/impeccable/reference/live.md +++ b/source/skills/impeccable/reference/live.md @@ -28,11 +28,11 @@ Chat is overhead. No recap, no tutorial output, no pasting PRODUCT / DESIGN bodi node {{scripts_path}}/live.mjs ``` -Output JSON: `{ ok, serverPort, serverToken, pageFile, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. +Output JSON: `{ ok, serverPort, serverToken, pageFiles, hasProduct, product, productPath, hasDesign, design, designPath, migrated }`. `pageFiles` is the list of HTML entries the live script was injected into. Keep PRODUCT.md and DESIGN.md in mind for variant generation — **DESIGN.md wins on visual decisions; PRODUCT.md wins on strategic/voice decisions.** If `migrated: true`, the loader auto-renamed legacy `.impeccable.md` to `PRODUCT.md`; mention this once and suggest `/impeccable document` for the matching DESIGN.md. -`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves the HTML entry (`pageFile` / Vite / Next / Bun / tunnel / LAN hostname). +`serverPort` and `serverToken` belong to the small **Impeccable live helper** HTTP server (serves `/live.js`, SSE, and `/poll`). That port is **not** your dev server and is usually not the URL you open to view the app. The browser page is whatever origin serves one of the `pageFiles` entries (Vite / Next / Bun / tunnel / LAN hostname). -If output is `{ ok: false, error: "config_missing", configPath }`, this project hasn't used live mode. See **First-time setup** at the bottom. +If output is `{ ok: false, error: "config_missing" | "config_invalid", path }`, this project hasn't been configured for live mode (or its config is stale). See **First-time setup** at the bottom. ## Poll loop @@ -44,6 +44,7 @@ LOOP: "generate" → Handle Generate; reply done; LOOP "accept" → Handle Accept; LOOP "discard" → Handle Discard; LOOP + "prefetch" → Handle Prefetch; LOOP "timeout" → LOOP "exit" → break → Cleanup ``` @@ -73,9 +74,23 @@ Reading annotations precisely: node {{scripts_path}}/live-wrap.mjs --id EVENT_ID --count EVENT_COUNT --element-id "ELEMENT_ID" --classes "class1,class2" --tag "div" ``` -Pass `event.element.id`, `event.element.classes` joined with commas, and `event.element.tagName`. The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. +Flag mapping — keep them separate, don't collapse into `--query`: -Output: `{ file, insertLine, commentSyntax }`. If `wrap` fails, fall back to manual grep + edit. +- `--element-id` ← `event.element.id` +- `--classes` ← `event.element.classes` joined with commas +- `--tag` ← `event.element.tagName` + +The helper searches ID first, then classes, then tag + class combo. If `event.pageUrl` implies the file (e.g. `/` is usually `index.html`), pass `--file PATH` to skip the search. `--query` is a fallback for raw text search only — do not use it for normal element lookups. + +Output on success: `{ file, insertLine, commentSyntax }`. + +**Fallback errors.** Wrap only writes into files it judges to be source (tracked by git, not marked GENERATED, not listed in config's `generatedFiles`). If it can't land on a source file, it errors without writing — accepting a variant into a generated file is silent data loss. Three shapes: + +- `{ error: "file_is_generated", file, hint }` — user-supplied `--file` points at a generated file. +- `{ error: "element_not_in_source", generatedMatch, hint }` — element exists only in a generated file (the next build would wipe any edits). +- `{ error: "element_not_found", hint }` — element isn't in any project file; likely runtime-injected (JS component, data-driven render). + +All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference @@ -173,24 +188,78 @@ node {{scripts_path}}/live-poll.mjs --reply EVENT_ID done --file RELATIVE_PATH Then run `live-poll.mjs` again immediately. +## Handle fallback + +When wrap returns `fallback: "agent-driven"`, the deterministic flow doesn't apply. Pick up here. + +The goal is the same: give the user three variants to choose from AND persist the accepted one in a place the next build won't wipe. The difference is that you have to pick the right source file yourself. + +### Step 1: Identify where the element actually lives + +Use the error payload: + +- `element_not_in_source` with `generatedMatch: "public/docs/foo.html"` — the served HTML is generated. Find the generator (grep for writers of that path, e.g. `scripts/build-sub-pages.js`, an Astro/Next template) and locate the template or partial that emits this element. +- `element_not_found` — the element is runtime-injected. Look for the component that renders it (React/Vue/Svelte), the JS that assembles it, or the data source that feeds it. +- `file_is_generated` with `file: "..."` — user pointed at a generated file explicitly. Same resolution as `element_not_in_source`. + +Read the candidate source until you're confident where a change to the element would belong. If the change is purely visual, that source might be a shared stylesheet, not the template. + +### Step 2: Show three variants in the DOM for preview + +The browser bar is waiting for variants. Even without a wrapper in source, you still need to show something: + +1. Manually write the wrapper scaffold into the **served** file (the one the browser actually loaded). Use the same structure `live-wrap.mjs` produces — `
    …
    `. +2. Insert your three variant divs inside it, same shape as the deterministic path. +3. Signal done with `--reply EVENT_ID done --file `. The browser's no-HMR fallback will fetch and inject. + +This served-file edit is **temporary** — next regen wipes it, and that's fine. The real work happens on accept. + +### Step 3: On accept, write to true source + +When the accept event arrives (`_acceptResult.handled` will usually be `false` here because accept also refuses to persist into generated files — see Handle accept for the carbonize branch), extract the accepted variant's content and write it into the source you identified in Step 1: + +- Structural change → edit the template / component source. +- Visual-only change → add or update rules in the appropriate stylesheet; remove the inline `')) inStyle = false; + continue; + } + if (!inOriginal && line.includes('data-impeccable-variant="original"')) { inOriginal = true; depth = 1; @@ -200,15 +237,24 @@ function extractOriginal(lines, block) { /** * Extract a specific variant's inner content (stripping the wrapper div). * Returns an array of lines, or null if not found. + * + * Skip ')) inStyle = false; + continue; + } + if (!inVariant && line.includes('data-impeccable-variant="' + variantNum + '"')) { inVariant = true; depth = 1; diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 19a234da2..5e13effda 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -732,13 +732,26 @@ const r = selectedElement.getBoundingClientRect(); const barH = barEl.offsetHeight || 44; const barW = barEl.offsetWidth || 380; - let top = r.bottom + 8; + const GLOBAL_BAR_RESERVE = 64; // global bar height + bottom margin + breathing room + const GAP = 8; + + // Prefer below the element; fall back to above; if neither fits (element + // taller than viewport), pin to a stable viewport anchor so the bar + // doesn't teleport between top and bottom as the user scrolls. + let top; + const belowTop = r.bottom + GAP; + const aboveTop = r.top - barH - GAP; + if (belowTop + barH + GAP <= window.innerHeight - GLOBAL_BAR_RESERVE) { + top = belowTop; + } else if (aboveTop >= GAP) { + top = aboveTop; + } else { + top = window.innerHeight - barH - GLOBAL_BAR_RESERVE; + } + let left = r.left + (r.width - barW) / 2; - // Keep in viewport - if (top + barH + 8 > window.innerHeight) top = r.top - barH - 8; - if (top < 8) top = 8; - if (left < 8) left = 8; - if (left + barW > window.innerWidth - 8) left = window.innerWidth - barW - 8; + if (left < GAP) left = GAP; + if (left + barW > window.innerWidth - GAP) left = window.innerWidth - barW - GAP; Object.assign(barEl.style, { top: top + 'px', left: left + 'px' }); } @@ -1251,6 +1264,7 @@ selectedElement = pickVariantContent(wrapper, 1) || wrapper.parentElement; state = 'CYCLING'; + hideShaderOverlay(); updateBarContent('cycling'); saveSession(); console.log('[impeccable] Injected ' + arrivedVariants + ' variants from source file.'); @@ -1514,6 +1528,28 @@ showAnnotOverlay(selectedElement); showBar('configure'); startScrollTracking(); + maybePrefetchPage(); + } + + // Fire a lightweight prefetch event the first time the user selects an + // element on a given route. The agent uses this to Read the underlying file + // into context before Go is hit, shaving the read off the critical path. + // Dedupe per session by pathname — clicking around on the same page doesn't + // re-fire. + // + // DISABLED: quick-Go workflows pay an extra harness round trip because + // prefetch + generate arrive as two events instead of one. Re-enable with + // a browser-side debounce (~800–1000ms, cancelled on Go) if we want to + // resurrect this. Server validator and skill dispatch remain in place so + // flipping this flag is the only change needed. + const PREFETCH_ENABLED = false; + const prefetchedPaths = new Set(); + function maybePrefetchPage() { + if (!PREFETCH_ENABLED) return; + const path = location.pathname; + if (prefetchedPaths.has(path)) return; + prefetchedPaths.add(path); + sendEvent({ type: 'prefetch', pageUrl: path }); } function handleKeyDown(e) { diff --git a/source/skills/impeccable/scripts/live-inject.mjs b/source/skills/impeccable/scripts/live-inject.mjs index d61c17925..3762c9f00 100644 --- a/source/skills/impeccable/scripts/live-inject.mjs +++ b/source/skills/impeccable/scripts/live-inject.mjs @@ -46,12 +46,20 @@ Output (JSON): console.log(JSON.stringify({ ok: false, error: 'config_missing', path: CONFIG_PATH })); process.exit(0); } + let cfg; try { - const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); - console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); + cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); } catch (err) { - console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message })); + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; } + try { + validateConfig(cfg); + } catch (err) { + console.log(JSON.stringify({ ok: false, error: 'config_invalid', message: err.message, path: CONFIG_PATH })); + return; + } + console.log(JSON.stringify({ ok: true, config: cfg, path: CONFIG_PATH })); return; } @@ -63,22 +71,17 @@ Output (JSON): const config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8')); validateConfig(config); - const absFile = path.resolve(process.cwd(), config.file); - if (!fs.existsSync(absFile)) { - console.error(JSON.stringify({ ok: false, error: 'file_not_found', file: config.file })); - process.exit(1); - } - - const content = fs.readFileSync(absFile, 'utf-8'); - if (args.includes('--remove')) { - const updated = removeTag(content, config.commentSyntax); - if (updated === content) { - console.log(JSON.stringify({ ok: true, file: config.file, removed: false, note: 'no tag present' })); - return; - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, removed: true })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const updated = removeTag(content, config.commentSyntax); + if (updated === content) return { file: relFile, removed: false, note: 'no tag present' }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, removed: true }; + }); + console.log(JSON.stringify({ ok: true, results })); return; } @@ -90,15 +93,19 @@ Output (JSON): process.exit(1); } - // Already inserted? Replace to refresh the port. - const withoutOld = removeTag(content, config.commentSyntax); - const updated = insertTag(withoutOld, config, port); - if (updated === withoutOld) { - console.error(JSON.stringify({ ok: false, error: 'insertion_point_not_found', anchor: config.insertBefore })); - process.exit(1); - } - fs.writeFileSync(absFile, updated, 'utf-8'); - console.log(JSON.stringify({ ok: true, file: config.file, inserted: true, port })); + const results = config.files.map((relFile) => { + const absFile = path.resolve(process.cwd(), relFile); + if (!fs.existsSync(absFile)) return { file: relFile, error: 'file_not_found' }; + const content = fs.readFileSync(absFile, 'utf-8'); + const withoutOld = removeTag(content, config.commentSyntax); + const updated = insertTag(withoutOld, config, port); + if (updated === withoutOld) return { file: relFile, error: 'insertion_point_not_found', anchor: config.insertBefore || config.insertAfter }; + fs.writeFileSync(absFile, updated, 'utf-8'); + return { file: relFile, inserted: true }; + }); + const anyInserted = results.some((r) => r.inserted); + console.log(JSON.stringify({ ok: anyInserted, port, results })); + if (!anyInserted) process.exit(1); } // --------------------------------------------------------------------------- @@ -107,7 +114,12 @@ Output (JSON): function validateConfig(cfg) { if (!cfg || typeof cfg !== 'object') throw new Error('config.json must be an object'); - if (typeof cfg.file !== 'string') throw new Error('config.file (string) required'); + if (!Array.isArray(cfg.files) || cfg.files.length === 0) { + throw new Error('config.files (non-empty string array) required'); + } + if (!cfg.files.every((f) => typeof f === 'string' && f.length > 0)) { + throw new Error('config.files must contain only non-empty strings'); + } if (typeof cfg.insertBefore !== 'string' && typeof cfg.insertAfter !== 'string') { throw new Error('config.insertBefore or config.insertAfter (string) required'); } @@ -131,12 +143,16 @@ function buildTagBlock(syntax, port) { function insertTag(content, config, port) { const block = buildTagBlock(config.commentSyntax, port); + // insertBefore: match the LAST occurrence. Anchors like `` naturally + // belong at the end, and the same literal can appear earlier in code blocks + // within rendered documentation pages. if (config.insertBefore) { - const idx = content.indexOf(config.insertBefore); + const idx = content.lastIndexOf(config.insertBefore); if (idx === -1) return content; return content.slice(0, idx) + block + content.slice(idx); } - // insertAfter + // insertAfter: match the FIRST occurrence — typical anchors like `` or + // `` open near the top of the document. const idx = content.indexOf(config.insertAfter); if (idx === -1) return content; const after = idx + config.insertAfter.length; diff --git a/source/skills/impeccable/scripts/live-server.mjs b/source/skills/impeccable/scripts/live-server.mjs index 97163b255..15349ae6d 100644 --- a/source/skills/impeccable/scripts/live-server.mjs +++ b/source/skills/impeccable/scripts/live-server.mjs @@ -151,6 +151,9 @@ function validateEvent(msg) { return msg.id ? null : 'discard: missing id'; case 'exit': return null; + case 'prefetch': + if (!msg.pageUrl || typeof msg.pageUrl !== 'string') return 'prefetch: missing pageUrl'; + return null; default: return 'Unknown event type: ' + msg.type; } diff --git a/source/skills/impeccable/scripts/live-wrap.mjs b/source/skills/impeccable/scripts/live-wrap.mjs index f8255e39b..cbd5d76b1 100644 --- a/source/skills/impeccable/scripts/live-wrap.mjs +++ b/source/skills/impeccable/scripts/live-wrap.mjs @@ -13,6 +13,7 @@ import fs from 'node:fs'; import path from 'node:path'; +import { isGeneratedFile } from './is-generated.mjs'; const EXTENSIONS = ['.html', '.jsx', '.tsx', '.vue', '.svelte', '.astro']; @@ -62,19 +63,52 @@ The agent should insert variant HTML at insertLine.`); // Build search queries in priority order (most specific first) const queries = buildSearchQueries(elementId, classes, tag, query); - // Find the source file + const genOpts = { cwd: process.cwd() }; + + // Find the source file. Generated files are excluded from auto-search so we + // don't silently write variants into a file the next build will wipe. let targetFile = filePath; let matchedQuery = null; if (!targetFile) { for (const q of queries) { - targetFile = findFileWithQuery(q, process.cwd()); + targetFile = findFileWithQuery(q, process.cwd(), genOpts); if (targetFile) { matchedQuery = q; break; } } if (!targetFile) { - console.error(JSON.stringify({ error: 'Could not find element in project files. Searched for: ' + queries.join(', ') })); + // Nothing in source. Did the element show up in a generated file? That + // tells the agent "fall back to the agent-driven flow" vs "element just + // doesn't exist in this project." + let generatedHit = null; + for (const q of queries) { + generatedHit = findFileWithQuery(q, process.cwd(), { ...genOpts, includeGenerated: true }); + if (generatedHit) break; + } + if (generatedHit) { + console.error(JSON.stringify({ + error: 'element_not_in_source', + fallback: 'agent-driven', + generatedMatch: path.relative(process.cwd(), generatedHit), + hint: 'Element found only in a generated file. See "Handle fallback" in live.md.', + })); + } else { + console.error(JSON.stringify({ + error: 'element_not_found', + fallback: 'agent-driven', + hint: 'Element not found in any project file. It may be runtime-injected (JS component, etc.). See "Handle fallback" in live.md.', + })); + } process.exit(1); } } else { + if (isGeneratedFile(targetFile, genOpts)) { + console.error(JSON.stringify({ + error: 'file_is_generated', + fallback: 'agent-driven', + file: path.relative(process.cwd(), path.resolve(process.cwd(), targetFile)), + hint: 'Explicit --file points at a generated file. Writing here gets wiped by the next build. See "Handle fallback" in live.md.', + })); + process.exit(1); + } matchedQuery = queries[0]; } @@ -195,20 +229,20 @@ function detectCommentSyntax(filePath) { * Search project files for the query string (class name, ID, etc.) * Returns the first matching file path, or null. */ -function findFileWithQuery(query, cwd) { +function findFileWithQuery(query, cwd, genOpts = {}) { const searchDirs = ['src', 'app', 'pages', 'components', 'public', 'views', 'templates', '.']; const seen = new Set(); for (const dir of searchDirs) { const absDir = path.join(cwd, dir); if (!fs.existsSync(absDir)) continue; - const result = searchDir(absDir, query, seen, 0); + const result = searchDir(absDir, query, seen, 0, genOpts); if (result) return result; } return null; } -function searchDir(dir, query, seen, depth) { +function searchDir(dir, query, seen, depth, genOpts) { if (depth > 5) return null; // don't go too deep const realDir = fs.realpathSync(dir); if (seen.has(realDir)) return null; @@ -225,6 +259,7 @@ function searchDir(dir, query, seen, depth) { if (!EXTENSIONS.includes(ext)) continue; const filePath = path.join(dir, entry.name); + if (!genOpts.includeGenerated && isGeneratedFile(filePath, genOpts)) continue; try { const content = fs.readFileSync(filePath, 'utf-8'); if (content.includes(query)) return filePath; @@ -235,7 +270,7 @@ function searchDir(dir, query, seen, depth) { for (const entry of entries) { if (!entry.isDirectory()) continue; if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; - const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1); + const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/source/skills/impeccable/scripts/live.mjs b/source/skills/impeccable/scripts/live.mjs index 062b35ae8..aefacfba3 100644 --- a/source/skills/impeccable/scripts/live.mjs +++ b/source/skills/impeccable/scripts/live.mjs @@ -87,7 +87,7 @@ The agent should then: ok: true, serverPort: serverInfo.port, serverToken: serverInfo.token, - pageFile: checkResult.config.file, + pageFiles: checkResult.config.files, hasProduct: ctx.hasProduct, product: ctx.product, productPath: ctx.productPath, From c9c152f0f0fd5ea52a79a6caa4aded878d02df69 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 21 Apr 2026 22:42:28 -0700 Subject: [PATCH 053/125] test(live): framework fixture matrix for inject / wrap / is-generated Five representative project shapes under tests/framework-fixtures/ that stage into fresh tmp git repos and drive the live scripts against each: - vite-react: tracked index.html shell + src/App.jsx - nextjs-app: app/layout.tsx as JSX inject target - astro: src/layouts/Layout.astro - sveltekit: src/app.html shell + src/routes/+page.svelte - multipage-with-generator: src/ tracked, dist/ gitignored (our own repo's shape); exercises the is-generated guard and element_not_in_source fallback Each fixture declares its config, expected source/generated paths, and wrap cases in fixture.json. The harness copies into tmpdir, applies gitignore, commits, then asserts: - inject --port lands the script tag at the correct anchor across all configured files - inject --remove strips it cleanly - is-generated classifies source vs generated paths correctly - wrap routes to the expected source file or emits the expected fallback error Plumbing + bug caught while building out the matrix: - IMPECCABLE_LIVE_CONFIG env var so tests can point live-inject at a fixture-specific config.json without clobbering the harness copy. Backwards-compatible. - live-wrap.mjs no longer hardcodes dist/build in its directory skip list. Only node_modules and .git remain universal skips; the isGeneratedFile check is now the sole guard for generated paths. This lets the includeGenerated second pass find elements in dist/ and report generatedMatch, which is what the multipage-with-generator fixture needs to exercise. Wired into bun run test. 25 tests, 5 suites. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .kiro/skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .pi/skills/impeccable/scripts/live-inject.mjs | 2 +- .pi/skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .trae/skills/impeccable/scripts/live-wrap.mjs | 7 +- package.json | 2 +- .../skills/impeccable/scripts/live-inject.mjs | 2 +- .../skills/impeccable/scripts/live-wrap.mjs | 7 +- tests/framework-fixtures.test.mjs | 177 ++++++++++++++++++ tests/framework-fixtures/README.md | 43 +++++ .../astro/files/src/layouts/Layout.astro | 14 ++ .../astro/files/src/pages/index.astro | 13 ++ tests/framework-fixtures/astro/fixture.json | 17 ++ tests/framework-fixtures/astro/gitignore.txt | 3 + .../files/src/template.js | 8 + .../multipage-with-generator/fixture.json | 17 ++ .../multipage-with-generator/gitignore.txt | 2 + .../nextjs-app/files/app/layout.tsx | 9 + .../nextjs-app/files/app/page.tsx | 12 ++ .../nextjs-app/fixture.json | 17 ++ .../nextjs-app/gitignore.txt | 3 + .../sveltekit/files/src/app.html | 11 ++ .../sveltekit/files/src/routes/+page.svelte | 8 + .../framework-fixtures/sveltekit/fixture.json | 17 ++ .../sveltekit/gitignore.txt | 3 + .../vite-react/files/index.html | 11 ++ .../vite-react/files/src/App.jsx | 12 ++ .../vite-react/fixture.json | 17 ++ .../vite-react/gitignore.txt | 3 + 46 files changed, 490 insertions(+), 37 deletions(-) create mode 100644 tests/framework-fixtures.test.mjs create mode 100644 tests/framework-fixtures/README.md create mode 100644 tests/framework-fixtures/astro/files/src/layouts/Layout.astro create mode 100644 tests/framework-fixtures/astro/files/src/pages/index.astro create mode 100644 tests/framework-fixtures/astro/fixture.json create mode 100644 tests/framework-fixtures/astro/gitignore.txt create mode 100644 tests/framework-fixtures/multipage-with-generator/files/src/template.js create mode 100644 tests/framework-fixtures/multipage-with-generator/fixture.json create mode 100644 tests/framework-fixtures/multipage-with-generator/gitignore.txt create mode 100644 tests/framework-fixtures/nextjs-app/files/app/layout.tsx create mode 100644 tests/framework-fixtures/nextjs-app/files/app/page.tsx create mode 100644 tests/framework-fixtures/nextjs-app/fixture.json create mode 100644 tests/framework-fixtures/nextjs-app/gitignore.txt create mode 100644 tests/framework-fixtures/sveltekit/files/src/app.html create mode 100644 tests/framework-fixtures/sveltekit/files/src/routes/+page.svelte create mode 100644 tests/framework-fixtures/sveltekit/fixture.json create mode 100644 tests/framework-fixtures/sveltekit/gitignore.txt create mode 100644 tests/framework-fixtures/vite-react/files/index.html create mode 100644 tests/framework-fixtures/vite-react/files/src/App.jsx create mode 100644 tests/framework-fixtures/vite-react/fixture.json create mode 100644 tests/framework-fixtures/vite-react/gitignore.txt diff --git a/.agents/skills/impeccable/scripts/live-inject.mjs b/.agents/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.agents/skills/impeccable/scripts/live-inject.mjs +++ b/.agents/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.agents/skills/impeccable/scripts/live-wrap.mjs b/.agents/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.agents/skills/impeccable/scripts/live-wrap.mjs +++ b/.agents/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.claude/skills/impeccable/scripts/live-inject.mjs b/.claude/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.claude/skills/impeccable/scripts/live-inject.mjs +++ b/.claude/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.claude/skills/impeccable/scripts/live-wrap.mjs b/.claude/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.claude/skills/impeccable/scripts/live-wrap.mjs +++ b/.claude/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.cursor/skills/impeccable/scripts/live-inject.mjs b/.cursor/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.cursor/skills/impeccable/scripts/live-inject.mjs +++ b/.cursor/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.cursor/skills/impeccable/scripts/live-wrap.mjs b/.cursor/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.cursor/skills/impeccable/scripts/live-wrap.mjs +++ b/.cursor/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.gemini/skills/impeccable/scripts/live-inject.mjs b/.gemini/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.gemini/skills/impeccable/scripts/live-inject.mjs +++ b/.gemini/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.gemini/skills/impeccable/scripts/live-wrap.mjs b/.gemini/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.gemini/skills/impeccable/scripts/live-wrap.mjs +++ b/.gemini/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.github/skills/impeccable/scripts/live-inject.mjs b/.github/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.github/skills/impeccable/scripts/live-inject.mjs +++ b/.github/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.github/skills/impeccable/scripts/live-wrap.mjs b/.github/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.github/skills/impeccable/scripts/live-wrap.mjs +++ b/.github/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.kiro/skills/impeccable/scripts/live-inject.mjs b/.kiro/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.kiro/skills/impeccable/scripts/live-inject.mjs +++ b/.kiro/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.kiro/skills/impeccable/scripts/live-wrap.mjs b/.kiro/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.kiro/skills/impeccable/scripts/live-wrap.mjs +++ b/.kiro/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.opencode/skills/impeccable/scripts/live-inject.mjs b/.opencode/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.opencode/skills/impeccable/scripts/live-inject.mjs +++ b/.opencode/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.opencode/skills/impeccable/scripts/live-wrap.mjs b/.opencode/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.opencode/skills/impeccable/scripts/live-wrap.mjs +++ b/.opencode/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.pi/skills/impeccable/scripts/live-inject.mjs b/.pi/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.pi/skills/impeccable/scripts/live-inject.mjs +++ b/.pi/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.pi/skills/impeccable/scripts/live-wrap.mjs b/.pi/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.pi/skills/impeccable/scripts/live-wrap.mjs +++ b/.pi/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.rovodev/skills/impeccable/scripts/live-inject.mjs b/.rovodev/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.rovodev/skills/impeccable/scripts/live-inject.mjs +++ b/.rovodev/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.rovodev/skills/impeccable/scripts/live-wrap.mjs b/.rovodev/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.rovodev/skills/impeccable/scripts/live-wrap.mjs +++ b/.rovodev/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.trae-cn/skills/impeccable/scripts/live-inject.mjs b/.trae-cn/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.trae-cn/skills/impeccable/scripts/live-inject.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.trae-cn/skills/impeccable/scripts/live-wrap.mjs b/.trae-cn/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.trae-cn/skills/impeccable/scripts/live-wrap.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/.trae/skills/impeccable/scripts/live-inject.mjs b/.trae/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/.trae/skills/impeccable/scripts/live-inject.mjs +++ b/.trae/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/.trae/skills/impeccable/scripts/live-wrap.mjs b/.trae/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/.trae/skills/impeccable/scripts/live-wrap.mjs +++ b/.trae/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/package.json b/package.json index d7ae791cd..647f69d7f 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "dev": "bun run server/index.js", "preview": "bun run build && wrangler pages dev", "deploy": "bun run build && wrangler pages deploy build/", - "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-server.test.mjs", + "test": "bun test tests/build.test.js tests/detect-antipatterns.test.js && node --test tests/detect-antipatterns-fixtures.test.mjs && node --test tests/detect-antipatterns-browser.test.mjs && node --test tests/cleanup-deprecated.test.mjs && node --test tests/live-wrap.test.mjs && node --test tests/live-server.test.mjs && node --test tests/framework-fixtures.test.mjs", "prepack": "cp README.md README.repo.md && cp README.npm.md README.md", "postpack": "cp README.repo.md README.md && rm README.repo.md", "screenshot": "bun run scripts/screenshot-antipatterns.js", diff --git a/source/skills/impeccable/scripts/live-inject.mjs b/source/skills/impeccable/scripts/live-inject.mjs index 3762c9f00..03d054ae6 100644 --- a/source/skills/impeccable/scripts/live-inject.mjs +++ b/source/skills/impeccable/scripts/live-inject.mjs @@ -18,7 +18,7 @@ import path from 'node:path'; import { fileURLToPath } from 'node:url'; const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const CONFIG_PATH = path.join(__dirname, 'config.json'); +const CONFIG_PATH = process.env.IMPECCABLE_LIVE_CONFIG || path.join(__dirname, 'config.json'); const MARKER_OPEN_TEXT = 'impeccable-live-start'; const MARKER_CLOSE_TEXT = 'impeccable-live-end'; diff --git a/source/skills/impeccable/scripts/live-wrap.mjs b/source/skills/impeccable/scripts/live-wrap.mjs index cbd5d76b1..965f6a160 100644 --- a/source/skills/impeccable/scripts/live-wrap.mjs +++ b/source/skills/impeccable/scripts/live-wrap.mjs @@ -266,10 +266,13 @@ function searchDir(dir, query, seen, depth, genOpts) { } catch { /* skip unreadable files */ } } - // Then recurse into directories + // Then recurse into directories. Always skip node_modules and .git (never + // project content). dist/build/out are left to the isGeneratedFile guard so + // the includeGenerated second-pass can still find the element there and + // report `generatedMatch`. for (const entry of entries) { if (!entry.isDirectory()) continue; - if (entry.name === 'node_modules' || entry.name === '.git' || entry.name === 'dist' || entry.name === 'build') continue; + if (entry.name === 'node_modules' || entry.name === '.git') continue; const result = searchDir(path.join(dir, entry.name), query, seen, depth + 1, genOpts); if (result) return result; } diff --git a/tests/framework-fixtures.test.mjs b/tests/framework-fixtures.test.mjs new file mode 100644 index 000000000..c8dfc054b --- /dev/null +++ b/tests/framework-fixtures.test.mjs @@ -0,0 +1,177 @@ +/** + * Drives live-mode scripts against representative framework project shapes. + * + * Each fixture under tests/framework-fixtures/ is a small project tree with a + * fixture.json that declares the inject config + expected is-generated and + * wrap outcomes. The harness copies the fixture into a tmp git repo, applies + * the fixture's gitignore, and runs the live scripts against it. + * + * Run with: node --test tests/framework-fixtures.test.mjs + */ + +import { describe, it } from 'node:test'; +import assert from 'node:assert/strict'; +import { execFileSync } from 'node:child_process'; +import { cpSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'; +import { tmpdir } from 'node:os'; +import { join, dirname } from 'node:path'; +import { fileURLToPath } from 'node:url'; + +import { isGeneratedFile } from '../source/skills/impeccable/scripts/is-generated.mjs'; + +const __dirname = dirname(fileURLToPath(import.meta.url)); +const SCRIPTS_DIR = join(__dirname, '..', 'source', 'skills', 'impeccable', 'scripts'); +const FIXTURES_DIR = join(__dirname, 'framework-fixtures'); + +function listFixtures() { + return readdirSync(FIXTURES_DIR, { withFileTypes: true }) + .filter((e) => e.isDirectory()) + .map((e) => e.name); +} + +/** + * Stage a fixture into a fresh tmp git repo. Returns the tmp path + loaded + * fixture.json. Caller is responsible for cleanup. + */ +function stageFixture(name) { + const fixtureRoot = join(FIXTURES_DIR, name); + const fixture = JSON.parse(readFileSync(join(fixtureRoot, 'fixture.json'), 'utf-8')); + const gitignore = readFileSync(join(fixtureRoot, 'gitignore.txt'), 'utf-8'); + + const tmp = mkdtempSync(join(tmpdir(), 'impeccable-fixture-')); + cpSync(join(fixtureRoot, 'files'), tmp, { recursive: true }); + writeFileSync(join(tmp, '.gitignore'), gitignore); + writeFileSync(join(tmp, 'impeccable-live.config.json'), JSON.stringify(fixture.config)); + + execFileSync('git', ['init', '-q'], { cwd: tmp }); + execFileSync('git', ['config', 'user.email', 'test@example.com'], { cwd: tmp }); + execFileSync('git', ['config', 'user.name', 'Fixture'], { cwd: tmp }); + execFileSync('git', ['add', '-A'], { cwd: tmp }); + execFileSync('git', ['commit', '-qm', 'fixture'], { cwd: tmp }); + + return { tmp, fixture }; +} + +function runScript(script, args, opts = {}) { + try { + return execFileSync('node', [join(SCRIPTS_DIR, script), ...args], { + encoding: 'utf-8', + cwd: opts.cwd, + env: { ...process.env, ...(opts.env || {}) }, + }); + } catch (err) { + return { error: err.stdout?.toString() || '' , stderr: err.stderr?.toString() || '' }; + } +} + +// --------------------------------------------------------------------------- +// Tests +// --------------------------------------------------------------------------- + +for (const name of listFixtures()) { + describe(`fixture · ${name}`, () => { + it('loads fixture.json and has expected tree', () => { + const { tmp, fixture } = stageFixture(name); + try { + assert.ok(fixture.name, 'fixture has a name'); + assert.ok(Array.isArray(fixture.config.files) && fixture.config.files.length > 0); + rmSync(tmp, { recursive: true, force: true }); + } catch (err) { + rmSync(tmp, { recursive: true, force: true }); + throw err; + } + }); + + it('is-generated classifies files correctly', () => { + const { tmp, fixture } = stageFixture(name); + try { + for (const rel of fixture.sourceFiles || []) { + assert.equal( + isGeneratedFile(rel, { cwd: tmp }), + false, + `${rel} should classify as source` + ); + } + for (const rel of fixture.generatedFiles || []) { + assert.equal( + isGeneratedFile(rel, { cwd: tmp }), + true, + `${rel} should classify as generated` + ); + } + } finally { + rmSync(tmp, { recursive: true, force: true }); + } + }); + + it('live-inject --port adds the script tag to every config file', () => { + const { tmp } = stageFixture(name); + try { + const configPath = join(tmp, 'impeccable-live.config.json'); + const out = runScript('live-inject.mjs', ['--port', '9999'], { + cwd: tmp, + env: { IMPECCABLE_LIVE_CONFIG: configPath }, + }); + const result = JSON.parse(typeof out === 'string' ? out : out.error); + assert.equal(result.ok, true, 'inject succeeded'); + for (const r of result.results) { + assert.ok(r.inserted, `${r.file} got the tag (result: ${JSON.stringify(r)})`); + const body = readFileSync(join(tmp, r.file), 'utf-8'); + assert.match(body, /impeccable-live-start/); + assert.match(body, /localhost:9999\/live\.js/); + } + } finally { + rmSync(tmp, { recursive: true, force: true }); + } + }); + + it('live-inject --remove strips the script tag cleanly', () => { + const { tmp } = stageFixture(name); + try { + const configPath = join(tmp, 'impeccable-live.config.json'); + runScript('live-inject.mjs', ['--port', '9999'], { + cwd: tmp, + env: { IMPECCABLE_LIVE_CONFIG: configPath }, + }); + const out = runScript('live-inject.mjs', ['--remove'], { + cwd: tmp, + env: { IMPECCABLE_LIVE_CONFIG: configPath }, + }); + const result = JSON.parse(typeof out === 'string' ? out : out.error); + assert.equal(result.ok, true, 'remove succeeded'); + for (const r of result.results) { + const body = readFileSync(join(tmp, r.file), 'utf-8'); + assert.doesNotMatch(body, /impeccable-live-start/); + assert.doesNotMatch(body, /live\.js/); + } + } finally { + rmSync(tmp, { recursive: true, force: true }); + } + }); + + it('live-wrap routes to the expected source (or emits the expected fallback)', () => { + const { tmp, fixture } = stageFixture(name); + try { + for (const [i, wc] of (fixture.wrapCases || []).entries()) { + const flags = []; + if (wc.args.elementId) flags.push('--element-id', wc.args.elementId); + if (wc.args.classes) flags.push('--classes', wc.args.classes); + if (wc.args.tag) flags.push('--tag', wc.args.tag); + flags.push('--id', `wraptest${i}`, '--count', '3'); + + const out = runScript('live-wrap.mjs', flags, { cwd: tmp }); + const payload = typeof out === 'string' ? out : (out.error || out.stderr); + const parsed = JSON.parse(payload.trim().split('\n').pop()); + + if (wc.expectsError) { + assert.equal(parsed.error, wc.expectsError, `wrap case "${wc.name}": expected error ${wc.expectsError}, got ${JSON.stringify(parsed)}`); + } else { + assert.equal(parsed.file, wc.expectedFile, `wrap case "${wc.name}": landed in ${parsed.file}, expected ${wc.expectedFile}`); + } + } + } finally { + rmSync(tmp, { recursive: true, force: true }); + } + }); + }); +} diff --git a/tests/framework-fixtures/README.md b/tests/framework-fixtures/README.md new file mode 100644 index 000000000..f29164a06 --- /dev/null +++ b/tests/framework-fixtures/README.md @@ -0,0 +1,43 @@ +# Framework fixtures + +Representative project shapes for exercising live mode against different framework conventions. Each fixture is a small directory tree that the test harness copies into a temp git repo, then drives `live-inject.mjs`, `live-wrap.mjs`, `live-accept.mjs`, and `is-generated.mjs` against. + +## Layout + +``` +/ + files/ project tree the test copies into tmp + gitignore.txt becomes .gitignore in tmp (so we can commit the real files here) + fixture.json config + expected results the test consumes +``` + +`fixture.json` schema: + +```json +{ + "name": "human-readable label", + "config": { ...contents for live-inject.mjs config.json ... }, + "sourceFiles": ["paths that is-generated should classify as source (false)"], + "generatedFiles": ["paths that is-generated should classify as generated (true)"], + "wrapCases": [ + { + "name": "description", + "args": { "classes": "...", "tag": "...", "elementId": "..." }, + "expectedFile": "where wrap should land (relative to fixture root)", + "expectsError": "optional error code, e.g. element_not_in_source" + } + ] +} +``` + +## Current fixtures + +| Fixture | Shape | +|---|---| +| `vite-react/` | Tracked `index.html` shell + `src/App.jsx`. Inject into the shell. | +| `nextjs-app/` | `app/layout.tsx` as JSX inject target (commentSyntax `jsx`). | +| `astro/` | `src/layouts/Layout.astro` as inject target. HTML comments. | +| `sveltekit/` | `src/app.html` shell + `src/routes/+page.svelte`. | +| `multipage-with-generator/` | `src/` tracked, `dist/` gitignored. Exercises the is-generated guard and `element_not_in_source` fallback. | + +Add new fixtures by cloning a directory, swapping files, and updating `fixture.json`. diff --git a/tests/framework-fixtures/astro/files/src/layouts/Layout.astro b/tests/framework-fixtures/astro/files/src/layouts/Layout.astro new file mode 100644 index 000000000..3253ff876 --- /dev/null +++ b/tests/framework-fixtures/astro/files/src/layouts/Layout.astro @@ -0,0 +1,14 @@ +--- +export interface Props { title: string } +const { title } = Astro.props; +--- + + + + + {title} + + + + + diff --git a/tests/framework-fixtures/astro/files/src/pages/index.astro b/tests/framework-fixtures/astro/files/src/pages/index.astro new file mode 100644 index 000000000..18c0ddd32 --- /dev/null +++ b/tests/framework-fixtures/astro/files/src/pages/index.astro @@ -0,0 +1,13 @@ +--- +import Layout from '../layouts/Layout.astro'; +--- + +
    +

    Astro Fixture

    +

    Minimal Astro tree for live-mode tests.

    +
    +
    One
    +
    Two
    +
    +
    +     diff --git a/tests/framework-fixtures/astro/fixture.json b/tests/framework-fixtures/astro/fixture.json new file mode 100644 index 000000000..9ee263f70 --- /dev/null +++ b/tests/framework-fixtures/astro/fixture.json @@ -0,0 +1,17 @@ +{ + "name": "Astro", + "config": { + "files": ["src/layouts/Layout.astro"], + "insertBefore": "", + "commentSyntax": "html" + }, + "sourceFiles": ["src/layouts/Layout.astro", "src/pages/index.astro"], + "generatedFiles": [], + "wrapCases": [ + { + "name": "wraps hero title in page source", + "args": { "classes": "hero-title", "tag": "h1" }, + "expectedFile": "src/pages/index.astro" + } + ] +} diff --git a/tests/framework-fixtures/astro/gitignore.txt b/tests/framework-fixtures/astro/gitignore.txt new file mode 100644 index 000000000..ddce69b68 --- /dev/null +++ b/tests/framework-fixtures/astro/gitignore.txt @@ -0,0 +1,3 @@ +node_modules/ +dist/ +.astro/ diff --git a/tests/framework-fixtures/multipage-with-generator/files/src/template.js b/tests/framework-fixtures/multipage-with-generator/files/src/template.js new file mode 100644 index 000000000..2e9f66b56 --- /dev/null +++ b/tests/framework-fixtures/multipage-with-generator/files/src/template.js @@ -0,0 +1,8 @@ +// Pretend generator: reads source content, writes HTML into dist/. +// Not executed by the test — it only exists so the fixture has a "source" +// that the agent could reason about when picking where to write variants. +export function render(title, body) { + return ` +${title} +${body}`; +} diff --git a/tests/framework-fixtures/multipage-with-generator/fixture.json b/tests/framework-fixtures/multipage-with-generator/fixture.json new file mode 100644 index 000000000..a031b0496 --- /dev/null +++ b/tests/framework-fixtures/multipage-with-generator/fixture.json @@ -0,0 +1,17 @@ +{ + "name": "Multi-page static with generator", + "config": { + "files": ["dist/index.html", "dist/docs/one.html"], + "insertBefore": "", + "commentSyntax": "html" + }, + "sourceFiles": ["src/template.js"], + "generatedFiles": ["dist/index.html", "dist/docs/one.html"], + "wrapCases": [ + { + "name": "refuses to wrap inside a generated dist page", + "args": { "classes": "hero-title", "tag": "h1" }, + "expectsError": "element_not_in_source" + } + ] +} diff --git a/tests/framework-fixtures/multipage-with-generator/gitignore.txt b/tests/framework-fixtures/multipage-with-generator/gitignore.txt new file mode 100644 index 000000000..b94707787 --- /dev/null +++ b/tests/framework-fixtures/multipage-with-generator/gitignore.txt @@ -0,0 +1,2 @@ +node_modules/ +dist/ diff --git a/tests/framework-fixtures/nextjs-app/files/app/layout.tsx b/tests/framework-fixtures/nextjs-app/files/app/layout.tsx new file mode 100644 index 000000000..8c02b1b4f --- /dev/null +++ b/tests/framework-fixtures/nextjs-app/files/app/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { title: 'Next Fixture' }; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + {children} + + ); +} diff --git a/tests/framework-fixtures/nextjs-app/files/app/page.tsx b/tests/framework-fixtures/nextjs-app/files/app/page.tsx new file mode 100644 index 000000000..6604e62df --- /dev/null +++ b/tests/framework-fixtures/nextjs-app/files/app/page.tsx @@ -0,0 +1,12 @@ +export default function Page() { + return ( +
    +

    Next Fixture

    +

    Minimal App Router tree for live-mode tests.

    +
    +
    One
    +
    Two
    +
    +
    + ); +} diff --git a/tests/framework-fixtures/nextjs-app/fixture.json b/tests/framework-fixtures/nextjs-app/fixture.json new file mode 100644 index 000000000..c48d85fab --- /dev/null +++ b/tests/framework-fixtures/nextjs-app/fixture.json @@ -0,0 +1,17 @@ +{ + "name": "Next.js (App Router)", + "config": { + "files": ["app/layout.tsx"], + "insertBefore": "", + "commentSyntax": "jsx" + }, + "sourceFiles": ["app/layout.tsx", "app/page.tsx"], + "generatedFiles": [], + "wrapCases": [ + { + "name": "wraps hero title in source TSX", + "args": { "classes": "hero-title", "tag": "h1" }, + "expectedFile": "app/page.tsx" + } + ] +} diff --git a/tests/framework-fixtures/nextjs-app/gitignore.txt b/tests/framework-fixtures/nextjs-app/gitignore.txt new file mode 100644 index 000000000..7c8ed2342 --- /dev/null +++ b/tests/framework-fixtures/nextjs-app/gitignore.txt @@ -0,0 +1,3 @@ +node_modules/ +.next/ +out/ diff --git a/tests/framework-fixtures/sveltekit/files/src/app.html b/tests/framework-fixtures/sveltekit/files/src/app.html new file mode 100644 index 000000000..86314eb6e --- /dev/null +++ b/tests/framework-fixtures/sveltekit/files/src/app.html @@ -0,0 +1,11 @@ + + + + + SvelteKit Fixture + %sveltekit.head% + + +
    %sveltekit.body%
    + + diff --git a/tests/framework-fixtures/sveltekit/files/src/routes/+page.svelte b/tests/framework-fixtures/sveltekit/files/src/routes/+page.svelte new file mode 100644 index 000000000..71c48e933 --- /dev/null +++ b/tests/framework-fixtures/sveltekit/files/src/routes/+page.svelte @@ -0,0 +1,8 @@ +
    +

    SvelteKit Fixture

    +

    Minimal SvelteKit route for live-mode tests.

    +
    +
    One
    +
    Two
    +
    +
    diff --git a/tests/framework-fixtures/sveltekit/fixture.json b/tests/framework-fixtures/sveltekit/fixture.json new file mode 100644 index 000000000..8e25e59d4 --- /dev/null +++ b/tests/framework-fixtures/sveltekit/fixture.json @@ -0,0 +1,17 @@ +{ + "name": "SvelteKit", + "config": { + "files": ["src/app.html"], + "insertBefore": "", + "commentSyntax": "html" + }, + "sourceFiles": ["src/app.html", "src/routes/+page.svelte"], + "generatedFiles": [], + "wrapCases": [ + { + "name": "wraps hero title in route source", + "args": { "classes": "hero-title", "tag": "h1" }, + "expectedFile": "src/routes/+page.svelte" + } + ] +} diff --git a/tests/framework-fixtures/sveltekit/gitignore.txt b/tests/framework-fixtures/sveltekit/gitignore.txt new file mode 100644 index 000000000..31fda85b7 --- /dev/null +++ b/tests/framework-fixtures/sveltekit/gitignore.txt @@ -0,0 +1,3 @@ +node_modules/ +.svelte-kit/ +build/ diff --git a/tests/framework-fixtures/vite-react/files/index.html b/tests/framework-fixtures/vite-react/files/index.html new file mode 100644 index 000000000..5ede06283 --- /dev/null +++ b/tests/framework-fixtures/vite-react/files/index.html @@ -0,0 +1,11 @@ + + + + + Vite React Fixture + + +
    + + + diff --git a/tests/framework-fixtures/vite-react/files/src/App.jsx b/tests/framework-fixtures/vite-react/files/src/App.jsx new file mode 100644 index 000000000..46e2a9d79 --- /dev/null +++ b/tests/framework-fixtures/vite-react/files/src/App.jsx @@ -0,0 +1,12 @@ +export default function App() { + return ( +
    +

    Vite Fixture

    +

    Minimal React tree for live-mode tests.

    +
    +
    One
    +
    Two
    +
    +
    + ); +} diff --git a/tests/framework-fixtures/vite-react/fixture.json b/tests/framework-fixtures/vite-react/fixture.json new file mode 100644 index 000000000..2b03c4268 --- /dev/null +++ b/tests/framework-fixtures/vite-react/fixture.json @@ -0,0 +1,17 @@ +{ + "name": "Vite + React", + "config": { + "files": ["index.html"], + "insertBefore": "", + "commentSyntax": "html" + }, + "sourceFiles": ["index.html", "src/App.jsx"], + "generatedFiles": [], + "wrapCases": [ + { + "name": "wraps hero title in source JSX", + "args": { "classes": "hero-title", "tag": "h1" }, + "expectedFile": "src/App.jsx" + } + ] +} diff --git a/tests/framework-fixtures/vite-react/gitignore.txt b/tests/framework-fixtures/vite-react/gitignore.txt new file mode 100644 index 000000000..3ff38cc06 --- /dev/null +++ b/tests/framework-fixtures/vite-react/gitignore.txt @@ -0,0 +1,3 @@ +node_modules/ +dist/ +.vite/ From 444f88129506d4b121aa42191794714c43322bb6 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 21 Apr 2026 22:43:35 -0700 Subject: [PATCH 054/125] fix(test): un-ignore fixture dist/ trees so they actually track MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Top-level .gitignore excludes dist/ broadly, which silently dropped the multipage-with-generator fixture's files/dist/*.html from the previous commit. The fixture tests need those files on disk to copy into the tmp repo and assert is-generated behavior — without them, the test suite fails on a fresh clone. Added a negation pattern that re-includes tests/framework-fixtures/**/dist/ paths. The real dist/ output directories elsewhere in the repo remain ignored. Co-Authored-By: Claude Opus 4.7 (1M context) --- .gitignore | 5 +++++ .../multipage-with-generator/files/dist/docs/one.html | 8 ++++++++ .../multipage-with-generator/files/dist/index.html | 8 ++++++++ 3 files changed, 21 insertions(+) create mode 100644 tests/framework-fixtures/multipage-with-generator/files/dist/docs/one.html create mode 100644 tests/framework-fixtures/multipage-with-generator/files/dist/index.html diff --git a/.gitignore b/.gitignore index 9dc8a9d27..59a14bf60 100644 --- a/.gitignore +++ b/.gitignore @@ -9,6 +9,11 @@ package-lock.json dist/ build/ +# Test fixtures simulate "generated dist" trees; keep them tracked so tests +# can copy them into tmp git repos and assert is-generated behavior. +!tests/framework-fixtures/**/dist/ +!tests/framework-fixtures/**/dist/** + # Build artifacts *.log diff --git a/tests/framework-fixtures/multipage-with-generator/files/dist/docs/one.html b/tests/framework-fixtures/multipage-with-generator/files/dist/docs/one.html new file mode 100644 index 000000000..95549168e --- /dev/null +++ b/tests/framework-fixtures/multipage-with-generator/files/dist/docs/one.html @@ -0,0 +1,8 @@ + +Docs · One + +
    +

    Docs One

    +

    Generated docs page.

    +
    + diff --git a/tests/framework-fixtures/multipage-with-generator/files/dist/index.html b/tests/framework-fixtures/multipage-with-generator/files/dist/index.html new file mode 100644 index 000000000..a7b10c3dd --- /dev/null +++ b/tests/framework-fixtures/multipage-with-generator/files/dist/index.html @@ -0,0 +1,8 @@ + +Home + +
    +

    Home

    +

    Generated homepage.

    +
    + From d5480caee3d2b4a0e95abbd5796d82bdd05eb19c Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Tue, 21 Apr 2026 23:41:11 -0700 Subject: [PATCH 055/125] feat(live): CSP detection + consent-gated patch flow at first-time setup MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Real-world tests (EAC Next turborepo) confirmed that CSP is the common blocker for live mode. Adds setup-time detection with a one-time user consent flow — the patch becomes a permanent, dev-guarded entry in the user's own config, not a transient add/remove. ## Changes - New detect-csp.mjs helper: grep-based classifier returning { shape, signals }. Shape is one of: - "shared-helper" (monorepo CSP helper with additional*Src arrays) - "inline-headers" (literal CSP string in headers()) - "middleware" (response.headers.set in middleware.ts; detect-only v1) - "meta-tag" (; detect-only v1) - null (no CSP) Max depth 6, skips node_modules / build / cache dirs, 64KB per file. - cspChecked boolean on config.json. First-run setup runs detection; subsequent runs skip. Users re-trigger by deleting the flag. Validator accepts it. - Skill live.md gains: - CSP detection step in first-time setup (gated by cspChecked) - Consent-prompt template (so every agent phrases it the same way) - Shape 1 patch template: append `...__impeccableLiveDev` to additionalScriptSrc/additionalConnectSrc in the app's config - Shape 2 patch template: two-point edit — declare a dev-only variable, interpolate into script-src and connect-src in the CSP literal string - Troubleshooting note for "said no but now live doesn't work" ## Fixtures - nextjs-turborepo/: Turborepo shape (shared CSP helper with additionalScriptSrc options). Sanitized from a real monorepo so the patch mechanics get tested against realistic layering. Includes expected-after-patch.ts for human/agent review. - nextjs-inline-csp/: app-level next.config.js with a literal CSP string. Includes expected-after-patch.js showing the Shape 2 edit. ## Tests Framework-fixture harness extended with a detect-csp shape-classification assertion per fixture. 42 tests across 7 fixtures pass. Clean fixtures (vite-react, nextjs-app, astro, sveltekit, multipage-with-generator) correctly return shape: null. ## Deliberately not doing - No patches[] array, no marker-based rollback, no add/remove lifecycle. The patch is a permanent dev-guarded config line — the same kind of edit a user would make themselves. - No base URL rewriting or proxy mechanism. Script tag still points at localhost:8400; CSP permits it once patched. No browser-side changes. Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .claude/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .cursor/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .gemini/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .github/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .kiro/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .opencode/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .pi/skills/impeccable/reference/live.md | 78 ++++- .pi/skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .pi/skills/impeccable/scripts/live-inject.mjs | 3 + .rovodev/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .trae-cn/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + .trae/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + source/skills/impeccable/reference/live.md | 78 ++++- .../skills/impeccable/scripts/detect-csp.mjs | 167 ++++++++++ .../skills/impeccable/scripts/live-inject.mjs | 3 + tests/framework-fixtures.test.mjs | 16 + tests/framework-fixtures/README.md | 12 +- .../nextjs-inline-csp/expected-after-patch.js | 33 ++ .../nextjs-inline-csp/files/app/layout.tsx | 19 ++ .../nextjs-inline-csp/files/next.config.js | 23 ++ .../nextjs-inline-csp/fixture.json | 21 ++ .../nextjs-inline-csp/gitignore.txt | 3 + .../nextjs-turborepo/expected-after-patch.ts | 48 +++ .../files/apps/web/app/layout.tsx | 19 ++ .../files/apps/web/next.config.ts | 39 +++ .../packages/shared/src/next-config/index.ts | 287 ++++++++++++++++++ .../packages/shared/src/security/origins.ts | 82 +++++ .../nextjs-turborepo/fixture.json | 32 ++ .../nextjs-turborepo/gitignore.txt | 4 + 50 files changed, 3601 insertions(+), 13 deletions(-) create mode 100644 .agents/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .claude/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .cursor/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .gemini/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .github/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .kiro/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .opencode/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .pi/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .rovodev/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .trae-cn/skills/impeccable/scripts/detect-csp.mjs create mode 100644 .trae/skills/impeccable/scripts/detect-csp.mjs create mode 100644 source/skills/impeccable/scripts/detect-csp.mjs create mode 100644 tests/framework-fixtures/nextjs-inline-csp/expected-after-patch.js create mode 100644 tests/framework-fixtures/nextjs-inline-csp/files/app/layout.tsx create mode 100644 tests/framework-fixtures/nextjs-inline-csp/files/next.config.js create mode 100644 tests/framework-fixtures/nextjs-inline-csp/fixture.json create mode 100644 tests/framework-fixtures/nextjs-inline-csp/gitignore.txt create mode 100644 tests/framework-fixtures/nextjs-turborepo/expected-after-patch.ts create mode 100644 tests/framework-fixtures/nextjs-turborepo/files/apps/web/app/layout.tsx create mode 100644 tests/framework-fixtures/nextjs-turborepo/files/apps/web/next.config.ts create mode 100644 tests/framework-fixtures/nextjs-turborepo/files/packages/shared/src/next-config/index.ts create mode 100644 tests/framework-fixtures/nextjs-turborepo/files/packages/shared/src/security/origins.ts create mode 100644 tests/framework-fixtures/nextjs-turborepo/fixture.json create mode 100644 tests/framework-fixtures/nextjs-turborepo/gitignore.txt diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index 968b7ef5f..c2359bd8b 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -291,10 +291,13 @@ Schema: { "files": ["", "", ...], "insertBefore": "", - "commentSyntax": "html" + "commentSyntax": "html", + "cspChecked": true } ``` +`cspChecked` tracks whether the CSP detection step below has already run. Absent on first setup; set to `true` after CSP is checked (whether patched, declined, or not needed). + `files` is the inject target — **the HTML files the browser actually loads**, not necessarily source. Tracked or generated doesn't matter here; wrap has its own generated-file guard and routes accepts through the fallback flow. | Framework | `files` | `insertBefore` | `commentSyntax` | @@ -311,4 +314,77 @@ Pick an anchor that exists in every file (`` almost always works). Use `i For multi-page sites whose pages are *rebuilt* by a generator (Astro, static-site generators, custom scripts like `build-sub-pages.js`), the inject survives only until the next regeneration. Re-run `live.mjs` after each build. Accept is unaffected — it writes to true source via the fallback flow. +### CSP detection (first-time only) + +If `config.cspChecked === true`, skip this entire section. You already asked this user once; the answer sticks. + +Otherwise, run the detection helper: + +```bash +node {{scripts_path}}/detect-csp.mjs +``` + +Output: `{ shape, signals }` where `shape` is one of `shared-helper`, `inline-headers`, `middleware`, `meta-tag`, or `null`. + +- **`null`** — no CSP; skip to writing `config.json` with `cspChecked: true`. +- **`shared-helper`** — monorepo with a CSP builder that accepts `additionalScriptSrc` / `additionalConnectSrc` arrays. Auto-patchable. See *Shape 1* below. +- **`inline-headers`** — CSP built as a literal string inside `next.config.*` (or equivalent) `headers()`. Auto-patchable. See *Shape 2* below. +- **`middleware`** or **`meta-tag`** — rarer. Detected but not auto-patched in v1. Show the user the detected files and ask them to add `http://localhost:8400` to `script-src` and `connect-src` manually, then mark `cspChecked: true` and proceed. + +#### Consent prompt template + +Use this phrasing so the experience is consistent across agents: + +> **CSP patch needed.** I detected a Content Security Policy in your project that blocks `http://localhost:8400` — the live picker won't load without an allowance. Here's the change I'd make: +> +> ```diff +> [file: ] +> [exact diff, 2–5 lines] +> ``` +> +> It's guarded by `NODE_ENV === "development"` so the extra entry only appears in dev and never reaches production. You can remove it any time by reverting this file. Apply? [y/n] + +On "no": skip the patch, mention live won't work until the user adds the allowance manually, still write `cspChecked: true` (the question's been asked). + +On "yes": apply the Shape-specific patch below, then write `cspChecked: true`. + +#### Shape 1 — shared helper with `additional*Src` arrays + +The app config calls something like `createBaseNextConfig({ additionalScriptSrc: [...], additionalConnectSrc: [...] })`. Patch the *app's* config (not the shared helper) so the monorepo root stays clean. Add near the top of the app's `next.config.ts`: + +```ts +// Dev-only allowance so impeccable live mode can load. Guarded by NODE_ENV. +const __impeccableLiveDev = + process.env.NODE_ENV === "development" ? ["http://localhost:8400"] : []; +``` + +Append `...__impeccableLiveDev` to both `additionalScriptSrc` and `additionalConnectSrc` array options. + +Idempotency: if `__impeccableLiveDev` already exists in the file, the patch is already applied; skip asking and just mark `cspChecked: true`. + +See `tests/framework-fixtures/nextjs-turborepo/expected-after-patch.ts` for the full desired output. + +#### Shape 2 — inline CSP string in `headers()` + +A literal CSP string inside a `headers()` function or return value. Two-point patch: declare a dev-only variable near the top, interpolate it into the CSP string at the `script-src` and `connect-src` segments. + +```ts +const __impeccableLiveDev = + process.env.NODE_ENV === "development" ? " http://localhost:8400" : ""; +``` + +Then, inside the CSP value string: +- `script-src 'self' 'unsafe-inline'` → `script-src 'self' 'unsafe-inline'${__impeccableLiveDev}` +- `connect-src 'self'` → `connect-src 'self'${__impeccableLiveDev}` + +(Leading space on the dev string so it concatenates cleanly into the existing value.) + +Read the current file, locate the exact CSP string, quote the two directive edits in the consent prompt, write after confirmation. + +See `tests/framework-fixtures/nextjs-inline-csp/expected-after-patch.js` for the full desired output. + +### Troubleshooting + +If a user says "no" to the CSP patch at setup time and later complains that live doesn't work: their dev CSP blocks `http://localhost:8400`. Fix: delete `cspChecked` from `config.json` and re-run `live.mjs` — setup will ask again. + Then re-run `live.mjs`. diff --git a/.agents/skills/impeccable/scripts/detect-csp.mjs b/.agents/skills/impeccable/scripts/detect-csp.mjs new file mode 100644 index 000000000..7f7fa3354 --- /dev/null +++ b/.agents/skills/impeccable/scripts/detect-csp.mjs @@ -0,0 +1,167 @@ +/** + * Scan a project tree for Content-Security-Policy signals and classify the + * shape so the agent knows which patch template to propose. + * + * Used at first-time `live.mjs` setup. Mechanical (grep-based) — no network, + * no dev server, no JS evaluation. The classification drives a user-facing + * consent prompt; the agent does the actual patch writing. + * + * Shape taxonomy: + * - "shared-helper": monorepo with a `createBaseNextConfig`-style helper + * that accepts `additionalScriptSrc`/`additionalConnectSrc` + * arrays. Patch the app's config to append a dev-only + * localhost entry to those arrays. + * - "inline-headers": Content-Security-Policy built inline in a Next/Nuxt/ + * SvelteKit config's headers() function with a literal + * value string. Patch the CSP string in place. + * - "middleware": CSP set in middleware.{ts,js}. Detected but not + * auto-patched in v1. + * - "meta-tag": in layout + * files. Detected but not auto-patched in v1. + * - null: no CSP signals found; no patch needed. + */ + +import fs from 'node:fs'; +import path from 'node:path'; + +const SKIP_DIRS = new Set([ + 'node_modules', + '.git', + '.next', + '.turbo', + '.svelte-kit', + '.nuxt', + '.astro', + 'dist', + 'build', + 'out', + '.vercel', +]); + +const SCAN_EXTS = new Set(['.js', '.mjs', '.cjs', '.ts', '.mts', '.cts', '.tsx', '.jsx']); +const LAYOUT_EXTS = new Set(['.tsx', '.jsx', '.astro', '.vue', '.svelte', '.html']); +const MAX_DEPTH = 6; +const MAX_READ_BYTES = 64 * 1024; + +const SHARED_HELPER_SIGNALS = [ + /\bbuildCSPConfig\b/, + /\bbuildSecurityHeaders\b/, + /\badditionalScriptSrc\b/, + /\badditionalConnectSrc\b/, + /\bcreateBaseNextConfig\b/, +]; + +const INLINE_HEADER_SIGNALS = [ + /["']Content-Security-Policy["']/i, + /\bscript-src\b/, + /\bconnect-src\b/, +]; + +const MIDDLEWARE_HINT = /headers\.set\(\s*["']Content-Security-Policy["']/i; +const META_TAG_HINT = /http-equiv\s*=\s*["']Content-Security-Policy["']/i; + +/** + * @param {string} cwd Project root. + * @returns {{ shape: string|null, signals: string[] }} + */ +export function detectCsp(cwd = process.cwd()) { + const hits = { sharedHelper: [], inlineHeader: [], middleware: [], metaTag: [] }; + + walk(cwd, cwd, 0, (absPath, relPath, body) => { + const ext = path.extname(absPath); + const base = path.basename(absPath).toLowerCase(); + + // Shared helper: package exports, config factory + if (SCAN_EXTS.has(ext)) { + const matched = SHARED_HELPER_SIGNALS.some((re) => re.test(body)); + const looksShared = /packages\/[^/]+\/src\/.*(config|next-config|security)/.test(relPath); + if (matched && looksShared) { + hits.sharedHelper.push(relPath); + } + } + + // Inline headers: Next/Nuxt/SvelteKit/Astro/Vite config files + if (SCAN_EXTS.has(ext) && /(^|\/)(next|nuxt|vite|astro|svelte)\.config\./.test(relPath)) { + const allInlineMatch = INLINE_HEADER_SIGNALS.every((re) => re.test(body)); + if (allInlineMatch) { + hits.inlineHeader.push(relPath); + } + } + + // Middleware CSP: middleware.{ts,js} at project root or app/ + if ((base === 'middleware.ts' || base === 'middleware.js' || base === 'middleware.mjs') && + MIDDLEWARE_HINT.test(body)) { + hits.middleware.push(relPath); + } + + // Meta tag CSP: layouts / HTML files + if (LAYOUT_EXTS.has(ext) && META_TAG_HINT.test(body)) { + hits.metaTag.push(relPath); + } + }); + + // Classification priority: shared-helper > inline-headers > middleware > meta-tag. + // A monorepo with a shared helper is always that shape, even if an individual + // app file also happens to contain a CSP literal. + if (hits.sharedHelper.length > 0) { + return { + shape: 'shared-helper', + signals: hits.sharedHelper, + }; + } + if (hits.inlineHeader.length > 0) { + return { + shape: 'inline-headers', + signals: hits.inlineHeader, + }; + } + if (hits.middleware.length > 0) { + return { + shape: 'middleware', + signals: hits.middleware, + }; + } + if (hits.metaTag.length > 0) { + return { + shape: 'meta-tag', + signals: hits.metaTag, + }; + } + return { shape: null, signals: [] }; +} + +function walk(root, dir, depth, visit) { + if (depth > MAX_DEPTH) return; + let entries; + try { entries = fs.readdirSync(dir, { withFileTypes: true }); } + catch { return; } + + for (const entry of entries) { + const abs = path.join(dir, entry.name); + if (entry.isDirectory()) { + if (SKIP_DIRS.has(entry.name)) continue; + walk(root, abs, depth + 1, visit); + continue; + } + if (!entry.isFile()) continue; + const ext = path.extname(entry.name); + if (!SCAN_EXTS.has(ext) && !LAYOUT_EXTS.has(ext)) continue; + let body; + try { + const fd = fs.openSync(abs, 'r'); + try { + const buf = Buffer.alloc(MAX_READ_BYTES); + const n = fs.readSync(fd, buf, 0, MAX_READ_BYTES, 0); + body = buf.slice(0, n).toString('utf-8'); + } finally { fs.closeSync(fd); } + } catch { continue; } + visit(abs, path.relative(root, abs), body); + } +} + +// CLI mode +const _running = process.argv[1]; +if (_running?.endsWith('detect-csp.mjs') || _running?.endsWith('detect-csp.mjs/')) { + const result = detectCsp(process.cwd()); + console.log(JSON.stringify(result, null, 2)); +} diff --git a/.agents/skills/impeccable/scripts/live-inject.mjs b/.agents/skills/impeccable/scripts/live-inject.mjs index 03d054ae6..0a08e0a7f 100644 --- a/.agents/skills/impeccable/scripts/live-inject.mjs +++ b/.agents/skills/impeccable/scripts/live-inject.mjs @@ -126,6 +126,9 @@ function validateConfig(cfg) { if (cfg.commentSyntax !== 'html' && cfg.commentSyntax !== 'jsx') { throw new Error("config.commentSyntax must be 'html' or 'jsx'"); } + if (cfg.cspChecked !== undefined && typeof cfg.cspChecked !== 'boolean') { + throw new Error("config.cspChecked, if present, must be a boolean"); + } } function commentOpen(syntax) { return syntax === 'jsx' ? '{/*' : ' +
    +
    +

    original text

    +
    + block should also be treated as a + // single skipped unit; the line has both open and close tags. + it('finds the accepted variant after a single-line block', () => { + const html = ` + +
    +

    original

    + +

    variant one

    +

    variant two

    +

    variant three

    +
    + +`; + writeFileSync(join(tmp, 'page.html'), html); + + const result = runAccept(tmp, ['--id', 'ONELINE', '--variant', '3']); + assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`); + + const after = readFileSync(join(tmp, 'page.html'), 'utf-8'); + assert.ok(after.includes('data-impeccable-variant="3"'), 'accepted wrapper for variant 3 present'); + assert.ok(after.includes('variant three'), 'variant 3 content kept'); + assert.ok(!after.includes('variant two'), 'other variant content dropped'); + }); + + // Baseline: the standard multi-line case must keep working. + it('finds the accepted variant after a multi-line block (regression baseline)', () => { + const html = ` + +
    +

    original

    + +

    variant one

    +

    variant two

    +
    + +`; + writeFileSync(join(tmp, 'page.html'), html); + + const result = runAccept(tmp, ['--id', 'MULTI', '--variant', '1']); + assert.equal(result.handled, true, `accept should succeed: ${JSON.stringify(result)}`); + + const after = readFileSync(join(tmp, 'page.html'), 'utf-8'); + assert.ok(after.includes('data-impeccable-variant="1"'), 'accepted wrapper for variant 1 present'); + assert.ok(after.includes('variant one'), 'variant 1 content kept'); + }); + + // Discard must restore the original element after a self-closing +
    +
    +

    Work with me.

    + /// +

    Built by Renaissance Geek · Rollouts · Integrations · Training · Say hello

    +
    +
    +
    +
    +

    Work with me.

    +

    Rollouts, integrations, and training for teams that take AI-generated design seriously.

    +

    Impeccable is built by Renaissance Geek. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    +
    +
    +
    +
    + Work + with + me. +
    +
    + Consulting · Renaissance Geek +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    +
    +
    +
    diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index dff4aa616..4eea9a860 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -1364,19 +1364,39 @@ scrollLockRaf = requestAnimationFrame(correct); }; - scrollLockObserver = new MutationObserver(schedule); + // Filter to mutations that touch our session's wrapper. Watching the + // whole body means shader animations, HMR indicators, tooltips, and + // every other DOM change elsewhere on the page fires corrections — + // which fight the user on scroll. + scrollLockObserver = new MutationObserver((mutations) => { + for (const m of mutations) { + if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { + schedule(); + return; + } + for (const n of m.addedNodes) { + if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { + schedule(); + return; + } + } + } + }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: update the target - // top to wherever the element is now, so we don't fight the user. + // Treat explicit user scroll intent as a re-anchor: cancel any pending + // correction, then update the target top to the element's new position + // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); + window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); window.addEventListener('keydown', (e) => { if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); From 1e533e535aa2f980413a9eb57c1608cd04a48d21 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:20:51 -0700 Subject: [PATCH 072/125] fix(live): disable browser overflow-anchor during session, always correct MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two things were wrong. First, I capped large corrections — which was backwards: a huge delta is exactly when we most need to restore (it means the browser's own scroll anchoring drifted, which is what makes the page 'jump to Get Started' when Bun's HMR destroys and re-inserts our target). Remove the cap so any delta is corrected. Second, the browser's built-in scroll anchoring was competing with us: when Bun destroys our target element, the browser picks the nearest surviving element (like a CTA anchor in another section) as its new scroll anchor and scrolls to keep THAT stable. Disable overflow-anchor on html and body for the duration of the session so we own scroll entirely; restore the original values on stopScrollLock. Kept the user-scroll grace window (400ms): wheel / touch / arrow keys re-anchor and suppress corrections, so momentum scrolls don't get fought. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .pi/skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- .../skills/impeccable/scripts/live-browser.js | 38 ++- public/index.html | 264 +++++++++++------- .../skills/impeccable/scripts/live-browser.js | 38 ++- 13 files changed, 578 insertions(+), 142 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; diff --git a/public/index.html b/public/index.html index bcddf0b88..9f88cfe71 100644 --- a/public/index.html +++ b/public/index.html @@ -719,8 +719,9 @@
    - -
    + + +
    @@ -729,143 +730,171 @@
    -
    -

    Work with me.

    - /// -

    Built by Renaissance Geek · Rollouts · Integrations · Training · Say hello

    +
    + Transmission · 001 + Consulting +
    +

    Work with me.

    +
      +
    • 01Enterprise rollouts
      • +
    • 02Custom integrations
      • +
    • 03Team training for designers and developers
      • +
    +

    Impeccable is built by Renaissance Geek. If you're a frontier lab, design tool company, or enterprise team, let's talk.

    -

    Work with me.

    -

    Rollouts, integrations, and training for teams that take AI-generated design seriously.

    -

    Impeccable is built by Renaissance Geek. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    RG
    +
    + Consulting · Renaissance Geek +

    Work with me on the design side of AI.

    +

    I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    -
    - Work - with - me. -
    -
    - Consulting · Renaissance Geek -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +

    Work with me

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    + Consulting + Renaissance Geek · v3.0
    - + +
    diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 4eea9a860..c3b293fe7 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -1349,15 +1349,45 @@ try { history.scrollRestoration = 'manual'; } catch {} + // Disable browser scroll anchoring on root elements during the session. + // When Bun's HMR destroys our target element and re-inserts it, the + // browser picks a different anchor nearby (often the wrong one — Get + // Started, say) and scrolls the page to keep THAT stable. We want to + // own scroll ourselves, so turn it off while we're active. + const prevHtmlAnchor = document.documentElement.style.overflowAnchor; + const prevBodyAnchor = document.body.style.overflowAnchor; + document.documentElement.style.overflowAnchor = 'none'; + document.body.style.overflowAnchor = 'none'; + + // Grace window after any user-scroll intent: suppress corrections so + // momentum scrolls can't be yanked back by a mutation firing mid-scroll. + let lastUserScrollAt = 0; + const USER_SCROLL_GRACE_MS = 400; + const correct = () => { scrollLockRaf = null; if (scrollLockTargetTop == null) return; const el = resolveScrollLockTarget(sessionId); if (!el) return; - const delta = el.getBoundingClientRect().top - scrollLockTargetTop; - if (Math.abs(delta) > 0.5) { - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { + // User just scrolled — just re-anchor and let them be. + scrollLockTargetTop = el.getBoundingClientRect().top; + return; } + const currentTop = el.getBoundingClientRect().top; + const delta = currentTop - scrollLockTargetTop; + if (Math.abs(delta) < 0.5) return; + // Always correct, even for huge deltas — a huge delta typically + // means the browser's anchor drifted (common with Bun's HMR + // wholesale-replace) and is exactly when we most need to restore. + window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); + }; + + // Restore overflow-anchor on stop. Stash the restorer on the abort + // controller so stopScrollLock picks it up. + const restoreAnchor = () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; }; const schedule = () => { if (scrollLockRaf != null) return; @@ -1388,8 +1418,10 @@ // correction, then update the target top to the element's new position // so we don't drag them back on the next mutation. scrollLockAbort = new AbortController(); + scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { + lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const el = resolveScrollLockTarget(sessionId); if (el) scrollLockTargetTop = el.getBoundingClientRect().top; From 565381a3e77970f2bafde820c2626e1a20335b15 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:25:40 -0700 Subject: [PATCH 073/125] fix(live): pin window.scrollY instead of element viewport top MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Element-based scroll tracking broke every time: Bun's HMR destroys the target element, the browser's scroll anchoring picks a different nearby element (e.g. the #downloads CTA) as its new anchor, and the page jumps to wherever that surviving element is. My element-based correction then computes against a replaced DOM node with stale / wrong geometry. The primitive the user actually cares about is window.scrollY — they want the page to stay where it is, regardless of which element survives the patch. Pin scrollY directly: capture it at session start, restore it on every mutation inside the wrapper, re-anchor on user scroll, store it in saveSession for reload-resume. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .pi/skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ .../skills/impeccable/scripts/live-browser.js | 121 +++------ public/index.html | 241 +----------------- .../skills/impeccable/scripts/live-browser.js | 121 +++------ 13 files changed, 437 insertions(+), 1256 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/public/index.html b/public/index.html index 9f88cfe71..0a4460c20 100644 --- a/public/index.html +++ b/public/index.html @@ -720,245 +720,14 @@ - -
    - -
    -
    -

    Work with me

    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    -
    -
    - - -
    -
    -
    - Transmission · 001 - Consulting -
    -

    Work with me.

    -
      -
    • 01Enterprise rollouts
      • -
    • 02Custom integrations
      • -
    • 03Team training for designers and developers
      • -
    -

    Impeccable is built by Renaissance Geek. If you're a frontier lab, design tool company, or enterprise team, let's talk.

    -
    -
    -
    -
    -
    RG
    -
    - Consulting · Renaissance Geek -

    Work with me on the design side of AI.

    -

    I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    -
    -
    -
    -
    -
    -

    Work with me

    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    -
    - Consulting - Renaissance Geek · v3.0 -
    -
    -
    +
    +

    Work with me

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    - + + diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index c3b293fe7..4e090f978 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -91,11 +91,11 @@ let selectedAction = 'impeccable'; let selectedCount = 3; - // Scroll lock — holds the selected element at a fixed viewport-top while - // the session is active, so HMR DOM patches and variant swaps don't drift - // the page. See startScrollLock / stopScrollLock below. + // Scroll lock — holds window.scrollY at a fixed value while the session is + // active, so HMR DOM patches and variant swaps can't drift the page. See + // startScrollLock / stopScrollLock below. let scrollLockObserver = null; - let scrollLockTargetTop = null; + let scrollLockTargetY = null; let scrollLockRaf = null; let scrollLockAbort = null; @@ -1320,84 +1320,44 @@ return variantDiv; } - // Resolve the element whose top we want to lock: the currently-visible - // variant's content (falling back to the original), identified by - // sessionId so we survive DOM swaps that invalidate `selectedElement`. - function resolveScrollLockTarget(sessionId) { - const wrapper = sessionId - ? document.querySelector('[data-impeccable-variants="' + sessionId + '"]') - : null; - if (wrapper) { - const idx = visibleVariant > 0 ? visibleVariant : 'original'; - const el = pickVariantContent(wrapper, idx); - if (el) return el; - } - return selectedElement?.isConnected ? selectedElement : null; - } - - // Hold the resolved target at a fixed viewport-top across DOM mutations - // (HMR patches, variant inserts, variant cycle swaps). If the caller - // passes `initialTargetTop`, use it (e.g. on resume after full reload); - // otherwise capture the current target's top. - function startScrollLock(sessionId, initialTargetTop) { + // Hold window.scrollY at a fixed value across DOM mutations inside the + // session's wrapper (HMR patches, variant inserts, cycle swaps). The key + // insight: we don't care where the selected element ends up, we just + // don't want the page to jump. scrollY is a primitive that survives any + // DOM destruction; element-viewport-top is fragile when the element + // itself gets replaced. + function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); - const initial = resolveScrollLockTarget(sessionId); - if (!initial) return; - scrollLockTargetTop = typeof initialTargetTop === 'number' && isFinite(initialTargetTop) - ? initialTargetTop - : initial.getBoundingClientRect().top; + scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) + ? initialTargetY + : window.scrollY; try { history.scrollRestoration = 'manual'; } catch {} - // Disable browser scroll anchoring on root elements during the session. - // When Bun's HMR destroys our target element and re-inserts it, the - // browser picks a different anchor nearby (often the wrong one — Get - // Started, say) and scrolls the page to keep THAT stable. We want to - // own scroll ourselves, so turn it off while we're active. + // Disable the browser's own scroll anchoring during the session. Bun's + // HMR destroys and re-inserts our target element, at which point the + // browser picks a different anchor elsewhere on the page (e.g. the + // nearest #downloads CTA) and scrolls to keep THAT stable. We own + // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - // Grace window after any user-scroll intent: suppress corrections so - // momentum scrolls can't be yanked back by a mutation firing mid-scroll. - let lastUserScrollAt = 0; - const USER_SCROLL_GRACE_MS = 400; - const correct = () => { scrollLockRaf = null; - if (scrollLockTargetTop == null) return; - const el = resolveScrollLockTarget(sessionId); - if (!el) return; - if (performance.now() - lastUserScrollAt < USER_SCROLL_GRACE_MS) { - // User just scrolled — just re-anchor and let them be. - scrollLockTargetTop = el.getBoundingClientRect().top; - return; - } - const currentTop = el.getBoundingClientRect().top; - const delta = currentTop - scrollLockTargetTop; - if (Math.abs(delta) < 0.5) return; - // Always correct, even for huge deltas — a huge delta typically - // means the browser's anchor drifted (common with Bun's HMR - // wholesale-replace) and is exactly when we most need to restore. - window.scrollBy({ top: delta, left: 0, behavior: 'instant' }); - }; - - // Restore overflow-anchor on stop. Stash the restorer on the abort - // controller so stopScrollLock picks it up. - const restoreAnchor = () => { - document.documentElement.style.overflowAnchor = prevHtmlAnchor; - document.body.style.overflowAnchor = prevBodyAnchor; + if (scrollLockTargetY == null) return; + if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }; const schedule = () => { if (scrollLockRaf != null) return; scrollLockRaf = requestAnimationFrame(correct); }; - // Filter to mutations that touch our session's wrapper. Watching the - // whole body means shader animations, HMR indicators, tooltips, and - // every other DOM change elsewhere on the page fires corrections — - // which fight the user on scroll. + // Filter to mutations that touch our session's wrapper. Unrelated + // mutations (shader animations, HMR indicators, tooltips) shouldn't + // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { @@ -1414,17 +1374,16 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // Treat explicit user scroll intent as a re-anchor: cancel any pending - // correction, then update the target top to the element's new position - // so we don't drag them back on the next mutation. + // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); - scrollLockAbort.signal.addEventListener('abort', restoreAnchor, { once: true }); + scrollLockAbort.signal.addEventListener('abort', () => { + document.documentElement.style.overflowAnchor = prevHtmlAnchor; + document.body.style.overflowAnchor = prevBodyAnchor; + }, { once: true }); const sig = { signal: scrollLockAbort.signal }; const reanchor = () => { - lastUserScrollAt = performance.now(); if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } - const el = resolveScrollLockTarget(sessionId); - if (el) scrollLockTargetTop = el.getBoundingClientRect().top; + scrollLockTargetY = window.scrollY; }; window.addEventListener('wheel', reanchor, { passive: true, ...sig }); window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); @@ -1433,15 +1392,16 @@ if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); }, sig); + // Initial apply — primarily useful on resume after a true reload, + // where the browser may have landed us somewhere wrong. schedule(); - if (document.fonts?.ready) document.fonts.ready.then(schedule).catch(() => {}); } function stopScrollLock() { if (scrollLockObserver) { scrollLockObserver.disconnect(); scrollLockObserver = null; } if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } - scrollLockTargetTop = null; + scrollLockTargetY = null; } // --------------------------------------------------------------------------- @@ -2270,15 +2230,6 @@ void main() { function saveSession() { if (!currentSessionId) return; - // Capture the selected element's current viewport-relative top so we - // can restore the same framing after a reload, even if layout shifts. - let scrollAnchor = null; - try { - if (selectedElement && selectedElement.isConnected) { - const r = selectedElement.getBoundingClientRect(); - if (r.width > 0 && r.height > 0) scrollAnchor = { viewportTop: r.top }; - } - } catch {} try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2288,7 +2239,7 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollAnchor, + scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2445,7 +2396,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollAnchor?.viewportTop); + startScrollLock(currentSessionId, saved?.scrollY); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so From a6aa98c616f2f65733a61a4c18ec2e512b850771 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:28:48 -0700 Subject: [PATCH 074/125] chore(live): add diagnostic logging to scroll lock Log target-Y at Go, every mutation that triggers a correction (with the mutation type + added nodes), every correct-or-noop (with from/to/delta), every reanchor, and every external scroll event >5px. Lets us see which step is actually moving the page during wrap / variant insert. --- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .pi/skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- public/index.html | 165 +++++++++++++++++- .../skills/impeccable/scripts/live-browser.js | 65 ++++--- 13 files changed, 606 insertions(+), 339 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); diff --git a/public/index.html b/public/index.html index 0a4460c20..01750db32 100644 --- a/public/index.html +++ b/public/index.html @@ -722,10 +722,169 @@ -
    -

    Work with me

    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    + +
    + +
    +
    +

    Work with me

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    +
    +
    + + +
    +
    + Consulting +

    Work with me on enterprise rollouts, custom integrations, and training. By Renaissance Geek.

    +
    +
    +
    +
    +

    Work with me.

    +

    Impeccable is built by Renaissance Geek. Rollouts, integrations, and training for teams raising the bar on AI-generated design.

    +
    +
    +
    +
    +
    + Studio · Renaissance Geek +

    Work with me.

    +

    Frontier labs, design tool companies, enterprise teams.

    +
    +
    + Impeccable is built by Renaissance Geek. I work with teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're raising the bar on AI-generated design, let's talk. +
    +
    +
    + diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 4e090f978..844159228 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -1321,52 +1321,50 @@ } // Hold window.scrollY at a fixed value across DOM mutations inside the - // session's wrapper (HMR patches, variant inserts, cycle swaps). The key - // insight: we don't care where the selected element ends up, we just - // don't want the page to jump. scrollY is a primitive that survives any - // DOM destruction; element-viewport-top is fragile when the element - // itself gets replaced. + // session's wrapper (HMR patches, variant inserts, cycle swaps). function startScrollLock(sessionId, initialTargetY) { stopScrollLock(); scrollLockTargetY = typeof initialTargetY === 'number' && isFinite(initialTargetY) ? initialTargetY : window.scrollY; + console.log('[impeccable.scroll] startScrollLock', { sessionId, scrollY: window.scrollY, targetY: scrollLockTargetY, initialOverride: initialTargetY }); try { history.scrollRestoration = 'manual'; } catch {} - // Disable the browser's own scroll anchoring during the session. Bun's - // HMR destroys and re-inserts our target element, at which point the - // browser picks a different anchor elsewhere on the page (e.g. the - // nearest #downloads CTA) and scrolls to keep THAT stable. We own - // scroll ourselves while active. const prevHtmlAnchor = document.documentElement.style.overflowAnchor; const prevBodyAnchor = document.body.style.overflowAnchor; document.documentElement.style.overflowAnchor = 'none'; document.body.style.overflowAnchor = 'none'; - const correct = () => { + const correct = (why) => { scrollLockRaf = null; if (scrollLockTargetY == null) return; - if (Math.abs(window.scrollY - scrollLockTargetY) < 0.5) return; + const before = window.scrollY; + const delta = before - scrollLockTargetY; + if (Math.abs(delta) < 0.5) { + console.log('[impeccable.scroll] correct noop', { why, scrollY: before, targetY: scrollLockTargetY }); + return; + } window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] corrected', { why, from: before, to: scrollLockTargetY, delta, nowAt: window.scrollY }); }; - const schedule = () => { + const schedule = (why) => { if (scrollLockRaf != null) return; - scrollLockRaf = requestAnimationFrame(correct); + scrollLockRaf = requestAnimationFrame(() => correct(why)); }; - // Filter to mutations that touch our session's wrapper. Unrelated - // mutations (shader animations, HMR indicators, tooltips) shouldn't - // trigger corrections and fight the user. scrollLockObserver = new MutationObserver((mutations) => { for (const m of mutations) { if (m.target?.closest?.('[data-impeccable-variants="' + sessionId + '"]')) { - schedule(); + const childAdds = Array.from(m.addedNodes).map(n => n.nodeType === 1 ? (n.tagName + (n.dataset?.impeccableVariant ? ('[variant=' + n.dataset.impeccableVariant + ']') : '')) : n.nodeType).join(','); + console.log('[impeccable.scroll] mutation inside wrapper', { type: m.type, target: m.target?.tagName, adds: childAdds, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('mutation-in-wrapper'); return; } for (const n of m.addedNodes) { if (n.nodeType === 1 && (n.matches?.('[data-impeccable-variants="' + sessionId + '"]') || n.querySelector?.('[data-impeccable-variants="' + sessionId + '"]'))) { - schedule(); + console.log('[impeccable.scroll] wrapper node added', { tag: n.tagName, scrollYBefore: window.scrollY, targetY: scrollLockTargetY }); + schedule('wrapper-added'); return; } } @@ -1374,27 +1372,37 @@ }); scrollLockObserver.observe(document.body, { childList: true, subtree: true }); - // User scroll intent updates the target — we never fight the user. scrollLockAbort = new AbortController(); scrollLockAbort.signal.addEventListener('abort', () => { document.documentElement.style.overflowAnchor = prevHtmlAnchor; document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; - const reanchor = () => { + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } + const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', reanchor, { passive: true, ...sig }); - window.addEventListener('touchstart', reanchor, { passive: true, ...sig }); - window.addEventListener('touchmove', reanchor, { passive: true, ...sig }); + window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor(); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); }, sig); - // Initial apply — primarily useful on resume after a true reload, - // where the browser may have landed us somewhere wrong. - schedule(); + // Also track raw scroll events for diagnostic — shows whether Bun or + // some other mechanism is programmatically scrolling. + let lastLoggedScrollY = window.scrollY; + window.addEventListener('scroll', () => { + const now = window.scrollY; + if (Math.abs(now - lastLoggedScrollY) > 5) { + console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); + lastLoggedScrollY = now; + } + }, { passive: true, ...sig }); + + schedule('initial'); } function stopScrollLock() { @@ -1767,6 +1775,7 @@ saveSession(); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); + console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); startScrollLock(currentSessionId); captureAndEmit(elForCapture, basePayload, snapshot, captureRect); From 868d8c4126f8c869b6817bce8193304a097b5e3f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:35:00 -0700 Subject: [PATCH 075/125] fix(live): separate scroll-key, pre-empt browser, snap on every scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three concrete bugs from the diagnostic logs: 1. saveSession was writing scrollY alongside state, so every call during resumeSession clobbered the Go-time value with whatever the browser had left us at (typically 0). Move scrollY to its own localStorage key, touched only at Go and on user-scroll reanchor. 2. history.scrollRestoration='manual' was being set inside init() at DOMContentLoaded — by then the browser has already started animating its restore, especially with scroll-behavior: smooth on html. Apply it at script parse time, and apply the saved scrollY immediately there too, before the browser's animation starts. 3. Corrections only fired on MutationObserver. A programmatic smooth scroll (browser restore animation, or another script calling scrollIntoView) produces zero DOM mutations — so we never caught it walking scrollY from 0 up to 4800+ in the recorded session. Snap back on every scroll event, gated by a 250ms user-gesture window so we don't fight real user scrolls. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .pi/skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- public/index.html | 157 +++++++++--------- .../skills/impeccable/scripts/live-browser.js | 79 ++++++++- 13 files changed, 919 insertions(+), 186 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so diff --git a/public/index.html b/public/index.html index 01750db32..724bc0b59 100644 --- a/public/index.html +++ b/public/index.html @@ -722,8 +722,9 @@ - -
    + + +
    @@ -732,66 +733,78 @@
    -
    - Consulting -

    Work with me on enterprise rollouts, custom integrations, and training. By Renaissance Geek.

    + Consulting · Renaissance Geek +

    Work with me.

    +

    Rollouts, integrations, and training for enterprise teams, frontier labs, and design tool companies. By Renaissance Geek.

    -

    Work with me.

    -

    Impeccable is built by Renaissance Geek. Rollouts, integrations, and training for teams raising the bar on AI-generated design.

    + § +
    +

    Work with me.

    +

    Impeccable is built by Renaissance Geek. Enterprise rollouts, custom integrations, and training for designers and developers.

    +
    -
    - Studio · Renaissance Geek -

    Work with me.

    -

    Frontier labs, design tool companies, enterprise teams.

    -
    -
    - Impeccable is built by Renaissance Geek. I work with teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're raising the bar on AI-generated design, let's talk. +
    + & +

    Work with me.

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training.

    - + + diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 844159228..dcd3dedee 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -99,6 +99,40 @@ let scrollLockRaf = null; let scrollLockAbort = null; + // Dedicated key for scroll position — SEPARATE from LS_KEY so that + // saveSession's state updates don't clobber a carefully-captured scrollY. + // (Previously: saveSession wrote scrollY alongside state, so every call + // during resume overwrote the pre-reload value with whatever the browser + // had landed on, typically 0.) + const SCROLL_KEY_SUFFIX = '-scroll'; + function writeScrollY(y) { + try { localStorage.setItem(LS_KEY + SCROLL_KEY_SUFFIX, String(y)); } catch {} + } + function readScrollY() { + try { + const raw = localStorage.getItem(LS_KEY + SCROLL_KEY_SUFFIX); + if (raw == null) return null; + const n = parseFloat(raw); + return isFinite(n) ? n : null; + } catch { return null; } + } + function clearScrollY() { + try { localStorage.removeItem(LS_KEY + SCROLL_KEY_SUFFIX); } catch {} + } + + // Pre-empt the browser: apply manual scroll restoration and jump to the + // saved scrollY at script-parse time (before DOMContentLoaded). If we + // wait until init(), the browser has already begun animating its own + // restore — especially bad when `scroll-behavior: smooth` is set on html. + try { + history.scrollRestoration = 'manual'; + const savedY = readScrollY(); + if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + } + } catch {} + // UI refs let highlightEl = null; let tooltipEl = null; @@ -1378,21 +1412,35 @@ document.body.style.overflowAnchor = prevBodyAnchor; }, { once: true }); const sig = { signal: scrollLockAbort.signal }; + // Track whether the most recent scroll came from a user gesture. We + // gate user-scroll re-anchoring on this flag so programmatic smooth + // scrolls (browser reload-restore, scrollIntoView from other scripts) + // don't accidentally update our target. + let userGestureAt = 0; + const USER_GESTURE_WINDOW_MS = 250; + const reanchor = (why) => { if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } const prevTarget = scrollLockTargetY; scrollLockTargetY = window.scrollY; + writeScrollY(scrollLockTargetY); console.log('[impeccable.scroll] reanchor', { why, prevTarget, newTarget: scrollLockTargetY }); }; - window.addEventListener('wheel', () => reanchor('wheel'), { passive: true, ...sig }); - window.addEventListener('touchstart', () => reanchor('touchstart'), { passive: true, ...sig }); - window.addEventListener('touchmove', () => reanchor('touchmove'), { passive: true, ...sig }); + const markGesture = (why) => { + userGestureAt = performance.now(); + reanchor(why); + }; + window.addEventListener('wheel', () => markGesture('wheel'), { passive: true, ...sig }); + window.addEventListener('touchstart', () => markGesture('touchstart'), { passive: true, ...sig }); + window.addEventListener('touchmove', () => markGesture('touchmove'), { passive: true, ...sig }); window.addEventListener('keydown', (e) => { - if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) reanchor('key:' + e.key); + if (['PageDown', 'PageUp', ' ', 'End', 'Home', 'ArrowDown', 'ArrowUp'].includes(e.key)) markGesture('key:' + e.key); }, sig); - // Also track raw scroll events for diagnostic — shows whether Bun or - // some other mechanism is programmatically scrolling. + // Correct on EVERY scroll event: whether it's the browser's + // post-reload animated restore or some other script calling + // scrollIntoView, we want to snap back immediately. Only skip if a + // user gesture fired in the last 250ms. let lastLoggedScrollY = window.scrollY; window.addEventListener('scroll', () => { const now = window.scrollY; @@ -1400,9 +1448,19 @@ console.log('[impeccable.scroll] scroll event', { from: lastLoggedScrollY, to: now, targetY: scrollLockTargetY }); lastLoggedScrollY = now; } + if (scrollLockTargetY == null) return; + if (performance.now() - userGestureAt < USER_GESTURE_WINDOW_MS) return; + if (Math.abs(now - scrollLockTargetY) < 0.5) return; + console.log('[impeccable.scroll] scroll-event snap', { from: now, to: scrollLockTargetY }); + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); }, { passive: true, ...sig }); - schedule('initial'); + // Apply target synchronously, not via rAF — racing the browser's + // restore or a smooth-scroll animation means we want to win now. + if (Math.abs(window.scrollY - scrollLockTargetY) > 0.5) { + window.scrollTo({ top: scrollLockTargetY, left: window.scrollX, behavior: 'instant' }); + console.log('[impeccable.scroll] startScrollLock initial apply', { to: scrollLockTargetY }); + } } function stopScrollLock() { @@ -1410,6 +1468,7 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; + clearScrollY(); } // --------------------------------------------------------------------------- @@ -1773,6 +1832,7 @@ state = 'GENERATING'; showBar('generating'); saveSession(); + writeScrollY(window.scrollY); if (variantObserver) variantObserver.disconnect(); variantObserver = startVariantObserver(currentSessionId); console.log('[impeccable.scroll] Go pressed', { scrollY: window.scrollY, sessionId: currentSessionId }); @@ -2239,6 +2299,8 @@ void main() { function saveSession() { if (!currentSessionId) return; + // NOTE: scrollY is stored under a separate key (writeScrollY). Storing + // it here would overwrite the Go-time value every time state changes. try { localStorage.setItem(LS_KEY, JSON.stringify({ id: currentSessionId, @@ -2248,7 +2310,6 @@ void main() { expected: expectedVariants, arrived: arrivedVariants, visible: visibleVariant, - scrollY: window.scrollY, })); } catch { /* quota exceeded or private mode */ } } @@ -2405,7 +2466,7 @@ void main() { // Hold the target at its saved viewport top through any subsequent // HMR patches, variant inserts, or cycle swaps. - startScrollLock(currentSessionId, saved?.scrollY); + startScrollLock(currentSessionId, readScrollY()); // If we reloaded mid-generation (Bun's HTML HMR destroys the shader // canvas), re-capture the original's content and restart the shader so From 5e04a9f25a04490de6dce8aa6db2f9bd9630a6cb Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:41:15 -0700 Subject: [PATCH 076/125] fix(live): don't clear scroll key inside stopScrollLock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit startScrollLock calls stopScrollLock at the top as a reset. I had clearScrollY() inside stopScrollLock, so every Go sequence was: writeScrollY(6749.5) → startScrollLock → stopScrollLock → clearScrollY — the persisted value was wiped right after being written, so resume after reload read null and locked to 0. Move clearScrollY to the three genuine session-end sites (hideBar error path, confirmed/accept, cleanup/discard). stopScrollLock no longer touches persistent storage. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .pi/skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- .../skills/impeccable/scripts/live-browser.js | 7 +- public/index.html | 84 ++++++++----------- .../skills/impeccable/scripts/live-browser.js | 7 +- 13 files changed, 108 insertions(+), 60 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; diff --git a/public/index.html b/public/index.html index 724bc0b59..e159aac80 100644 --- a/public/index.html +++ b/public/index.html @@ -723,8 +723,9 @@ - -
    + + +
    @@ -733,15 +734,14 @@
    -
    - Consulting · Renaissance Geek + Renaissance Geek · Consulting

    Work with me.

    -

    Rollouts, integrations, and training for enterprise teams, frontier labs, and design tool companies. By Renaissance Geek.

    +

    Enterprise rollouts, custom integrations, and training for designers and developers. Get in touch.

    - § +

    Work with me.

    -

    Impeccable is built by Renaissance Geek. Enterprise rollouts, custom integrations, and training for designers and developers.

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on rollouts, integrations, and training.

    -
    - & -

    Work with me.

    -
    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training.

    +

    Work
    with me.

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers.

    - + + diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index dcd3dedee..71ec5ab75 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -1468,7 +1468,9 @@ if (scrollLockRaf != null) { cancelAnimationFrame(scrollLockRaf); scrollLockRaf = null; } if (scrollLockAbort) { scrollLockAbort.abort(); scrollLockAbort = null; } scrollLockTargetY = null; - clearScrollY(); + // NOTE: do NOT clear the persistent scroll key here. startScrollLock + // calls us as a reset, and clearing the key would nuke the Go-time + // scrollY that the next resume needs to read. } // --------------------------------------------------------------------------- @@ -1647,6 +1649,7 @@ stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2261,6 +2264,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; @@ -2376,6 +2380,7 @@ void main() { stopScrollTracking(); if (variantObserver) { variantObserver.disconnect(); variantObserver = null; } stopScrollLock(); + clearScrollY(); clearSession(); selectedElement = null; currentSessionId = null; From fb78ec4553c3ded04c3b01a7b69bd0ab8a5d3b74 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:45:39 -0700 Subject: [PATCH 077/125] fix(live): inject inline pre-restore script so scrollY wins vs browser MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit external live.js is fetched, so by the time it runs the browser has already queued its reload-scroll animation and history.scrollRestoration ='manual' has no effect. Inject a tiny inline synchronous '; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.claude/skills/impeccable/scripts/live-inject.mjs b/.claude/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.claude/skills/impeccable/scripts/live-inject.mjs +++ b/.claude/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.cursor/skills/impeccable/scripts/live-inject.mjs b/.cursor/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.cursor/skills/impeccable/scripts/live-inject.mjs +++ b/.cursor/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.gemini/skills/impeccable/scripts/live-inject.mjs b/.gemini/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.gemini/skills/impeccable/scripts/live-inject.mjs +++ b/.gemini/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.github/skills/impeccable/scripts/live-inject.mjs b/.github/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.github/skills/impeccable/scripts/live-inject.mjs +++ b/.github/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.kiro/skills/impeccable/scripts/live-inject.mjs b/.kiro/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.kiro/skills/impeccable/scripts/live-inject.mjs +++ b/.kiro/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.opencode/skills/impeccable/scripts/live-inject.mjs b/.opencode/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.opencode/skills/impeccable/scripts/live-inject.mjs +++ b/.opencode/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.pi/skills/impeccable/scripts/live-inject.mjs b/.pi/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.pi/skills/impeccable/scripts/live-inject.mjs +++ b/.pi/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.rovodev/skills/impeccable/scripts/live-inject.mjs b/.rovodev/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.rovodev/skills/impeccable/scripts/live-inject.mjs +++ b/.rovodev/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.trae-cn/skills/impeccable/scripts/live-inject.mjs b/.trae-cn/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.trae-cn/skills/impeccable/scripts/live-inject.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/.trae/skills/impeccable/scripts/live-inject.mjs b/.trae/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/.trae/skills/impeccable/scripts/live-inject.mjs +++ b/.trae/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); diff --git a/public/index.html b/public/index.html index e159aac80..6c638efcc 100644 --- a/public/index.html +++ b/public/index.html @@ -724,8 +724,9 @@ - -
    + + +
    @@ -734,118 +735,27 @@
    -
    @@ -860,18 +770,19 @@

    Work with me.

    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on rollouts, integrations, and training.

    +

    Impeccable is built by Renaissance Geek. Rollouts, integrations, training.

    Work
    with me.

    -

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers.

    +

    Impeccable is built by Renaissance Geek. Large-scale rollouts, custom integrations, and training for teams raising the bar on AI-generated design.

    - + + @@ -921,6 +832,7 @@ + diff --git a/public/privacy.html b/public/privacy.html index 4139e711e..2bb9a7e2b 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -78,6 +78,7 @@

    Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.

    + diff --git a/source/skills/impeccable/scripts/live-inject.mjs b/source/skills/impeccable/scripts/live-inject.mjs index 9bbc345ac..daf44cde8 100644 --- a/source/skills/impeccable/scripts/live-inject.mjs +++ b/source/skills/impeccable/scripts/live-inject.mjs @@ -137,8 +137,18 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); + // Inline pre-restore: runs before the external live.js is fetched. Sets + // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // during HTML parse, beating the browser's animated reload-restore. + // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). + const preRestore = + ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + + preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); From f0f2935547b0689a61eaf8029b2186f0d3bc3f89 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:48:13 -0700 Subject: [PATCH 078/125] fix(live): retry inline scroll-restore on fonts.ready and load scrollTo(y) clamps to the current document.scrollHeight, which is several hundred pixels short of the final value until async-loaded fonts swap in (Cormorant Garamond italic grew consulting-section layout by ~585px in the logs). The initial synchronous scroll was clamping to ~6165 even though the Go-time target was 6749.5. Retry on document.fonts.ready and on the window load event, both of which fire once the document reaches its final height. Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .claude/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .cursor/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .gemini/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .github/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .kiro/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .../skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .pi/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .rovodev/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .trae-cn/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- .trae/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- public/index.html | 14 ++++++++------ public/privacy.html | 2 +- source/skills/impeccable/scripts/live-inject.mjs | 13 +++++++++++-- 14 files changed, 141 insertions(+), 31 deletions(-) diff --git a/.agents/skills/impeccable/scripts/live-inject.mjs b/.agents/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.agents/skills/impeccable/scripts/live-inject.mjs +++ b/.agents/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.claude/skills/impeccable/scripts/live-inject.mjs b/.claude/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.claude/skills/impeccable/scripts/live-inject.mjs +++ b/.claude/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.cursor/skills/impeccable/scripts/live-inject.mjs b/.cursor/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.cursor/skills/impeccable/scripts/live-inject.mjs +++ b/.cursor/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.gemini/skills/impeccable/scripts/live-inject.mjs b/.gemini/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.gemini/skills/impeccable/scripts/live-inject.mjs +++ b/.gemini/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.github/skills/impeccable/scripts/live-inject.mjs b/.github/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.github/skills/impeccable/scripts/live-inject.mjs +++ b/.github/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.kiro/skills/impeccable/scripts/live-inject.mjs b/.kiro/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.kiro/skills/impeccable/scripts/live-inject.mjs +++ b/.kiro/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.opencode/skills/impeccable/scripts/live-inject.mjs b/.opencode/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.opencode/skills/impeccable/scripts/live-inject.mjs +++ b/.opencode/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.pi/skills/impeccable/scripts/live-inject.mjs b/.pi/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.pi/skills/impeccable/scripts/live-inject.mjs +++ b/.pi/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.rovodev/skills/impeccable/scripts/live-inject.mjs b/.rovodev/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.rovodev/skills/impeccable/scripts/live-inject.mjs +++ b/.rovodev/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.trae-cn/skills/impeccable/scripts/live-inject.mjs b/.trae-cn/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.trae-cn/skills/impeccable/scripts/live-inject.mjs +++ b/.trae-cn/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/.trae/skills/impeccable/scripts/live-inject.mjs b/.trae/skills/impeccable/scripts/live-inject.mjs index daf44cde8..37a16f1ea 100644 --- a/.trae/skills/impeccable/scripts/live-inject.mjs +++ b/.trae/skills/impeccable/scripts/live-inject.mjs @@ -138,14 +138,23 @@ function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY *synchronously* + // scrollRestoration='manual' and jumps to the saved scrollY synchronously // during HTML parse, beating the browser's animated reload-restore. + // + // Retries on fonts.ready and load are essential: scrollTo(y) clamps to + // the document's current scrollHeight, which is often hundreds of + // pixels short of the final value until async-loaded fonts swap in. // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). const preRestore = ''; + 'if(!isFinite(y))return;' + + 'var apply=function(){if(Math.abs(window.scrollY-y)>0.5)window.scrollTo(0,y);};' + + 'apply();' + + 'if(document.fonts&&document.fonts.ready)document.fonts.ready.then(apply);' + + 'window.addEventListener("load",apply,{once:true});' + + '}catch(e){}})();'; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + preRestore + '\n' + diff --git a/public/index.html b/public/index.html index 6c638efcc..06423fd5f 100644 --- a/public/index.html +++ b/public/index.html @@ -725,8 +725,9 @@ - -
    + + +
    @@ -735,7 +736,7 @@
    - -
    -
    - Renaissance Geek · Consulting -

    Work with me.

    -

    Enterprise rollouts, custom integrations, and training for designers and developers. Get in touch.

    -
    -
    -
    -
    - -
    -

    Work with me.

    -

    Impeccable is built by Renaissance Geek. Rollouts, integrations, training.

    -
    -
    -
    -
    -
    -

    Work
    with me.

    -

    Impeccable is built by Renaissance Geek. Large-scale rollouts, custom integrations, and training for teams raising the bar on AI-generated design.

    -
    -
    + + +
    +

    Work with me

    +

    Impeccable is built by Renaissance Geek. I work with enterprise teams on large-scale rollouts, custom integrations, and training for designers and developers. If you're a frontier lab, design tool company, or enterprise looking to raise the bar on AI-generated design, let's talk.

    - + + @@ -834,7 +785,6 @@ - diff --git a/public/privacy.html b/public/privacy.html index 817b152e4..4139e711e 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -78,7 +78,6 @@

    Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.

    - diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 71ec5ab75..109d0d58e 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -121,15 +121,23 @@ } // Pre-empt the browser: apply manual scroll restoration and jump to the - // saved scrollY at script-parse time (before DOMContentLoaded). If we - // wait until init(), the browser has already begun animating its own - // restore — especially bad when `scroll-behavior: smooth` is set on html. + // saved scrollY at script-parse time. Retries on fonts.ready and load + // are essential: scrollTo(y) clamps to the current document.scrollHeight, + // which is often hundreds of pixels short of the final value until + // async-loaded fonts swap in and reflow. try { history.scrollRestoration = 'manual'; const savedY = readScrollY(); - if (savedY != null && Math.abs(window.scrollY - savedY) > 0.5) { - console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); - window.scrollTo({ top: savedY, left: 0, behavior: 'instant' }); + if (savedY != null) { + const apply = () => { + if (Math.abs(window.scrollY - savedY) > 0.5) { + console.log('[impeccable.scroll] early restore', { from: window.scrollY, to: savedY }); + window.scrollTo(0, savedY); + } + }; + apply(); + if (document.fonts?.ready) document.fonts.ready.then(apply).catch(() => {}); + window.addEventListener('load', apply, { once: true }); } } catch {} diff --git a/source/skills/impeccable/scripts/live-inject.mjs b/source/skills/impeccable/scripts/live-inject.mjs index 37a16f1ea..9bbc345ac 100644 --- a/source/skills/impeccable/scripts/live-inject.mjs +++ b/source/skills/impeccable/scripts/live-inject.mjs @@ -137,27 +137,8 @@ function commentClose(syntax) { return syntax === 'jsx' ? '*/}' : '-->'; } function buildTagBlock(syntax, port) { const open = commentOpen(syntax); const close = commentClose(syntax); - // Inline pre-restore: runs before the external live.js is fetched. Sets - // scrollRestoration='manual' and jumps to the saved scrollY synchronously - // during HTML parse, beating the browser's animated reload-restore. - // - // Retries on fonts.ready and load are essential: scrollTo(y) clamps to - // the document's current scrollHeight, which is often hundreds of - // pixels short of the final value until async-loaded fonts swap in. - // Hardcoded key matches live-browser.js: PREFIX ('impeccable-live') + - // LS_KEY suffix ('-session') + SCROLL_KEY_SUFFIX ('-scroll'). - const preRestore = - ''; return ( open + ' ' + MARKER_OPEN_TEXT + ' ' + close + '\n' + - preRestore + '\n' + '\n' + open + ' ' + MARKER_CLOSE_TEXT + ' ' + close + '\n' ); From 7e473e48d0092f3d50d22c0b2eed16f77171347f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 10:57:24 -0700 Subject: [PATCH 080/125] fix(site): instant hash restore, retry on fonts.ready + load, drop smooth-scroll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three related site scroll bugs: 1. initAnchorScroll and initHashTracking both called scrollTo with `behavior: 'auto'`, which defers to CSS `scroll-behavior`. Because sub-pages.css set `html { scroll-behavior: smooth }`, every anchor jump and reload-hash-restore animated — despite a code comment explicitly stating "Instant anchor scroll — no smooth scrolling". Switch to `behavior: 'instant'` so the JS wins. 2. The reload-hash restore used a fixed `setTimeout(100)` to compute target position. At 100ms, async Google Fonts (Cormorant Garamond italic) has not swapped in, so `getBoundingClientRect().top` is computed against fallback metrics and mislanded by hundreds of pixels. Retry on `document.fonts.ready` and on window `load`. 3. Remove `scroll-behavior: smooth` from sub-pages.css entirely — it was silently fighting the JS and made long-page anchor clicks feel sluggish. --- public/css/sub-pages.css | 5 ++--- public/js/utils/scroll.js | 28 ++++++++++++++++++---------- 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css index c4be084bd..cde466469 100644 --- a/public/css/sub-pages.css +++ b/public/css/sub-pages.css @@ -37,9 +37,8 @@ BASE ============================================ */ -html { - scroll-behavior: smooth; -} +/* No smooth scroll — long editorial pages feel slow on anchor jumps, and + a secretly-smooth CSS rule also overrides JS `behavior: 'auto'` calls. */ body { font-family: var(--font-body); diff --git a/public/js/utils/scroll.js b/public/js/utils/scroll.js index ebe48b5a3..2e149e86f 100644 --- a/public/js/utils/scroll.js +++ b/public/js/utils/scroll.js @@ -1,14 +1,15 @@ -// Instant anchor scroll - no smooth scrolling for better UX on long pages +// Instant anchor scroll - no smooth scrolling for better UX on long pages. +// `behavior: 'instant'` explicitly overrides any CSS `scroll-behavior: smooth` +// from a stylesheet we don't own; `behavior: 'auto'` would defer to CSS. export function initAnchorScroll() { document.querySelectorAll('a[href^="#"]').forEach((anchor) => { anchor.addEventListener("click", (e) => { e.preventDefault(); const target = document.querySelector(anchor.getAttribute("href")); if (target) { - // Instant jump with small offset for visual breathing room const offset = 40; const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset; - window.scrollTo({ top: targetPosition, behavior: 'auto' }); + window.scrollTo({ top: targetPosition, behavior: 'instant' }); } }); }); @@ -75,22 +76,29 @@ export function initHashTracking() { } }, { passive: true }); - // Handle initial hash on page load - instant jump + // Handle initial hash on page load — instant jump, retried on + // fonts.ready and window `load`. A fixed setTimeout is unreliable + // because async-loaded display fonts reflow the page by hundreds of + // pixels when they swap in; computing target position before that + // lands the user several sections above the right spot. if (window.location.hash) { const hash = window.location.hash.slice(1); const target = document.getElementById(hash); if (target) { currentHash = hash; - setTimeout(() => { + let clicked = false; + const jump = () => { const offset = 40; const targetPosition = target.getBoundingClientRect().top + window.scrollY - offset; - window.scrollTo({ top: targetPosition, behavior: 'auto' }); - - // If it's a command deep link, activate it - if (hash.startsWith('cmd-') && target.classList.contains('manual-entry')) { + window.scrollTo({ top: targetPosition, behavior: 'instant' }); + if (!clicked && hash.startsWith('cmd-') && target.classList.contains('manual-entry')) { target.click(); + clicked = true; } - }, 100); + }; + jump(); + if (document.fonts?.ready) document.fonts.ready.then(jump).catch(() => {}); + window.addEventListener('load', jump, { once: true }); } } else { // No hash — don't set one on initial load From 549f92577c0d551e60e1713487ff8974d6e6a335 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 11:28:19 -0700 Subject: [PATCH 081/125] feat(site): v3.0 changelog expansion, pin FAQ, stale-ref cleanup - v3.0 changelog now covers 6 items (was 2): Live Mode, PRODUCT.md, DESIGN.md (with Google Stitch spec compliance), brand/product registers, plus the existing consolidation + pin/unpin. - New FAQ entry answering "how do I get /critique back" via pinning. - Added Pin commands back as shortcuts section to /docs/impeccable editorial so it's findable outside the FAQ. - Reduced changelog item font size (0.9375rem) to match length. - Swept user-facing copy: .impeccable.md -> PRODUCT.md, removed three stale npx impeccable live references (the CLI subcommand no longer exists; live is /impeccable live inside the skill). - Historical v1.5.0 changelog entry preserved as-is (period-accurate). --- content/site/skills/clarify.md | 4 +-- content/site/skills/colorize.md | 2 +- content/site/skills/delight.md | 4 +-- content/site/skills/impeccable.md | 21 +++++++++++++- content/site/skills/typeset.md | 2 +- .../site/tutorials/critique-with-overlay.md | 5 ++-- content/site/tutorials/getting-started.md | 8 +++--- public/css/workflow.css | 5 ++-- public/index.html | 28 +++++++++++++++---- public/js/demo-renderer.js | 2 +- public/privacy.html | 3 -- 11 files changed, 58 insertions(+), 26 deletions(-) diff --git a/content/site/skills/clarify.md b/content/site/skills/clarify.md index 47d7f3298..276c6a805 100644 --- a/content/site/skills/clarify.md +++ b/content/site/skills/clarify.md @@ -19,7 +19,7 @@ The skill rewrites text across the surfaces where most UX copy problems live: 5. **Tooltips and helper text**: add information the label cannot carry, never restate it. 6. **Confirmation dialogs**: name the consequences, not the action. -The skill uses the audience and mental state from `.impeccable.md` to tune voice. Technical audience gets precise language. Consumer audience gets plain speech. Rushed users get short text. Anxious users (payment, delete) get reassurance. +The skill uses the audience and mental state from `PRODUCT.md` to tune voice. Technical audience gets precise language. Consumer audience gets plain speech. Rushed users get short text. Anxious users (payment, delete) get reassurance. ## Try it @@ -38,5 +38,5 @@ Before and after, typical: ## Pitfalls - **Writing cleverer, not clearer.** Clarify is not for voice upgrades. If the copy is already clear, do not reach for this skill. Use `/impeccable delight` instead when you want personality. -- **Skipping the audience question.** Clarify needs to know who is reading. If `.impeccable.md` does not specify audience technical level, the rewrites will be generic. +- **Skipping the audience question.** Clarify needs to know who is reading. If `PRODUCT.md` does not specify audience technical level, the rewrites will be generic. - **Running clarify on marketing copy.** Clarify is for functional UX text: labels, errors, instructions. Marketing copy needs a different set of moves and a human writer. diff --git a/content/site/skills/colorize.md b/content/site/skills/colorize.md index 9dbb52598..0cfdf57c1 100644 --- a/content/site/skills/colorize.md +++ b/content/site/skills/colorize.md @@ -33,6 +33,6 @@ Expected diff: ## Pitfalls -- **Running it without a brand hue.** Colorize needs a starting point. If `.impeccable.md` does not specify one, it will ask. Do not let it pick from the AI color palette defaults. +- **Running it without a brand hue.** Colorize needs a starting point. If `PRODUCT.md` does not specify one, it will ask. Do not let it pick from the AI color palette defaults. - **Expecting it to fix the AI color palette problem.** If your design already has purple gradients and cyan neon, you need `/impeccable quieter` first, then colorize can rebuild. - **Using it on already-colorful interfaces.** That is a `/impeccable quieter` job. Colorize adds, it does not subtract. diff --git a/content/site/skills/delight.md b/content/site/skills/delight.md index 8d7d913c4..ba982ea1e 100644 --- a/content/site/skills/delight.md +++ b/content/site/skills/delight.md @@ -18,7 +18,7 @@ The skill hunts for delight opportunities in the places most designers skip: 4. **Microcopy**: button labels, tooltips, error messages, placeholder text. Tiny copy with taste. 5. **Easter eggs and secondary states**: things users discover that reward paying attention. -The skill reads the brand tone from `.impeccable.md`. A serious analytics tool gets serious delight (dry, precise, a little clever). A playful consumer app gets more overt personality. It does not force humor where humor is wrong for the audience. +The skill reads the brand tone from `PRODUCT.md`. A serious analytics tool gets serious delight (dry, precise, a little clever). A playful consumer app gets more overt personality. It does not force humor where humor is wrong for the audience. The rule is: every delight moment must still work perfectly if you delete the delight. Nothing depends on the smile. @@ -37,6 +37,6 @@ Expected additions: ## Pitfalls -- **Forcing humor.** Not every brand is playful. If the brand voice in `.impeccable.md` is "clinical and precise", delight adds clever restraint, not jokes. +- **Forcing humor.** Not every brand is playful. If the brand voice in `PRODUCT.md` is "clinical and precise", delight adds clever restraint, not jokes. - **Over-decorating.** One moment of delight is memorable. Twenty becomes noise. The skill is conservative on purpose. - **Running delight before polish.** Polish fixes what is wrong. Delight adds what is missing. In that order. diff --git a/content/site/skills/impeccable.md b/content/site/skills/impeccable.md index 94e97cbae..d8f3474a8 100644 --- a/content/site/skills/impeccable.md +++ b/content/site/skills/impeccable.md @@ -18,7 +18,7 @@ For more structured flows, reach for the specialized commands in the sidebar. `/ Most AI-generated UIs fail the same way: generic fonts, purple gradients, card grids on card grids, glassmorphism everywhere. `/impeccable` gives your AI a strong point of view. It loads an opinionated design handbook plus a long list of anti-patterns, then pushes the model to commit to a specific aesthetic direction before writing a single line of code. -The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. On first use in a project, it runs the `teach` flow automatically: a short interview about your brand, audience, and aesthetic direction, saved to `.impeccable.md` so every future command reads it without asking again. +The skill has a **Context Gathering Protocol** built in. It will not design anything until it knows who uses the product, what they're trying to do, and how the interface should feel. On first use in a project, it runs the `teach` flow automatically: a short interview about your brand, audience, and aesthetic direction, saved to `PRODUCT.md` so every future command reads it without asking again. ## Try it @@ -32,6 +32,25 @@ The skill has a **Context Gathering Protocol** built in. It will not design anyt Both prompts are vague on purpose. `/impeccable` will pick a strong aesthetic direction, commit to non-default fonts, avoid the AI color palette, and make the kind of specific choices that a designer would make. No command name to pick first, no step-by-step workflow to follow. +## Pin commands back as shortcuts + +v3.0 consolidated 18 standalone skills into a single `/impeccable` with sub-commands. If you miss the short form of a specific command, pin it back: + +``` +/impeccable pin critique +``` + +From now on, `/critique` invokes `/impeccable critique` directly. It writes a lightweight redirect skill that delegates to the parent, so updates to the skill flow through without re-pinning. + +Useful pins to try: + +- `/impeccable pin polish` for final-pass work +- `/impeccable pin audit` for deterministic a11y/perf checks +- `/impeccable pin live` for the browser iteration flow +- `/impeccable pin critique` for design review + +To remove: `/impeccable unpin critique`. Pins live as directories prefixed with `i-` in your harness skills folder (`.claude/skills/i-critique/`, `.cursor/skills/i-critique/`, etc.), so you can also delete them manually. + ## Pitfalls - **Treating it like a style guide.** It is an opinionated design partner, not a linter. The defaults exist to raise the floor, not to overrule your judgment. If you have a real reason to push back (brand guideline, accessibility constraint, user research that says otherwise), push back and explain why. The skill will work with you. What produces worse output is ignoring the opinion without a reason. diff --git a/content/site/skills/typeset.md b/content/site/skills/typeset.md index 0bfc1aad8..8c31a0864 100644 --- a/content/site/skills/typeset.md +++ b/content/site/skills/typeset.md @@ -37,6 +37,6 @@ Expected diff: ## Pitfalls -- **Asking for a new font without context.** Typeset will pick based on the `.impeccable.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic. +- **Asking for a new font without context.** Typeset will pick based on the `PRODUCT.md` brand voice. If you have not run `/impeccable teach`, the suggestion will be generic. - **Reaching for typeset when the issue is layout.** If paragraphs are fine but the page feels cramped, you want `/impeccable layout`. - **Expecting fluid clamp scales on app UIs.** Typeset uses fixed rem scales for app interfaces. Fluid typography is for marketing and content pages where line length varies dramatically. diff --git a/content/site/tutorials/critique-with-overlay.md b/content/site/tutorials/critique-with-overlay.md index e370d14ca..7bb71304f 100644 --- a/content/site/tutorials/critique-with-overlay.md +++ b/content/site/tutorials/critique-with-overlay.md @@ -29,7 +29,7 @@ The skill kicks off two independent assessments in parallel. They run in separat ### What the LLM assessment does -The first assessment reads your source code and, if browser automation is available, opens the live page in a new tab. It walks the full impeccable skill DO/DON'T catalog and scores the page against Nielsen's 10 heuristics, the 8-item cognitive load checklist, and the brand fit from your `.impeccable.md`. +The first assessment reads your source code and, if browser automation is available, opens the live page in a new tab. It walks the full impeccable skill DO/DON'T catalog and scores the page against Nielsen's 10 heuristics, the 8-item cognitive load checklist, and the brand fit from your `PRODUCT.md`. It labels the tab it opens with `[LLM]` in the title so you can tell which one is which. @@ -55,11 +55,10 @@ Impeccable ships with a visual mode that highlights every detected anti-pattern Every outlined element has a floating label naming the rule that fired. Hover an outline to see the full finding. This is exactly what you will see on your own page. -You have three ways to open it: +You have two ways to open it: 1. **[Chrome extension](https://chromewebstore.google.com/detail/impeccable/bdkgmiklpdmaojlpflclinlofgjfpabf)**: one-click activation on any page. Click the Impeccable icon in the toolbar and every anti-pattern gets highlighted instantly. 2. **Inside `/impeccable critique`**: the skill opens a browser tab labeled `[Human]` with the detector active during the browser portion of the assessment. You do not need to do anything extra. -3. **Standalone CLI**: `npx impeccable live` starts a local server that serves the detector script. You inject it into any page by adding a ` - - - diff --git a/public/js/demo-renderer.js b/public/js/demo-renderer.js index 8d6121489..bd7061118 100644 --- a/public/js/demo-renderer.js +++ b/public/js/demo-renderer.js @@ -124,7 +124,7 @@ export function renderCommandDemo(commandId) {
    3. Save
    - Writes a .impeccable.md file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically. + Writes a PRODUCT.md file with users, brand, aesthetic direction, and design principles. Every future command reads it automatically.
    Run once per project. Then forget it exists.
    diff --git a/public/privacy.html b/public/privacy.html index 4139e711e..3a41097f0 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -77,8 +77,5 @@

    Contact

    Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.

    - - - From d03dca1209a41940324d61bb6751b679a0c796a8 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 11:52:40 -0700 Subject: [PATCH 082/125] fix(site): restore Antidote section with curated anti-pattern list MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The DO/DONT extractor in readPatterns stopped finding anything after the skill went human-authored (new SKILL.md uses plain bullets, one-word section headings, no DO:/DON'T: prefixes). Replace the extractor with a hand-curated category list: six categories, three or four DOs and DON'Ts each. Editorial tone, tight, deliberately a teaser — the full catalog still lives on /anti-patterns. The legacy SKILL.md parser is retained in the file as _legacyReadPatterns in case we want to revive it later with a different format. Small CSS fix: .faq-question was display:flex with justify-content: space-between, so inline in a summary got treated as its own flex item and pushed apart. Switched to relative+absolute positioning so the + icon sits in the right margin and text flows naturally. Changelog font size reduced to 0.9375rem for the expanded v3.0 entry. New FAQ entry on pinning standalone commands back. Pin section added to /docs/impeccable editorial. --- public/css/workflow.css | 12 ++--- scripts/lib/utils.js | 97 ++++++++++++++++++++++++++++++++++++++++- 2 files changed, 103 insertions(+), 6 deletions(-) diff --git a/public/css/workflow.css b/public/css/workflow.css index 55da43f0f..cbdf3c5cf 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1247,12 +1247,10 @@ font-size: 1.125rem; font-weight: 500; color: var(--color-ink); - padding: var(--spacing-md) 0; + padding: var(--spacing-md) calc(var(--spacing-md) + 1.5rem) var(--spacing-md) 0; cursor: pointer; list-style: none; - display: flex; - align-items: center; - justify-content: space-between; + position: relative; transition: color 0.2s ease; } @@ -1267,10 +1265,14 @@ font-weight: 300; color: var(--color-accent); transition: transform 0.3s var(--ease-out); + position: absolute; + right: 0; + top: 50%; + transform: translateY(-50%); } .faq-item[open] .faq-question::after { - transform: rotate(45deg); + transform: translateY(-50%) rotate(45deg); } .faq-question:hover { diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 9f1c1d764..9c060894a 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -226,7 +226,102 @@ export function writeFile(filePath, content) { * * Returns { patterns: [...], antipatterns: [...] } */ -export function readPatterns(rootDir, relativePath = 'source/skills/impeccable/SKILL.md') { +// Curated short-list for the homepage Antidote section. Intentionally +// hand-written (not auto-extracted) so the copy stays tight and +// editorial. The long-form catalog lives on /anti-patterns — this is +// the teaser. +const CURATED_CATEGORIES = [ + { + name: 'Typography', + do: [ + 'Pair a distinctive display face with a restrained body face; vary across projects.', + 'Use a ≥1.25 scale ratio between hierarchy steps. Flat scales read as bland.', + 'Cap body line length at 65–75ch. Wider is fatiguing.', + ], + dont: [ + 'Inter, Roboto, Plex, Fraunces, or any other reflex default. Look further.', + 'Monospace as lazy shorthand for "technical."', + 'Long passages in uppercase. Reserve all-caps for short labels.', + ], + }, + { + name: 'Color & Contrast', + do: [ + 'Use OKLCH. Reduce chroma near lightness extremes.', + 'Tint neutrals toward the brand hue. Chroma 0.005–0.01 is enough.', + 'Pick a color strategy before picking colors (Restrained, Committed, Full, Drenched).', + ], + dont: [ + 'Pure #000 or #fff. Always tint.', + 'Dark mode + purple-to-cyan gradients. The AI tell.', + 'Gradient text via background-clip. Use weight or size for emphasis.', + ], + }, + { + name: 'Layout & Space', + do: [ + 'Vary spacing for rhythm. Tight groupings, generous separations.', + 'Use the simplest tool: Flexbox for 1D, Grid for 2D, plain flow often enough.', + 'Let whitespace carry hierarchy before reaching for color or scale.', + ], + dont: [ + 'Wrap everything in cards. Nested cards are always wrong.', + 'Identical card grids of icon + heading + text, repeated endlessly.', + 'The hero-metric template: big number, small label, supporting stats, gradient accent.', + ], + }, + { + name: 'Visual Details', + do: [ + 'Commit to an aesthetic direction and execute it with precision.', + 'Use ornament only where it earns its place.', + ], + dont: [ + 'Side-stripe borders (border-left/-right > 1px). The dashboard tell.', + 'Glassmorphism everywhere. Rare and purposeful or nothing.', + 'Rounded rectangles with generic drop shadows. "Could be any AI output."', + ], + }, + { + name: 'Motion', + do: [ + 'Use transform and opacity. Animate the composited properties only.', + 'Ease out with exponential curves (quart / quint / expo).', + 'Respect prefers-reduced-motion on every transition.', + ], + dont: [ + 'Animate layout (width, height, padding, margin).', + 'Bounce or elastic easing. Feels dated and tacky.', + 'Decorative motion for its own sake. Motion should signal state.', + ], + }, + { + name: 'Interaction', + do: [ + 'Use optimistic UI: update immediately, sync later.', + 'Design empty states that teach the interface, not just say "nothing here."', + 'Progressive disclosure: start simple, reveal sophistication on demand.', + ], + dont: [ + 'Make every button primary. Hierarchy matters.', + 'Default to a modal. Exhaust inline alternatives first.', + 'Repeat information the user can already see.', + ], + }, +]; + +export function readPatterns(_rootDir, _relativePath) { + // Hand-curated list — see CURATED_CATEGORIES above. The homepage + // Antidote teaser uses this; the full catalog lives on /anti-patterns. + return { + patterns: CURATED_CATEGORIES.map((c) => ({ name: c.name, items: c.do })), + antipatterns: CURATED_CATEGORIES.map((c) => ({ name: c.name, items: c.dont })), + }; +} + +// Previous SKILL.md parser retained below but disabled; kept as a +// reference for how prefix-style extraction used to work. +function _legacyReadPatterns(rootDir, relativePath = 'source/skills/impeccable/SKILL.md') { const skillPath = path.join(rootDir, relativePath); if (!fs.existsSync(skillPath)) { From e631074a65801bd407bdd68b4ad3ef2e12c78762 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 11:59:02 -0700 Subject: [PATCH 083/125] feat(site): Why Impeccable section with tabbed feature loop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit New section 04 with a vertical tab list on the left and a panel on the right. Seven items covering the actual differentiators: 1. Intentional design — PRODUCT.md + DESIGN.md + shape as the opposite of one-shot-mock tools. 2. Brand and product, both — the register split, called out against frontend-design-style single-mode skills. 3. Production codebases — reads your design system, daily-driver. 4. Where you code — IDE-native, no canvas, no handoff. 5. DESIGN.md — Google Stitch spec-compliant, interoperable. 6. CI/CD-ready — CLI + JSON output for PR gates. 7. Chrome extension — 25 checks, one click, any page. Section numbers bumped: Visual 04→05, Install 05→06, Changelog 06→07, FAQ 07→08. Sticky nav updated to match. Arrow-key tab navigation, aria-selected, hidden attr on inactive panels, subtle fade on switch, respects prefers-reduced-motion. Vertical layout on desktop, stacked on mobile. --- public/app.js | 35 +++++++ public/css/workflow.css | 207 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 88 +++++++++++++++-- 3 files changed, 320 insertions(+), 10 deletions(-) diff --git a/public/app.js b/public/app.js index 1b54a7054..397fdc563 100644 --- a/public/app.js +++ b/public/app.js @@ -214,11 +214,46 @@ function init() { initFrameworkViz(); initFoundationGrid(); initSectionNav(); + initWhyTabs(); loadContent(); document.body.classList.add("loaded"); } +function initWhyTabs() { + const container = document.querySelector('.why-layout'); + if (!container) return; + const tabs = Array.from(container.querySelectorAll('.why-tab')); + const panels = Array.from(container.querySelectorAll('.why-panel')); + if (!tabs.length || !panels.length) return; + + const activate = (index) => { + tabs.forEach((tab, i) => { + const on = i === index; + tab.classList.toggle('is-active', on); + tab.setAttribute('aria-selected', on ? 'true' : 'false'); + }); + panels.forEach((panel, i) => { + const on = i === index; + panel.classList.toggle('is-active', on); + if (on) panel.removeAttribute('hidden'); + else panel.setAttribute('hidden', ''); + }); + }; + + tabs.forEach((tab, index) => { + tab.addEventListener('click', () => activate(index)); + tab.addEventListener('keydown', (e) => { + if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; + e.preventDefault(); + const dir = e.key === 'ArrowDown' ? 1 : -1; + const next = (index + dir + tabs.length) % tabs.length; + tabs[next].focus(); + activate(next); + }); + }); +} + if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", init); } else { diff --git a/public/css/workflow.css b/public/css/workflow.css index cbdf3c5cf..7101f8814 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1366,3 +1366,210 @@ transform: translateY(0); } } + +/* ============================================ + WHY IMPECCABLE — tabbed feature loop + ============================================ */ + +.why-section { + padding: var(--spacing-3xl) 0; + max-width: var(--width-max); + margin: 0 auto; + padding-left: var(--spacing-xl); + padding-right: var(--spacing-xl); +} + +.why-content .section-lead { + max-width: 42ch; + margin-bottom: var(--spacing-2xl); +} + +.why-layout { + display: grid; + grid-template-columns: minmax(280px, 360px) 1fr; + gap: var(--spacing-2xl); + align-items: start; +} + +.why-tabs { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0; + border-top: 1px solid var(--color-mist); +} + +.why-tabs li { + border-bottom: 1px solid var(--color-mist); +} + +.why-tab { + display: grid; + grid-template-columns: 40px 1fr; + gap: var(--spacing-sm); + align-items: baseline; + width: 100%; + padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 0; + background: transparent; + border: 0; + border-left: 2px solid transparent; + padding-left: var(--spacing-sm); + cursor: pointer; + text-align: left; + font-family: var(--font-body); + color: var(--color-ash); + transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out); +} + +.why-tab-num { + font-family: var(--font-mono); + font-size: 0.6875rem; + letter-spacing: 0.18em; + color: var(--color-ash); + transition: color 180ms var(--ease-out); +} + +.why-tab-label { + font-family: var(--font-display); + font-size: 1.125rem; + font-weight: 400; + line-height: 1.2; +} + +.why-tab:hover { + color: var(--color-ink); +} + +.why-tab:hover .why-tab-num { + color: var(--color-charcoal); +} + +.why-tab.is-active { + color: var(--color-ink); + border-left-color: var(--color-accent); +} + +.why-tab.is-active .why-tab-num { + color: var(--color-accent); +} + +.why-tab:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + +.why-panels { + position: relative; + min-height: 280px; + padding-left: var(--spacing-md); +} + +.why-panel { + display: none; + max-width: 60ch; + animation: whyFadeIn 260ms var(--ease-out); +} + +.why-panel.is-active { + display: block; +} + +.why-panel-title { + font-family: var(--font-display); + font-style: italic; + font-weight: 400; + font-size: clamp(1.75rem, 3vw, 2.5rem); + line-height: 1.1; + color: var(--color-ink); + margin: 0 0 var(--spacing-md); + letter-spacing: -0.01em; +} + +.why-panel-body { + font-family: var(--font-body); + font-size: 1.0625rem; + line-height: 1.65; + color: var(--color-charcoal); + margin: 0 0 var(--spacing-md); +} + +.why-panel-body em { + font-style: italic; + color: var(--color-ink); + font-weight: 500; +} + +.why-panel-body a { + color: var(--color-ink); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: var(--color-accent); +} + +.why-panel-body a:hover { + color: var(--color-accent); +} + +.why-panel-body code { + font-family: var(--font-mono); + font-size: 0.875em; + background: var(--color-mist); + padding: 2px 6px; + border-radius: 3px; + color: var(--color-ink); +} + +.why-panel-meta { + font-family: var(--font-mono); + font-size: 0.75rem; + letter-spacing: 0.05em; + color: var(--color-ash); + margin: var(--spacing-md) 0 0; +} + +.why-panel-meta code { + font-family: var(--font-mono); + font-size: 0.875em; + color: var(--color-charcoal); +} + +.why-panel-meta a { + color: var(--color-ink); + text-decoration: underline; + text-underline-offset: 3px; + text-decoration-color: var(--color-accent); +} + +.why-panel-meta a:hover { color: var(--color-accent); } + +@keyframes whyFadeIn { + from { opacity: 0; transform: translateY(6px); } + to { opacity: 1; transform: translateY(0); } +} + +@media (prefers-reduced-motion: reduce) { + .why-panel { animation: none; } +} + +@media (max-width: 900px) { + .why-section { + padding-left: var(--spacing-md); + padding-right: var(--spacing-md); + } + .why-layout { + grid-template-columns: 1fr; + gap: var(--spacing-lg); + } + .why-panels { + padding-left: 0; + min-height: auto; + } + .why-tab-label { + font-size: 1rem; + } + .why-tab-num { + font-size: 0.625rem; + } +} diff --git a/public/index.html b/public/index.html index ebee82c22..df08eb076 100644 --- a/public/index.html +++ b/public/index.html @@ -75,10 +75,11 @@ 01Foundation 02Language 03Antidote - 04Visual - 05Install - 06New - 07FAQ + 04Why + 05Visual + 06Install + 07New + 08FAQ @@ -286,10 +287,77 @@
    - -
    + +
    04 +

    Why Impeccable

    +
    +
    +

    Seven reasons this isn't another AI design tool.

    + +
    +
      +
      2. +
      3. +
      4. +
      5. +
      6. +
      7. +
      8. +
    + +
    +
    +

    Design that knows who it's for.

    +

    Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in PRODUCT.md and DESIGN.md and loads them on every command. The output is design that fits the actual business, not a generic impression of one.

    +

    /impeccable teach · /impeccable document · /impeccable shape

    +
    + + + + + + + + + + + + +
    +
    +
    +
    + + +
    +
    + 05

    Visual Mode

    @@ -330,7 +398,7 @@
    - 05 + 06

    Get Started

    @@ -505,7 +573,7 @@
    - 06 + 07

    What's New

    @@ -650,10 +718,10 @@
    - +
    - 07 + 08

    Frequently Asked Questions

    From 03a1953ba7eef2c4e980b775a1312563ca99a764 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 22 Apr 2026 12:05:19 -0700 Subject: [PATCH 084/125] feat(site): add visuals + auto-rotate to Why Impeccable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per-panel storytelling visualizations, pure HTML/CSS, no image assets: - 01 Intentional design: "Generic AI" dark/purple gradient card vs. warm editorial card with /impeccable vocabulary side by side. - 02 Brand and product, both: tiny brand mock (italic display headline) vs. product mock (mono/stats rows). - 03 Production codebases: dark terminal showing /impeccable polish reading DESIGN.md tokens and component APIs. - 04 Where you code: prompt bar with blinking caret + 4×2 grid of harness logos (Claude, Cursor, Codex, Gemini, Copilot, Antigravity, Kiro, OpenCode). - 05 DESIGN.md: a file-view of the six Stitch sections with a "Stitch spec" badge, plus an interop tagline. - 06 CI/CD: terminal showing `impeccable detect` failing CI with three issues and exit 1. - 07 Chrome extension: browser chrome + floating extension popup listing detections and two magenta outline boxes over "page content". Auto-rotation: 7s per tab, pauses on hover, stops entirely on any click/keyboard interaction (user-initiated navigation wins). Thin magenta progress bar animates on the active tab's left accent as the rotation progresses. IntersectionObserver gates the whole timer so it only runs while the section is on screen. prefers-reduced-motion disables the auto-rotation and the progress animation. Dropped the "Seven reasons..." lead line. --- public/app.js | 76 +++++- public/css/workflow.css | 584 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 144 +++++++++- 3 files changed, 792 insertions(+), 12 deletions(-) diff --git a/public/app.js b/public/app.js index 397fdc563..0de7d11db 100644 --- a/public/app.js +++ b/public/app.js @@ -227,11 +227,22 @@ function initWhyTabs() { const panels = Array.from(container.querySelectorAll('.why-panel')); if (!tabs.length || !panels.length) return; - const activate = (index) => { + const CYCLE_MS = 7000; + const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; + let current = 0; + let timer = null; + let autoRotate = !reducedMotion; + let visible = false; + + const activate = (index, fromAuto = false) => { + current = index; tabs.forEach((tab, i) => { const on = i === index; tab.classList.toggle('is-active', on); tab.setAttribute('aria-selected', on ? 'true' : 'false'); + // Reset cycling class, re-add on the new active tab so the + // progress indicator restarts cleanly. + tab.classList.remove('is-cycling'); }); panels.forEach((panel, i) => { const on = i === index; @@ -239,19 +250,80 @@ function initWhyTabs() { if (on) panel.removeAttribute('hidden'); else panel.setAttribute('hidden', ''); }); + if (autoRotate && visible) { + // Force reflow so the animation restart is picked up. + const active = tabs[index]; + void active.offsetWidth; + active.classList.add('is-cycling'); + } + }; + + const scheduleNext = () => { + clearTimeout(timer); + if (!autoRotate || !visible) return; + timer = setTimeout(() => { + const next = (current + 1) % tabs.length; + activate(next, true); + scheduleNext(); + }, CYCLE_MS); + }; + + const stopAuto = () => { + autoRotate = false; + clearTimeout(timer); + tabs.forEach((t) => t.classList.remove('is-cycling')); }; tabs.forEach((tab, index) => { - tab.addEventListener('click', () => activate(index)); + tab.addEventListener('click', () => { + stopAuto(); + activate(index); + }); tab.addEventListener('keydown', (e) => { if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return; e.preventDefault(); + stopAuto(); const dir = e.key === 'ArrowDown' ? 1 : -1; const next = (index + dir + tabs.length) % tabs.length; tabs[next].focus(); activate(next); }); }); + + container.addEventListener('mouseenter', () => { + // Pause auto-rotation on hover. Resume only if still allowed and + // user hasn't interacted (stopAuto flips autoRotate off). + clearTimeout(timer); + tabs.forEach((t) => t.classList.remove('is-cycling')); + }); + container.addEventListener('mouseleave', () => { + if (autoRotate && visible) { + // Re-apply cycling class to current tab and resume the timer. + const active = tabs[current]; + void active.offsetWidth; + active.classList.add('is-cycling'); + scheduleNext(); + } + }); + + // Observe visibility so we only rotate while the user can see it. + const io = new IntersectionObserver((entries) => { + entries.forEach((e) => { + visible = e.isIntersecting; + if (visible) { + if (autoRotate) { + const active = tabs[current]; + void active.offsetWidth; + active.classList.add('is-cycling'); + scheduleNext(); + } + } else { + clearTimeout(timer); + tabs.forEach((t) => t.classList.remove('is-cycling')); + } + }); + }, { threshold: 0.35 }); + io.observe(container); } if (document.readyState === "loading") { diff --git a/public/css/workflow.css b/public/css/workflow.css index 7101f8814..13d8f70d8 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -1573,3 +1573,587 @@ font-size: 0.625rem; } } + +/* ============================================ + WHY — per-panel visuals + auto-rotation + ============================================ */ + +.why-tab-progress { + position: absolute; + left: -2px; + top: 0; + bottom: 0; + width: 2px; + background: var(--color-accent); + transform-origin: top; + transform: scaleY(0); + pointer-events: none; + opacity: 0; + transition: opacity 180ms var(--ease-out); +} + +.why-tab { position: relative; } +.why-tab.is-active .why-tab-progress { opacity: 1; } +.why-tab.is-active.is-cycling .why-tab-progress { + animation: whyTabProgress var(--why-cycle-ms, 7000ms) linear forwards; +} + +@keyframes whyTabProgress { + from { transform: scaleY(0); } + to { transform: scaleY(1); } +} + +@media (prefers-reduced-motion: reduce) { + .why-tab.is-active.is-cycling .why-tab-progress { + animation: none; + transform: scaleY(1); + } +} + +/* Visual frame — common base */ +.why-visual { + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 8px; + padding: var(--spacing-md); + margin-bottom: var(--spacing-md); + min-height: 240px; + display: flex; + align-items: stretch; + position: relative; + overflow: hidden; +} + +/* ─ Panel 01: Generic vs PRODUCT.md ─ */ +.why-visual--compare { + gap: var(--spacing-md); +} +.why-compare-card { + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; + min-width: 0; +} +.why-compare-label { + font-family: var(--font-mono); + font-size: 0.625rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-slop-card { + flex: 1; + background: linear-gradient(135deg, oklch(35% 0.14 280), oklch(55% 0.18 220)); + border-radius: 10px; + padding: 14px; + color: white; + display: flex; + flex-direction: column; + gap: 6px; + box-shadow: 0 20px 40px oklch(40% 0.14 270 / 0.25); +} +.why-slop-pill { + font-family: 'Inter', system-ui, sans-serif; + font-size: 9px; + font-weight: 700; + letter-spacing: 0.12em; + background: rgba(255, 255, 255, 0.2); + padding: 2px 6px; + border-radius: 999px; + align-self: flex-start; +} +.why-slop-title { + font-family: 'Inter', system-ui, sans-serif; + font-size: 14px; + font-weight: 700; + background: linear-gradient(135deg, #fff, #c4b5fd); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + line-height: 1.1; +} +.why-slop-line { + height: 4px; + background: rgba(255, 255, 255, 0.15); + border-radius: 2px; +} +.why-slop-line--short { width: 60%; } +.why-slop-cta { + font-family: 'Inter', system-ui, sans-serif; + font-size: 10px; + font-weight: 600; + padding: 6px 10px; + background: rgba(255, 255, 255, 0.2); + border-radius: 6px; + align-self: flex-start; + margin-top: auto; +} +.why-impeccable-card { + flex: 1; + background: var(--color-cream); + border: 1px solid var(--color-mist); + padding: 14px; + display: flex; + flex-direction: column; + gap: 6px; +} +.why-impeccable-kicker { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-accent); +} +.why-impeccable-title { + font-family: var(--font-display); + font-size: 22px; + line-height: 1.05; + color: var(--color-ink); +} +.why-impeccable-title em { + font-style: italic; + color: var(--color-accent); +} +.why-impeccable-line { + height: 4px; + background: var(--color-mist); + border-radius: 2px; +} +.why-impeccable-line--short { width: 55%; } +.why-impeccable-cta { + font-family: var(--font-body); + font-size: 11px; + font-weight: 500; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-ink); + border-bottom: 1.5px solid var(--color-ink); + align-self: flex-start; + margin-top: auto; + padding-bottom: 3px; +} + +/* ─ Panel 02: Brand vs Product registers ─ */ +.why-visual--registers { + gap: var(--spacing-md); +} +.why-register { + flex: 1; + display: flex; + flex-direction: column; + gap: 10px; + min-width: 0; +} +.why-register-label { + font-family: var(--font-mono); + font-size: 0.625rem; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-accent); +} +.why-register-mock { + flex: 1; + border-radius: 6px; + padding: 18px; + display: flex; + flex-direction: column; + justify-content: center; +} +.why-register-mock--brand { + background: var(--color-cream); + border: 1px solid var(--color-mist); + gap: 12px; +} +.why-brand-hero-mono { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.24em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-brand-hero-title { + font-family: var(--font-display); + font-size: 28px; + line-height: 1; + color: var(--color-ink); + letter-spacing: -0.02em; +} +.why-brand-hero-title em { + font-style: italic; + color: var(--color-accent); +} +.why-register-mock--product { + background: var(--color-paper); + border: 1px solid var(--color-mist); + padding: 0; + gap: 0; +} +.why-product-row { + display: flex; + justify-content: space-between; + align-items: baseline; + padding: 10px 14px; + border-bottom: 1px solid var(--color-mist); +} +.why-product-row:last-child { border-bottom: 0; } +.why-product-k { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-ash); +} +.why-product-v { + font-family: var(--font-body); + font-size: 14px; + font-weight: 500; + color: var(--color-ink); +} + +/* ─ Panel 03: Terminal output ─ */ +.why-visual--terminal, +.why-visual--ci { + padding: 0; + background: oklch(12% 0 0); + border-color: oklch(18% 0 0); +} +.why-terminal { + width: 100%; + display: flex; + flex-direction: column; +} +.why-terminal-header { + display: flex; + align-items: center; + gap: 6px; + padding: 10px 14px; + border-bottom: 1px solid oklch(20% 0 0); + background: oklch(14% 0 0); + border-radius: 7px 7px 0 0; +} +.why-terminal-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: oklch(35% 0 0); +} +.why-terminal-title { + font-family: var(--font-mono); + font-size: 11px; + color: oklch(65% 0 0); + margin-left: 10px; +} +.why-terminal-body { + padding: 14px; + font-family: var(--font-mono); + font-size: 12px; + line-height: 1.7; + color: oklch(80% 0 0); +} +.why-terminal-line { white-space: pre; } +.why-terminal-line--prompt { color: oklch(90% 0 0); } +.why-terminal-prompt { color: var(--color-accent); margin-right: 4px; } +.why-terminal-ok { color: oklch(75% 0.15 145); } +.why-terminal-arrow { color: var(--color-accent); } +.why-terminal-line--hint { + margin-top: 6px; + color: oklch(90% 0 0); +} + +/* ─ Panel 04: Harness grid ─ */ +.why-visual--harnesses { + flex-direction: column; + padding: 16px; + gap: 14px; +} +.why-prompt-bar { + font-family: var(--font-mono); + font-size: 12px; + color: var(--color-ink); + background: var(--color-cream); + border: 1px solid var(--color-mist); + border-radius: 4px; + padding: 8px 12px; + display: flex; + align-items: center; + gap: 2px; +} +.why-prompt-slash { + color: var(--color-accent); + margin-right: 4px; + font-weight: 500; +} +.why-prompt-caret { + display: inline-block; + width: 7px; + height: 14px; + background: var(--color-accent); + margin-left: 2px; + animation: whyCaret 1.1s steps(1) infinite; +} +@keyframes whyCaret { + 0%, 50% { opacity: 1; } + 50.01%, 100% { opacity: 0; } +} +.why-harness-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; + flex: 1; +} +.why-harness { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + padding: 10px 4px; + background: var(--color-cream); + border: 1px solid var(--color-mist); + border-radius: 6px; + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--color-charcoal); +} +.why-harness img { + width: 24px; + height: 24px; + object-fit: contain; + opacity: 0.85; +} + +/* ─ Panel 05: DESIGN.md file ─ */ +.why-visual--designmd { + padding: 0; +} +.why-designmd-file { + flex: 1; + display: flex; + flex-direction: column; + background: var(--color-paper); + border-radius: 7px; +} +.why-designmd-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 14px; + border-bottom: 1px solid var(--color-mist); + background: var(--color-cream); + border-radius: 7px 7px 0 0; +} +.why-designmd-filename { + font-family: var(--font-mono); + font-size: 11px; + font-weight: 500; + color: var(--color-ink); +} +.why-designmd-badge { + font-family: var(--font-mono); + font-size: 9px; + letter-spacing: 0.15em; + text-transform: uppercase; + color: var(--color-accent); + background: var(--color-accent-dim); + border: 1px solid var(--color-accent-soft); + padding: 3px 8px; + border-radius: 999px; +} +.why-designmd-sections { + list-style: none; + padding: 10px 14px; + margin: 0; + display: flex; + flex-direction: column; + font-family: var(--font-mono); + font-size: 12px; + line-height: 2; + color: var(--color-ink); +} +.why-designmd-num { + color: var(--color-accent); + margin-right: 8px; + font-weight: 500; +} +.why-designmd-footer { + padding: 10px 14px; + border-top: 1px solid var(--color-mist); + font-family: var(--font-display); + font-style: italic; + font-size: 13px; + color: var(--color-charcoal); +} + +/* ─ Panel 06: CI output ─ */ +.why-ci-window { + width: 100%; + display: flex; + flex-direction: column; +} +.why-ci-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 14px; + border-bottom: 1px solid oklch(20% 0 0); + background: oklch(14% 0 0); + border-radius: 7px 7px 0 0; +} +.why-ci-branch { + font-family: var(--font-mono); + font-size: 11px; + color: oklch(75% 0 0); +} +.why-ci-status { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; + padding: 2px 8px; + border-radius: 999px; +} +.why-ci-status--fail { + color: oklch(78% 0.18 25); + background: oklch(30% 0.15 25 / 0.3); +} +.why-ci-body { + padding: 14px; + font-family: var(--font-mono); + font-size: 12px; + line-height: 1.8; + color: oklch(80% 0 0); +} +.why-ci-line { color: oklch(85% 0 0); } +.why-ci-cmd { color: var(--color-accent); margin-right: 6px; } +.why-ci-issue { + display: flex; + align-items: baseline; + gap: 10px; + padding-left: 4px; + color: oklch(85% 0 0); +} +.why-ci-issue code { + background: transparent; + color: oklch(70% 0.12 220); + padding: 0; + font-size: 1em; +} +.why-ci-x { color: oklch(75% 0.18 25); } +.why-ci-summary { + margin-top: 8px; + padding-top: 8px; + border-top: 1px solid oklch(20% 0 0); + font-weight: 500; + color: oklch(85% 0 0); +} + +/* ─ Panel 07: Chrome extension ─ */ +.why-visual--extension { + padding: 0; + background: var(--color-cream); +} +.why-browser { + flex: 1; + display: flex; + flex-direction: column; + background: var(--color-paper); + border-radius: 7px; + overflow: hidden; +} +.why-browser-chrome { + display: flex; + align-items: center; + gap: 6px; + padding: 10px 14px; + background: var(--color-mist); + border-bottom: 1px solid oklch(86% 0 0); +} +.why-browser-dot { + width: 9px; + height: 9px; + border-radius: 50%; + background: oklch(75% 0 0); +} +.why-browser-url { + margin-left: 12px; + padding: 3px 10px; + background: var(--color-paper); + border-radius: 4px; + font-family: var(--font-mono); + font-size: 10px; + color: var(--color-charcoal); + flex: 1; +} +.why-browser-body { + flex: 1; + position: relative; + padding: 20px; + background: + linear-gradient(var(--color-cream), var(--color-cream)) padding-box, + repeating-linear-gradient(90deg, transparent 0 60px, var(--color-mist) 60px 61px); +} +.why-ext-popup { + position: absolute; + top: 16px; + right: 16px; + width: 180px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + border-radius: 6px; + box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12); + overflow: hidden; + z-index: 2; +} +.why-ext-popup-header { + font-family: var(--font-mono); + font-size: 10px; + letter-spacing: 0.1em; + text-transform: uppercase; + color: var(--color-ink); + padding: 8px 12px; + background: var(--color-cream); + border-bottom: 1px solid var(--color-mist); +} +.why-ext-popup-row { + display: flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + font-size: 11px; + color: var(--color-charcoal); + border-bottom: 1px solid var(--color-mist); +} +.why-ext-popup-row:last-child { border-bottom: 0; } +.why-ext-sev { + color: var(--color-accent); + font-weight: 600; +} +.why-ext-overlay-a, +.why-ext-overlay-b { + position: absolute; + border: 2px solid var(--color-accent); + border-radius: 4px; + pointer-events: none; +} +.why-ext-overlay-a { + left: 20px; + top: 30px; + width: 42%; + height: 36px; +} +.why-ext-overlay-b { + left: 20px; + bottom: 24px; + width: 30%; + height: 30px; +} + +/* Mobile */ +@media (max-width: 700px) { + .why-visual { min-height: 200px; } + .why-harness-grid { grid-template-columns: repeat(3, 1fr); } + .why-compare-card, .why-register { gap: 8px; } +} diff --git a/public/index.html b/public/index.html index df08eb076..efa700036 100644 --- a/public/index.html +++ b/public/index.html @@ -294,57 +294,181 @@

    Why Impeccable

    -

    Seven reasons this isn't another AI design tool.

    -
      -
      2. -
      3. -
      4. -
      5. -
      6. -
      7. -
      8. +
      9. +
      10. +
      11. +
      12. +
      13. +
      14. +
    +
    +
    + Generic AI output +
    +
    PRO
    +
    Boost your workflow
    +
    +
    +
    Get Started →
    +
    +
    +
    + With PRODUCT.md loaded +
    + Vol. 03 +
    Design with intent.
    +
    +
    +
    Read the brief →
    +
    +
    +

    Design that knows who it's for.

    Most AI tools one-shot a plausible-looking mock. Impeccable starts with a conversation: audience, brand personality, anti-references, aesthetic direction. It captures the answer in PRODUCT.md and DESIGN.md and loads them on every command. The output is design that fits the actual business, not a generic impression of one.

    /impeccable teach · /impeccable document · /impeccable shape

    -

    Browse the full catalog →

    -

    Works in Claude Code, Cursor, Codex, Gemini CLI, Antigravity, Kiro, OpenCode, and more.

    @@ -1155,9 +1154,8 @@ diff --git a/public/privacy.html b/public/privacy.html index dd8a16008..21421ef0e 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -33,8 +33,7 @@ diff --git a/public/sitemap.xml b/public/sitemap.xml index eda7a842d..638e3b3e6 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -22,17 +22,11 @@ 0.9 - https://impeccable.style/anti-patterns - 2026-04-10 + https://impeccable.style/slop + 2026-04-23 weekly 0.9 - - https://impeccable.style/visual-mode - 2026-04-10 - weekly - 0.8 - https://impeccable.style/tutorials 2026-04-10 diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index 36ca8a383..b29316d71 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -1,13 +1,14 @@ /** - * Generate static HTML files for /skills, /anti-patterns, /tutorials. + * Generate static HTML files for /docs, /slop, /tutorials, /live-mode, + * /designing. * * Called from both scripts/build.js (before buildStaticSite) and * server/index.js (at module load), so dev and prod share the same * code path and output shape. * - * Output lives under public/docs/, public/anti-patterns/, - * public/tutorials/, all gitignored. Bun's HTML loader picks them up - * the same way it picks up the hand-authored pages. + * Output lives under public/docs/, public/slop/, public/tutorials/, all + * gitignored. Bun's HTML loader picks them up the same way it picks up + * the hand-authored pages. */ import fs from 'node:fs'; @@ -425,31 +426,42 @@ function groupRulesBySection(rules) { } /** - * Render the anti-patterns sidebar: a table of contents of rule sections - * with per-section rule counts. Every entry anchor-jumps to the section - * in the main column. + * Render the /slop sidebar: a table of contents for the four top-level + * sections (See it / Try it live / The catalog / Run it yourself), with + * the catalog's per-section anchors nested under "The catalog". */ -function renderAntiPatternsSidebar(grouped) { - const entries = grouped.order +function renderSlopSidebar(grouped, gallerySize) { + const catalogEntries = grouped.order .filter((section) => grouped.bySection[section]?.length > 0) .map((section) => { const slug = slugify(section); const count = grouped.bySection[section].length; - return `
  • ${escapeHtml(section)}${count}
    • `; + return `
  • ${escapeHtml(section)}${count}
    • `; }) .join('\n'); + const catalogTotal = grouped.order + .reduce((sum, s) => sum + (grouped.bySection[s]?.length || 0), 0); + return ` -
    @@ -1244,61 +1334,6 @@ ${bodyHtml} `; } -/** - * Render the /anti-patterns main column content. - */ -function renderAntiPatternsMain(grouped, totalRules) { - let sectionsHtml = ''; - for (const section of grouped.order) { - const rules = grouped.bySection[section] || []; - if (rules.length === 0) continue; - const slug = slugify(section); - sectionsHtml += ` -
    -
    -

    ${escapeHtml(section)}

    -

    ${rules.length} ${rules.length === 1 ? 'rule' : 'rules'}

    -
    -
    -${rules.map(renderRuleCard).join('\n')} -
    -
    `; - } - - const detectedCount = grouped.order - .flatMap((s) => grouped.bySection[s] || []) - .filter((r) => r.layer !== 'llm').length; - const llmCount = totalRules - detectedCount; - - return ` -
    -
    -

    ${totalRules} rules

    -

    Anti-patterns

    -

    The full catalog of patterns /impeccable teaches against. ${detectedCount} are caught by a deterministic detector (npx impeccable detect or the browser extension). ${llmCount} can only be flagged by /impeccable critique's LLM review pass. Want to see them live on real pages? Try Visual Mode, or iterate past them on your own dev server with Live Mode.

    -
    - -
    - - How to read this - - -
    -

    AI slop rules flag the visible tells of AI-generated UIs. Quality rules flag general design mistakes that are not AI-specific but still hurt the work. Each rule also shows how it is detected:

    -
    -
    CLI
    Deterministic. Runs from npx impeccable detect on files, no browser required.
    -
    Browser
    Deterministic, but needs real browser layout. Runs via the browser extension or Puppeteer, not the plain CLI.
    -
    LLM only
    No deterministic detector. Caught by /impeccable critique during its LLM design review.
    -
    -
    -
    - -
    -${sectionsHtml} -
    -
    `; -} - /** * Entry point. Generates all sub-page HTML files. * @@ -1309,12 +1344,18 @@ export async function generateSubPages(rootDir) { const data = await buildSubPageData(rootDir); const outDirs = { docs: path.join(rootDir, 'public/docs'), - antiPatterns: path.join(rootDir, 'public/anti-patterns'), + slop: path.join(rootDir, 'public/slop'), tutorials: path.join(rootDir, 'public/tutorials'), - visualMode: path.join(rootDir, 'public/visual-mode'), liveMode: path.join(rootDir, 'public/live-mode'), designing: path.join(rootDir, 'public/designing'), }; + // Clean up legacy output dirs from /anti-patterns and /visual-mode, + // which have been merged into /slop. A stray file in either would + // otherwise keep getting served by Bun's static handler. + for (const legacy of ['public/anti-patterns', 'public/visual-mode']) { + const dir = path.join(rootDir, legacy); + if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true }); + } // Fresh output dirs each time so stale files don't linger. for (const dir of Object.values(outDirs)) { @@ -1363,20 +1404,21 @@ export async function generateSubPages(rootDir) { generated.push(out); } - // Anti-patterns index: single page, docs-browser shell with TOC sidebar. + // Slop: merged anti-patterns catalog + visual-mode overlay demo + gallery. + // Single page, docs-browser shell with a nested TOC sidebar. { const grouped = groupRulesBySection(data.rules); - const sidebar = renderAntiPatternsSidebar(grouped); - const main = renderAntiPatternsMain(grouped, data.rules.length); + const sidebar = renderSlopSidebar(grouped, GALLERY_ITEMS.length); + const main = renderSlopMain(grouped, data.rules.length); const html = renderPage({ - title: 'Anti-patterns | Impeccable', - description: `${data.rules.length} deterministic detection rules that flag the visible tells of AI-generated interfaces and common quality issues. Used by npx impeccable detect and the browser extension.`, + title: 'Slop | Impeccable', + description: `${data.rules.length} patterns that mark an interface as AI-generated, plus the live detection overlay that catches them in place. The rule catalog behind npx impeccable detect, the browser extension, and /impeccable critique.`, bodyHtml: wrapInDocsLayout(sidebar, main), - activeNav: 'anti-patterns', - canonicalPath: '/anti-patterns', - bodyClass: 'sub-page skills-layout-page anti-patterns-page', + activeNav: 'slop', + canonicalPath: '/slop', + bodyClass: 'sub-page skills-layout-page slop-page', }); - const out = path.join(outDirs.antiPatterns, 'index.html'); + const out = path.join(outDirs.slop, 'index.html'); fs.writeFileSync(out, html, 'utf-8'); generated.push(out); } @@ -1398,25 +1440,9 @@ export async function generateSubPages(rootDir) { generated.push(out); } - // Visual Mode: single standalone page, no sidebar, single-column layout. - { - const html = renderPage({ - title: 'Visual Mode | Impeccable', - description: - 'See every anti-pattern flagged directly on the page. Live detection overlay from Impeccable, available via /impeccable critique, npx impeccable live, or the upcoming Chrome extension.', - bodyHtml: renderVisualModeMain(), - activeNav: 'visual-mode', - canonicalPath: '/visual-mode', - bodyClass: 'sub-page visual-mode-page-body', - }); - const out = path.join(outDirs.visualMode, 'index.html'); - fs.writeFileSync(out, html, 'utf-8'); - generated.push(out); - } - - // Live Mode: marketing landing mirroring /visual-mode. Needs live-mode.css - // (not imported by sub-pages.css to keep the base bundle small) and the - // live-demo JS module to animate the demo. + // Live Mode: marketing landing mirroring the other single-column pages. + // Needs live-mode.css (not imported by sub-pages.css to keep the base + // bundle small) and the live-demo JS module to animate the demo. { const extraHead = ` diff --git a/scripts/build.js b/scripts/build.js index 5be6b3ae8..63ea66def 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -259,7 +259,7 @@ async function buildStaticSite(extraEntrypoints = []) { // Older Bun versions (e.g. the one Cloudflare Pages ships) don't dedupe // shared CSS/JS chunks across HTML entrypoints — every entry tries to // emit its own copy, and three different sub-pages all named index.html - // (under skills/, tutorials/, anti-patterns/) collide on the same + // (under docs/, tutorials/, slop/) collide on the same // chunk filename. Including [dir] in the chunk template scopes each // chunk to its entry's directory so the names stay unique even when // dedupe is off. Local Bun still emits a single shared chunk; CF Bun @@ -527,15 +527,17 @@ function generateCFConfig(buildDir) { fs.writeFileSync(path.join(buildDir, '_headers'), headers); // _redirects: rewrite JSON API routes to static files (200 = rewrite, not redirect). - // Also permanent redirects for legacy URLs: /skills -> /docs, /cheatsheet -> /docs. + // Plus permanent redirects for legacy URLs. const redirects = `/api/skills /_data/api/skills.json 200 /api/commands /_data/api/commands.json 200 /api/patterns /_data/api/patterns.json 200 /api/command-source/:id /_data/api/command-source/:id.json 200 -/gallery /visual-mode#try-it-live 301 +/gallery /slop#try-it-live 301 /cheatsheet /docs 301 /skills /docs 301 /skills/:id /docs/:id 301 +/anti-patterns /slop#catalog 301 +/visual-mode /slop#see-it 301 `; fs.writeFileSync(path.join(buildDir, '_redirects'), redirects); @@ -557,7 +559,7 @@ function generateCFConfig(buildDir) { async function build() { console.log('🔨 Building cross-provider design skills...\n'); - // Pre-generate sub-pages (skills, anti-patterns, tutorials) from source + // Pre-generate sub-pages (docs, slop, tutorials, live-mode, designing) from source console.log('📝 Generating sub-pages...'); const { files: subPageFiles } = await generateSubPages(ROOT_DIR); console.log(`✓ Generated ${subPageFiles.length} sub-page(s)\n`); diff --git a/scripts/lib/render-page.js b/scripts/lib/render-page.js index ece3c2a79..437844537 100644 --- a/scripts/lib/render-page.js +++ b/scripts/lib/render-page.js @@ -33,7 +33,7 @@ export function readHeaderPartial() { * the default nav href state. Matches on `data-nav="{activeNav}"`. * * @param {string} headerHtml - * @param {string} activeNav - one of: home, skills, anti-patterns, tutorials, gallery, github + * @param {string} activeNav - one of: home, designing, docs, slop, live, github * @returns {string} */ export function applyActiveNav(headerHtml, activeNav) { diff --git a/scripts/lib/utils.js b/scripts/lib/utils.js index 37b1cbd0e..b94e0daa6 100644 --- a/scripts/lib/utils.js +++ b/scripts/lib/utils.js @@ -272,8 +272,7 @@ export function writeFile(filePath, content) { */ // Curated short-list for the homepage Antidote section. Intentionally // hand-written (not auto-extracted) so the copy stays tight and -// editorial. The long-form catalog lives on /anti-patterns — this is -// the teaser. +// editorial. The long-form catalog lives on /slop — this is the teaser. const CURATED_CATEGORIES = [ { name: 'Typography', @@ -356,7 +355,7 @@ const CURATED_CATEGORIES = [ export function readPatterns(_rootDir, _relativePath) { // Hand-curated list — see CURATED_CATEGORIES above. The homepage - // Antidote teaser uses this; the full catalog lives on /anti-patterns. + // Antidote teaser uses this; the full catalog lives on /slop. return { patterns: CURATED_CATEGORIES.map((c) => ({ name: c.name, items: c.do })), antipatterns: CURATED_CATEGORIES.map((c) => ({ name: c.name, items: c.dont })), diff --git a/server/index.js b/server/index.js index a802204e7..d9ff01b20 100644 --- a/server/index.js +++ b/server/index.js @@ -44,9 +44,11 @@ const server = serve({ // Legacy URL redirects (kept stable for external links and existing users). "/cheatsheet": Response.redirect("/docs", 301), - "/gallery": Response.redirect("/visual-mode#try-it-live", 301), + "/gallery": Response.redirect("/slop#try-it-live", 301), "/skills": Response.redirect("/docs", 301), "/skills/:id": (req) => Response.redirect(`/docs/${req.params.id}`, 301), + "/anti-patterns": Response.redirect("/slop#catalog", 301), + "/visual-mode": Response.redirect("/slop#see-it", 301), // Generated sub-pages — served directly from the pre-generated files "/docs": () => serveGenerated(path.join(ROOT_DIR, "public/docs/index.html")), @@ -54,8 +56,7 @@ const server = serve({ const id = req.params.id.replace(/[^a-z0-9-]/gi, ""); return serveGenerated(path.join(ROOT_DIR, `public/docs/${id}.html`)); }, - "/anti-patterns": () => serveGenerated(path.join(ROOT_DIR, "public/anti-patterns/index.html")), - "/visual-mode": () => serveGenerated(path.join(ROOT_DIR, "public/visual-mode/index.html")), + "/slop": () => serveGenerated(path.join(ROOT_DIR, "public/slop/index.html")), "/live-mode": () => serveGenerated(path.join(ROOT_DIR, "public/live-mode/index.html")), "/designing": () => serveGenerated(path.join(ROOT_DIR, "public/designing/index.html")), "/tutorials": () => serveGenerated(path.join(ROOT_DIR, "public/tutorials/index.html")), From df72ca2a58d930cb9f62489555bfdbf437dc69f7 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 13:28:35 -0700 Subject: [PATCH 120/125] docs(impeccable): clarify live mode param expectations for freeform MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Section 7 no longer reads as default-zero: composition-sized targets, freeform bias toward 1–2 dials on non-tiny surfaces, hard cap of four. Cross-link freeform to §7 in the action loader; sync all harness copies. Made-with: Cursor --- .agents/skills/impeccable/reference/live.md | 30 +++++++++++-------- .claude/skills/impeccable/reference/live.md | 30 +++++++++++-------- .cursor/skills/impeccable/reference/live.md | 30 +++++++++++-------- .gemini/skills/impeccable/reference/live.md | 30 +++++++++++-------- .github/skills/impeccable/reference/live.md | 30 +++++++++++-------- .kiro/skills/impeccable/reference/live.md | 30 +++++++++++-------- .opencode/skills/impeccable/reference/live.md | 30 +++++++++++-------- .pi/skills/impeccable/reference/live.md | 30 +++++++++++-------- .rovodev/skills/impeccable/reference/live.md | 30 +++++++++++-------- .trae-cn/skills/impeccable/reference/live.md | 30 +++++++++++-------- .trae/skills/impeccable/reference/live.md | 30 +++++++++++-------- source/skills/impeccable/reference/live.md | 30 +++++++++++-------- 12 files changed, 216 insertions(+), 144 deletions(-) diff --git a/.agents/skills/impeccable/reference/live.md b/.agents/skills/impeccable/reference/live.md index aab6fa008..dedb9df54 100644 --- a/.agents/skills/impeccable/reference/live.md +++ b/.agents/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.claude/skills/impeccable/reference/live.md b/.claude/skills/impeccable/reference/live.md index c6ff0fa02..c48531628 100644 --- a/.claude/skills/impeccable/reference/live.md +++ b/.claude/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.cursor/skills/impeccable/reference/live.md b/.cursor/skills/impeccable/reference/live.md index 123777f49..1b0cff696 100644 --- a/.cursor/skills/impeccable/reference/live.md +++ b/.cursor/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.gemini/skills/impeccable/reference/live.md b/.gemini/skills/impeccable/reference/live.md index 99fef6802..0587665e1 100644 --- a/.gemini/skills/impeccable/reference/live.md +++ b/.gemini/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.github/skills/impeccable/reference/live.md b/.github/skills/impeccable/reference/live.md index 2ed9258e8..0aa0f55dd 100644 --- a/.github/skills/impeccable/reference/live.md +++ b/.github/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.kiro/skills/impeccable/reference/live.md b/.kiro/skills/impeccable/reference/live.md index 0d4c79d7f..1afdd2d13 100644 --- a/.kiro/skills/impeccable/reference/live.md +++ b/.kiro/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.opencode/skills/impeccable/reference/live.md b/.opencode/skills/impeccable/reference/live.md index b3c387ecc..cc0536279 100644 --- a/.opencode/skills/impeccable/reference/live.md +++ b/.opencode/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.pi/skills/impeccable/reference/live.md b/.pi/skills/impeccable/reference/live.md index 9d6add218..1530cda77 100644 --- a/.pi/skills/impeccable/reference/live.md +++ b/.pi/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.rovodev/skills/impeccable/reference/live.md b/.rovodev/skills/impeccable/reference/live.md index 06a9160a1..dc52b8956 100644 --- a/.rovodev/skills/impeccable/reference/live.md +++ b/.rovodev/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.trae-cn/skills/impeccable/reference/live.md b/.trae-cn/skills/impeccable/reference/live.md index d5639e2bf..7d5d97fc5 100644 --- a/.trae-cn/skills/impeccable/reference/live.md +++ b/.trae-cn/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/.trae/skills/impeccable/reference/live.md b/.trae/skills/impeccable/reference/live.md index 77fe5580e..837516fa3 100644 --- a/.trae/skills/impeccable/reference/live.md +++ b/.trae/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. diff --git a/source/skills/impeccable/reference/live.md b/source/skills/impeccable/reference/live.md index 10e13851b..df55f8d4b 100644 --- a/source/skills/impeccable/reference/live.md +++ b/source/skills/impeccable/reference/live.md @@ -97,9 +97,9 @@ All three carry `fallback: "agent-driven"`. Follow **Handle fallback** below. ### 3. Load the action's reference -If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. +If `event.action` is `impeccable` (the default freeform action), use SKILL.md's shared laws plus the loaded register reference (`brand.md` or `product.md`). Do not load a sub-command reference. **Freeform is not a pass to skip parameters:** you still follow the composition budget and the freeform bias in **§7 Parameters** below. Sub-command files list MUST-have signature knobs; freeform has no such file, so sizing knobs from surface weight and primary axes is entirely on you. -Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. +Any other `event.action` (`bolder`, `quieter`, `distill`, `polish`, `typeset`, `colorize`, `layout`, `adapt`, `animate`, `delight`, `overdrive`): Read `reference/.md` before planning. Each sub-command encodes a specific discipline; skipping its reference produces generic output. Those files may require specific params; layer them on top of the §7 budget, not instead of it. ### 4. Plan three genuinely distinct directions @@ -181,20 +181,26 @@ The first variant has no `display: none` (visible by default). All others do. If One edit, all variants — the browser's MutationObserver picks everything up in one pass. -### 7. Parameters (optional, 2-5 per variant) +### 7. Parameters (composition-sized, 0–4 per variant) -Each variant can expose coarse knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. +Each variant can expose **coarse** knobs alongside the full HTML/CSS replacement. The browser docks a small panel to the right of the outline with one control per parameter. The user drags/clicks and sees instant feedback: there is zero regeneration cost because the knob toggles a CSS variable or data attribute that the variant's scoped CSS is already authored against. -**When to use.** Any time the variant has a meaningful axis the user might want to dial in: color amount, density, motion intensity, scale ratio. Not micro-level margin tweaks; those defeat the point. +**What “optional” does not mean.** Parameters are not nice-to-have decoration on large work. The word meant “omit controls that are redundant or cosmetic,” not “default to zero because three variants were enough work.” -**Budget scales with the element's visual weight, not the user's curiosity.** Knobs need real estate to produce noticeably different output; slapping three on a small element just crowds the panel without making anything feel tunable. +**When to add.** As soon as the variant’s scoped CSS has a meaningful continuous or stepped axis: density, color amount, type scale, motion intensity, column weight, and so on. If you can imagine the user muttering “a bit tighter” or “a touch more accent” **without** wanting a full regeneration, wire that axis. **Not** micro-margins or one-off nudges; those are not parameters. -- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** A slider can't meaningfully reshape one element; just use variants. -- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0-1 params.** Only add one if it's a clear dominant axis (e.g. density on a card with visible internal rhythm). -- **Medium composition** — section component, nav cluster, dense card, short feature block (6-15 visual children): **2 params.** -- **Large composition** — hero section, full page region, spread layout, anything with strong internal structure (16+ visual children or multiple sub-sections): **3-4 params.** +**Freeform (`action` is `impeccable`) bias.** You did not load `reference/bolder.md` (etc.), so you must **choose** 1–2 signature-like axes yourself. Prefer knobs that sit on the same dimensions as your three directions (e.g. all three riffs on editorial density → expose `density` or a `steps` “air / snug / packed”; two directions differ mostly in chroma → add `color-amount`). A hero, section, or other **large** surface that ships with **0** params needs a one-line reason in your head (e.g. “truly a fixed-point A/B/C comparison, no shared dial”), not a default habit. -When in doubt, fewer. The user can always ask for more variants to explore an axis you didn't expose as a knob. Count by visual children, not by DOM-node depth; a deeply-nested-but-visually-simple card still counts as small. +**Budget scales with the element's visual weight, not token budget.** Knobs need real estate to read as tunable; three sliders on a single control are noise. + +- **Leaf / tiny** — a single button, icon, input, bare heading, solitary paragraph: **0 params.** +- **Small composition** — labeled input, simple card, short callout (≤ ~5 visual children): **0–1** params when one dominant axis is obvious; otherwise **0.** +- **Medium composition** — section component, nav cluster, dense card, short feature block (6–15 visual children): **target 2**; **1** is acceptable if the block is simple; **0** only when variants are truly fixed points. +- **Large composition** — hero section, full page region, spread layout, strong internal structure (16+ visual children or multiple sub-sections): **target 2–3**; **up to 4** when several independent axes (e.g. structure `steps` + `density` + one accent) are all authored in scoped CSS. + +**When in doubt, ask whether a dial exists before defaulting to zero.** The user can always request more variants, but the point of live mode is instant tuning without another Go. Crowding the panel is bad; **under-shipping** knobs on a dense composition is the more common failure for freeform. Count by **visual** children, not DOM depth; a shallow-but-wide hero is still large. + +**Hard cap per variant** — at most **four** parameters so the panel stays legible; rare fifth only if the reference explicitly allows it. **How to declare.** Put a JSON manifest on the variant wrapper: @@ -218,7 +224,7 @@ When in doubt, fewer. The user can always ask for more variants to explore an ax - `steps` — segmented radio. Drives a data attribute `data-p-` on the variant wrapper. Author CSS with `:scope[data-p-density="airy"] .grid { ... }`. Fields: `options` (array of `{value, label}`), `default` (string), `label`. - `toggle` — on/off switch. Drives BOTH a CSS var (`--p-: 0|1`) and a data attribute (present when on, absent when off). Use whichever is more convenient. Fields: `default` (boolean), `label`. -**Signature params per action.** Each action has one or two signature params that MUST be exposed when the variant can meaningfully express them. Check the action's reference file for the list. Layer 1-2 variant-specific params on top. +**Signature params per action.** For named sub-commands, read that action’s `reference/.md` for one or two **MUST** params (e.g. `layout` → `density`). Those are non-negotiable when the design can express them. **Freeform has no file-level MUST**; the **Freeform (`impeccable`) bias** in this section is the stand-in. If the user’s action is both stylized and sub-command (e.g. `colorize`), the sub-command’s MUST list takes precedence for its axes; still respect the **Hard cap** and add no redundant duplicate knobs. **Reset on variant switch.** User dials density on v1, flips to v2, v2 starts at v2's declared defaults. Known limitation; preservation across variants may land later. From 37f79cd0138b62d6428ed52bba1acfd59d79524f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 13:32:32 -0700 Subject: [PATCH 121/125] feat(site): foreground visualize-first workflow on /designing + Case carousel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /designing §01 is reframed around the words → pictures → code arc. The phase sub covers teach, shape, and craft in one breath; the body splits into two labeled micro-steps ("teach · in words" and "shape + craft · in pictures") so the new image-gen spread reads as step 2 of the same flow instead of a separate topic. Generated plates from GPT Image 2 sit as an editorial two-up beside their brand and hi-fi captions. Also fixes a long-standing font-size mismatch where inside .designing-phase-sub fell back to the browser's default monospace. Homepage: inserts a new "Visualize, then build" slot at position 02 of The Case carousel, compact two-plate visual, shifts the remaining eight slots to 03-09. Co-Authored-By: Claude Opus 4.7 (1M context) --- public/assets/openai_image_2_brand.jpg | Bin 0 -> 217600 bytes public/assets/openai_image_2_hifi.jpg | Bin 0 -> 222579 bytes public/css/docs-visuals.css | 149 +++++++++++++++++++------ public/css/workflow.css | 51 +++++++++ public/designing/index.html | 93 +++++++++------ public/index.html | 39 +++++-- scripts/build-sub-pages.js | 73 ++++++------ 7 files changed, 290 insertions(+), 115 deletions(-) create mode 100644 public/assets/openai_image_2_brand.jpg create mode 100644 public/assets/openai_image_2_hifi.jpg diff --git a/public/assets/openai_image_2_brand.jpg b/public/assets/openai_image_2_brand.jpg new file mode 100644 index 0000000000000000000000000000000000000000..121494228f556b685607e50a83f2e911a4658942 GIT binary patch literal 217600 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%0D&g)XL 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

    WMaqVZ<5Hr&5=fni*NZs$qo9F!p`b*fh}4 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

    L1`Rjvh?o) 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%0Am0k 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 z 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
    01 · Start

    From a blank file to a designed feature.

    -

    Run /impeccable teach once per project to establish PRODUCT.md and DESIGN.md. Then reach for /impeccable craft and describe what you want to build. Shape, build, and iterate happen inside one invocation.

    +

    Three commands, one arc. /impeccable teach writes the brief, once per project. /impeccable shape drafts a reference you can look at. /impeccable craft codes toward what you can see. Words, then pictures, then code.

    /impeccable teach - /impeccable craft /impeccable shape + /impeccable craft
    -
    -
    -
    -
    - PRODUCT.md - Written by teach -
    -
    -
    - Register - Product. Design serves the task. +
    +
    + teach · in words +
    +
    +
    + PRODUCT.md + Written by teach
    -
    - Users - SREs on call, reading fast, often in the dark. -
    -
    - Voice - Calm, clinical, no hype. -
    -
    - Anti-references - Purple gradients. Glassmorphism. Hype. +
    +
    + Register + Product. Design serves the task. +
    +
    + Users + SREs on call, reading fast, often in the dark. +
    +
    + Voice + Calm, clinical, no hype. +
    +
    + Anti-references + Purple gradients. Glassmorphism. Hype. +
    -
    -
    -

    Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md.

    -

    From that point on, every command reads both files before generating. Craft, polish, critique, live, all of them.

    +
    +

    Teach runs a short discovery interview about audience, register, voice, and anti-references. It writes PRODUCT.md and, if there's code to scan, a DESIGN.md. Every later command reads both files before generating.

    +
    - +
    + shape + craft · in pictures +

    Since image generation crossed the reference-quality threshold, shape drafts a brand toolkit you can review at a glance, and craft codes toward a hi-fi mock instead of a paragraph.

    + +
    +
    +
    + Auto-generated brand toolkit plate: identity lockups, colour palette, type specimens, icon system, and application mocks for a fictional AI design conference, rendered in warm earth tones. +
    +
    + Shape +

    Brand toolkit. Identity, palette, type, icon language, applications, social tiles, UI direction. One plate, reviewable at a glance. Approved decisions get written into DESIGN.md.

    +
    +
    + +
    +
    + Auto-generated hi-fi landing-page mock: a long vertical editorial comp for a fictional Tokyo AI design conference, in warm earth tones with committed serif display type. +
    +
    + Craft +

    Hi-fi reference. The destination, before the first line of CSS. Craft codes toward a concrete image, not an abstract brief. That is the step change.

    +
    +
    +
    + +

    Plates generated by OpenAI GPT Image 2. Gemini Nano Banana Pro, Imagen 4 Ultra, and Grok Imagen work the same way, via Codex, Gemini CLI, and compatible harnesses.

    +

    @ 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¼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 Designing Docs - Anti-Patterns + Slop Live - Overlay @@ -108,50 +107,76 @@

    diff --git a/public/index.html b/public/index.html index 6dedd6be4..ddd827708 100644 --- a/public/index.html +++ b/public/index.html @@ -88,6 +88,8 @@ + +

    Impeccable

    Design fluency for AI harnesses

    @@ -130,6 +132,8 @@ + +
    @@ -250,13 +254,14 @@
      2. -
      3. -
      4. -
      5. -
      6. -
      7. -
      8. -
      9. +
      10. +
      11. +
      12. +
      13. +
      14. +
      15. +
      16. +
    @@ -298,6 +303,26 @@
    + +
    From e0ab3a73b7f6aa2f3ad931cc8f379edd98981038 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 16:44:46 -0700 Subject: [PATCH 122/125] feat(live + site): preserve variant attr on accept, designing-page redesigns MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Runtime fix in live-browser.js: the 2s static-server fallback in handleAccept now swaps the outer wrapper with the `[data-impeccable-variant="N"]` div itself (+ display:contents), matching what live-accept.mjs writes to disk. Scope rules anchored on the variant attribute keep matching on the non-HMR path, so the accepted design no longer flashes unstyled until reload. Propagated to all harness script copies. /designing: - §03 Polish redesigned as drenched magenta masthead: commands live in the band, three title/description columns beneath on cream. - §04 Maintain redesigned as architectural poster diptych: extract + document vizzes become the hero element, caption below. - §05 Interop section removed. - §05 (was §06) "Pick a register" renamed to "Brand, or product." with a two-lane hairline-divided layout and an auto-selected framing in the sub. Live mode status: BETA → ALPHA across the periodic table, magazine spread, and docs callout, reflecting real-world-testing readiness. Skill bootstrap: removed the `` block from source/SKILL.md (the source repo is the origin; running cleanup-deprecated here would touch legitimate source). CLAUDE.md and AGENTS.md now document the skip. Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .claude/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .cursor/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .gemini/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .github/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .kiro/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .opencode/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .pi/skills/impeccable/SKILL.md | 16 - .pi/skills/impeccable/scripts/live-browser.js | 8 +- .rovodev/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .trae-cn/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- .trae/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- AGENTS.md | 4 + CLAUDE.md | 6 + content/site/skills/live.md | 5 + public/css/docs-visuals.css | 482 ++++++++++-------- public/designing/index.html | 158 +++--- public/index.html | 2 +- public/js/components/framework-viz.js | 8 +- public/js/components/glass-terminal.js | 10 +- public/js/data.js | 4 +- public/live-mode/index.html | 3 +- scripts/build-sub-pages.js | 165 +++--- source/skills/impeccable/SKILL.md | 16 - .../skills/impeccable/scripts/live-browser.js | 8 +- 35 files changed, 524 insertions(+), 611 deletions(-) diff --git a/.agents/skills/impeccable/SKILL.md b/.agents/skills/impeccable/SKILL.md index 873292cfd..576199435 100644 --- a/.agents/skills/impeccable/SKILL.md +++ b/.agents/skills/impeccable/SKILL.md @@ -5,22 +5,6 @@ description: Use when the user wants to design, redesign, shape, critique, audit Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands ($audit, $polish, $critique, etc.) are now accessed through $impeccable (e.g., `$impeccable audit`). I'll clean up the old standalone skill files. Use `$impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .agents/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.agents/skills/impeccable/scripts/live-browser.js b/.agents/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.agents/skills/impeccable/scripts/live-browser.js +++ b/.agents/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.claude/skills/impeccable/SKILL.md b/.claude/skills/impeccable/SKILL.md index e2e7930e8..5978f72de 100644 --- a/.claude/skills/impeccable/SKILL.md +++ b/.claude/skills/impeccable/SKILL.md @@ -11,22 +11,6 @@ allowed-tools: Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .claude/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.claude/skills/impeccable/scripts/live-browser.js b/.claude/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.claude/skills/impeccable/scripts/live-browser.js +++ b/.claude/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.cursor/skills/impeccable/SKILL.md b/.cursor/skills/impeccable/SKILL.md index 7834b5bb1..9f579cd95 100644 --- a/.cursor/skills/impeccable/SKILL.md +++ b/.cursor/skills/impeccable/SKILL.md @@ -7,22 +7,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .cursor/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.cursor/skills/impeccable/scripts/live-browser.js b/.cursor/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.cursor/skills/impeccable/scripts/live-browser.js +++ b/.cursor/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.gemini/skills/impeccable/SKILL.md b/.gemini/skills/impeccable/SKILL.md index bb93640ab..49c8c81eb 100644 --- a/.gemini/skills/impeccable/SKILL.md +++ b/.gemini/skills/impeccable/SKILL.md @@ -6,22 +6,6 @@ version: 3.0.0 Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .gemini/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.gemini/skills/impeccable/scripts/live-browser.js b/.gemini/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.gemini/skills/impeccable/scripts/live-browser.js +++ b/.gemini/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.github/skills/impeccable/SKILL.md b/.github/skills/impeccable/SKILL.md index 30ef89843..47754c347 100644 --- a/.github/skills/impeccable/SKILL.md +++ b/.github/skills/impeccable/SKILL.md @@ -9,22 +9,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .github/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.github/skills/impeccable/scripts/live-browser.js b/.github/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.github/skills/impeccable/scripts/live-browser.js +++ b/.github/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.kiro/skills/impeccable/SKILL.md b/.kiro/skills/impeccable/SKILL.md index c3dc00364..05c07fba1 100644 --- a/.kiro/skills/impeccable/SKILL.md +++ b/.kiro/skills/impeccable/SKILL.md @@ -7,22 +7,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .kiro/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.kiro/skills/impeccable/scripts/live-browser.js b/.kiro/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.kiro/skills/impeccable/scripts/live-browser.js +++ b/.kiro/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.opencode/skills/impeccable/SKILL.md b/.opencode/skills/impeccable/SKILL.md index e186eca85..e9b79285d 100644 --- a/.opencode/skills/impeccable/SKILL.md +++ b/.opencode/skills/impeccable/SKILL.md @@ -11,22 +11,6 @@ allowed-tools: Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .opencode/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.opencode/skills/impeccable/scripts/live-browser.js b/.opencode/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.opencode/skills/impeccable/scripts/live-browser.js +++ b/.opencode/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.pi/skills/impeccable/SKILL.md b/.pi/skills/impeccable/SKILL.md index e1d5b859e..0553686db 100644 --- a/.pi/skills/impeccable/SKILL.md +++ b/.pi/skills/impeccable/SKILL.md @@ -9,22 +9,6 @@ allowed-tools: Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .pi/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.pi/skills/impeccable/scripts/live-browser.js b/.pi/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.pi/skills/impeccable/scripts/live-browser.js +++ b/.pi/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.rovodev/skills/impeccable/SKILL.md b/.rovodev/skills/impeccable/SKILL.md index 12d459937..3e21cada6 100644 --- a/.rovodev/skills/impeccable/SKILL.md +++ b/.rovodev/skills/impeccable/SKILL.md @@ -11,22 +11,6 @@ allowed-tools: Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .rovodev/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.rovodev/skills/impeccable/scripts/live-browser.js b/.rovodev/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.rovodev/skills/impeccable/scripts/live-browser.js +++ b/.rovodev/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.trae-cn/skills/impeccable/SKILL.md b/.trae-cn/skills/impeccable/SKILL.md index 5682fbe4b..f471d8537 100644 --- a/.trae-cn/skills/impeccable/SKILL.md +++ b/.trae-cn/skills/impeccable/SKILL.md @@ -9,22 +9,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .trae-cn/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.trae-cn/skills/impeccable/scripts/live-browser.js b/.trae-cn/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.trae-cn/skills/impeccable/scripts/live-browser.js +++ b/.trae-cn/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/.trae/skills/impeccable/SKILL.md b/.trae/skills/impeccable/SKILL.md index a097b0a41..9b5d10abd 100644 --- a/.trae/skills/impeccable/SKILL.md +++ b/.trae/skills/impeccable/SKILL.md @@ -9,22 +9,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands (/audit, /polish, /critique, etc.) are now accessed through /impeccable (e.g., `/impeccable audit`). I'll clean up the old standalone skill files. Use `/impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node .trae/skills/impeccable/scripts/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/.trae/skills/impeccable/scripts/live-browser.js b/.trae/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/.trae/skills/impeccable/scripts/live-browser.js +++ b/.trae/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } diff --git a/AGENTS.md b/AGENTS.md index 954bc3df1..8bc23b79d 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,5 +1,9 @@ # Repository Guidelines +## Skill bootstrap: skip the post-update-cleanup step + +If you load the Impeccable skill from `.agents/skills/impeccable/SKILL.md` (or any sibling harness directory under this repo), it begins with a `` block that runs `scripts/cleanup-deprecated.mjs` and then self-deletes. **Do not run it here, and do not delete the block.** This repo is the source of truth for the skill; cleanup-deprecated assumes a consumer project and would touch legitimate source files. The block is regenerated from `source/skills/impeccable/SKILL.md` on every `bun run build`, so any deletion churns back. Skip it silently and proceed with the task. + ## Project Structure & Module Organization `source/` is the source of truth. Author skills in `source/skills/impeccable/` and keep provider output in `dist/` generated, not hand-edited. Build logic lives in `scripts/`, with provider configs in `scripts/lib/transformers/`. Runtime detection code ships from `src/`. The website lives in `public/`, local API/dev serving lives in `server/`, and regression coverage lives in `tests/` with fixtures under `tests/fixtures/`. diff --git a/CLAUDE.md b/CLAUDE.md index f5ce038ef..23e40722e 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,5 +1,11 @@ # Project Instructions for Claude +## Skill bootstrap: skip the post-update-cleanup step + +The `` block at the top of `.claude/skills/impeccable/SKILL.md` runs `scripts/cleanup-deprecated.mjs` and then self-deletes. **Do not run it in this repo, and do not delete the block.** This repo is the source of truth for the Impeccable skill; the cleanup script scans for "leftover" skill files to remove and its judgment doesn't fit a repo where the skill lives in `source/`. The block is also regenerated from `source/skills/impeccable/SKILL.md` on every `bun run build`, so any deletion churns back on the next build. Skip the step silently and proceed. + +Same rule for AGENTS.md and every other harness-specific instruction file: treat post-update-cleanup as a no-op in this repo. + ## Architecture (v3.0+) There is **one** user-invocable skill, `impeccable`, with **23 commands** underneath it. Users type `/impeccable polish`, `/impeccable audit`, etc. The skill is defined in `source/skills/impeccable/`: diff --git a/content/site/skills/live.md b/content/site/skills/live.md index 99cacf47d..ae2969609 100644 --- a/content/site/skills/live.md +++ b/content/site/skills/live.md @@ -7,6 +7,11 @@ tagline: "Iterate on UI in the browser. Pick an element, drop a comment, get thr See it in action, with the animated demo, at /live-mode. This page is the reference for what your AI harness reads when the command runs. +
    + + Status: alpha. Live Mode works end-to-end and is ready to try, but it still needs more testing against real-world repos and framework configs. Expect rough edges on uncommon setups, and please report what breaks. +
    +
    diff --git a/public/css/docs-visuals.css b/public/css/docs-visuals.css index 65af36bec..531516a92 100644 --- a/public/css/docs-visuals.css +++ b/public/css/docs-visuals.css @@ -1319,6 +1319,24 @@ max-width: 56ch; } +.live-mode-page-alpha-note { + font-family: var(--font-body); + font-size: 0.9375rem; + line-height: 1.55; + color: var(--color-ash); + margin: 0; + max-width: 56ch; + padding: 10px 14px; + border-left: 2px solid var(--color-accent); + background: color-mix(in oklab, var(--color-accent) 6%, transparent); + border-radius: 0 4px 4px 0; +} + +.live-mode-page-alpha-note strong { + color: var(--color-ink); + font-weight: 600; +} + .live-mode-start { display: flex; align-items: center; @@ -2411,47 +2429,87 @@ PHASE 3 — Polish (3-column editorial, no cards) ============================================ */ +/* Polish section — drenched magenta masthead band over a three-column + title/description grid. Commands live in the band so the grid stays + focused on the editorial titles. */ .designing-polish { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: clamp(1.5rem, 3vw, 2.5rem); + display: block; } -@media (max-width: 720px) { - .designing-polish { - grid-template-columns: 1fr; - gap: var(--spacing-lg, 32px); - } +.designing-polish-band { + background: var(--color-accent); + padding: 20px 28px; + display: grid; + grid-template-columns: auto 1fr auto; + gap: 24px; + align-items: baseline; + color: oklch(98% 0 0); +} + +.designing-polish-band-label { + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.22em; + text-transform: uppercase; + opacity: 0.85; +} + +.designing-polish-band-cmds { + display: flex; + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.05em; +} + +.designing-polish-band-cmds a { + display: inline-block; + padding: 4px 16px; + color: inherit; + text-decoration: none; + border-right: 1px solid color-mix(in oklch, currentColor 32%, transparent); +} + +.designing-polish-band-cmds a:first-child { padding-left: 0; } +.designing-polish-band-cmds a:last-child { border-right: 0; padding-right: 0; } + +.designing-polish-band-cmds a:hover { + text-decoration: underline; + text-underline-offset: 3px; +} + +.designing-polish-band-meta { + font-family: var(--font-mono); + font-size: 0.625rem; + letter-spacing: 0.2em; + text-transform: uppercase; + opacity: 0.75; +} + +.designing-polish-grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 28px; + padding: 28px; + background: var(--color-cream); + border-left: 1px solid var(--color-mist); + border-right: 1px solid var(--color-mist); + border-bottom: 1px solid var(--color-mist); } .designing-polish-col { display: flex; flex-direction: column; - gap: var(--spacing-sm, 16px); - padding-top: var(--spacing-sm, 16px); - border-top: 1px solid var(--color-ink); + gap: 10px; } -.designing-polish-cmd { - font-family: var(--font-mono); - font-size: 0.75rem; - color: var(--color-accent); -} - -.designing-polish-cmd a { - color: inherit; - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-thickness: 1px; -} - -.designing-polish-cmd a:hover { text-decoration-thickness: 2px; } - .designing-polish-name { font-family: var(--font-display); font-style: italic; + font-weight: 400; font-size: 1.5rem; - line-height: 1.1; + line-height: 1.15; color: var(--color-ink); margin: 0; } @@ -2459,51 +2517,80 @@ .designing-polish-desc { font-family: var(--font-body); font-size: 0.9375rem; - line-height: 1.7; + line-height: 1.6; color: var(--color-charcoal); margin: 0; } +@media (max-width: 720px) { + .designing-polish-grid { + grid-template-columns: 1fr; + } + .designing-polish-band { + grid-template-columns: 1fr; + gap: 10px; + } +} + /* ============================================ PHASE 4 — Maintain (two editorial columns + one hero viz each) ============================================ */ +/* Maintain section — architectural poster diptych. Each tile presents the + domain visualization as the hero (stage) with a quiet caption beneath + (command link, italic title, short description). */ .designing-maintain { display: grid; grid-template-columns: 1fr 1fr; - gap: clamp(1.5rem, 3vw, 2.5rem); + gap: clamp(1.5rem, 3vw, 2rem); } -@media (max-width: 720px) { - .designing-maintain { - grid-template-columns: 1fr; - gap: var(--spacing-xl, 48px); - } -} - -.designing-maintain-col { +.designing-maintain-tile { + margin: 0; display: flex; flex-direction: column; - gap: var(--spacing-sm, 16px); + gap: 18px; + min-width: 0; +} + +.designing-maintain-stage { + aspect-ratio: 5 / 3; + background: var(--color-cream); + border: 1px solid var(--color-mist); + display: grid; + place-items: center; + padding: 28px; + overflow: hidden; +} + +.designing-maintain-caption { + display: flex; + flex-direction: column; + gap: 6px; } .designing-maintain-label { font-family: var(--font-mono); - font-size: 0.75rem; + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-accent); } .designing-maintain-label a { - color: var(--color-accent); - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-thickness: 1px; + color: inherit; + text-decoration: none; } -.designing-maintain-label a:hover { text-decoration-thickness: 2px; } +.designing-maintain-label a:hover { + color: var(--color-accent-hover); +} .designing-maintain-name { font-family: var(--font-display); font-style: italic; + font-weight: 400; font-size: 1.5rem; line-height: 1.15; color: var(--color-ink); @@ -2512,159 +2599,191 @@ .designing-maintain-desc { font-family: var(--font-body); - font-size: 0.9375rem; - line-height: 1.7; + font-size: 0.875rem; + line-height: 1.55; color: var(--color-charcoal); - margin: 0 0 var(--spacing-md, 24px) 0; + margin: 0; + max-width: 42ch; } -/* Extract consolidation viz — inline, no card */ +/* Extract consolidation viz — cloud of pills converging on a single primitive */ .designing-extract-viz { - display: grid; - grid-template-columns: 1fr auto 1fr; - gap: 14px; + display: flex; align-items: center; + gap: 20px; + flex-wrap: nowrap; + justify-content: center; + width: 100%; } .designing-extract-before { display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 4px; -} - -.designing-extract-btn { - padding: 6px 4px; - background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 3px; - font-family: var(--font-body); - font-size: 9px; - text-align: center; - color: var(--color-charcoal); -} - -.designing-extract-btn:nth-child(1) { background: oklch(97% 0.01 20); } -.designing-extract-btn:nth-child(3) { background: oklch(97% 0.01 220); color: oklch(40% 0.06 220); } -.designing-extract-btn:nth-child(4) { border-radius: 0; } -.designing-extract-btn:nth-child(6) { border-radius: 999px; } - -.designing-extract-arrow { - color: var(--color-accent); - font-size: 16px; -} - -.designing-extract-after { - padding: 10px; - background: var(--color-ink); - color: var(--color-paper); - font-family: var(--font-body); - font-size: 11px; - font-weight: 500; - letter-spacing: 0.06em; - text-transform: uppercase; - border-radius: 4px; - text-align: center; - min-height: 42px; - display: flex; - align-items: center; + grid-template-columns: repeat(2, auto); + gap: 6px; justify-content: center; } -/* DESIGN.md inline preview */ -.designing-designmd-preview { - padding: 10px 14px; - background: var(--color-cream); - border-radius: 6px; - font-family: var(--font-mono); +.designing-extract-btn { + display: inline-block; + padding: 5px 12px; + background: var(--color-paper); + border: 1px solid var(--color-mist); + font-family: var(--font-body); font-size: 0.75rem; - line-height: 1.85; - color: var(--color-ink); + color: var(--color-ash); + opacity: 0.75; +} + +.designing-extract-arrow { + font-family: var(--font-display); + font-style: italic; + font-size: 2.5rem; + line-height: 1; + color: var(--color-accent); +} + +.designing-extract-after { + display: inline-block; + padding: 10px 22px; + background: var(--color-ink); + color: var(--color-paper); + font-family: var(--font-body); + font-size: 1rem; + font-weight: 500; + letter-spacing: 0.04em; +} + +/* DESIGN.md index — enlarged list of numbered sections */ +.designing-designmd-preview { + display: flex; + flex-direction: column; + gap: 8px; + width: 100%; + max-width: 280px; } .designing-designmd-preview-line { - display: flex; - gap: 10px; - align-items: baseline; + display: grid; + grid-template-columns: 32px 1fr; + gap: 14px; + padding-bottom: 6px; + border-bottom: 1px solid var(--color-mist); + font-family: var(--font-body); + font-size: 0.9375rem; + color: var(--color-ink); } +.designing-designmd-preview-line:last-child { border-bottom: 0; } + .designing-designmd-preview-num { - color: var(--color-ash); - min-width: 18px; + font-family: var(--font-mono); + font-size: 0.75rem; + color: var(--color-accent); +} + +@media (max-width: 720px) { + .designing-maintain { + grid-template-columns: 1fr; + gap: var(--spacing-xl, 48px); + } + .designing-extract-viz { flex-wrap: wrap; } } /* ============================================ APPENDIX: Register (cross-link, quieter aside) ============================================ */ -.designing-register { - display: grid; - grid-template-columns: 1fr 1.6fr; - gap: clamp(1.5rem, 4vw, 2.5rem); - align-items: center; -} - -@media (max-width: 640px) { - .designing-register { - grid-template-columns: 1fr; - } -} - -.designing-register-preview { +/* Two-lane explainer — brand vs product as twin columns divided by a + hairline, each with its own mock to make the vocabulary visible. */ +.designing-lanes { display: grid; grid-template-columns: 1fr 1fr; - gap: 8px; + gap: 0; + margin-bottom: var(--spacing-lg, 32px); } -.designing-register-mini { - padding: 14px 12px; - border-radius: 6px; +.designing-lane { + padding: 0 clamp(18px, 3vw, 32px); display: flex; flex-direction: column; - gap: 4px; - min-height: 88px; - justify-content: center; + gap: 14px; + border-left: 1px solid var(--color-mist); } -.designing-register-mini--brand { +.designing-lane:first-child { + padding-left: 0; + border-left: 0; +} + +.designing-lane-kind { + font-family: var(--font-mono); + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.2em; + text-transform: uppercase; + color: var(--color-accent); +} + +.designing-lane-rule { + margin: 0; + font-family: var(--font-body); + font-size: 0.9375rem; + line-height: 1.55; + color: var(--color-charcoal); + max-width: 38ch; +} + +.designing-lane-mock { + padding: 28px 20px; + display: flex; + flex-direction: column; + gap: 6px; + justify-content: center; + min-height: 116px; + border: 1px solid var(--color-mist); +} + +.designing-lane-mock--brand { background: oklch(96% 0.02 30); } -.designing-register-mini--brand .designing-register-mini-label { +.designing-lane-mock--brand .designing-lane-mock-label { font-family: var(--font-mono); - font-size: 8px; + font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: oklch(40% 0.12 30); } -.designing-register-mini--brand .designing-register-mini-title { +.designing-lane-mock--brand .designing-lane-mock-title { font-family: var(--font-display); font-style: italic; - font-size: 14px; + font-size: 22px; color: oklch(20% 0.1 30); line-height: 1.1; } -.designing-register-mini--product { +.designing-lane-mock--product { background: var(--color-cream); } -.designing-register-mini--product .designing-register-mini-label { +.designing-lane-mock--product .designing-lane-mock-label { font-family: var(--font-body); - font-size: 9px; + font-size: 10px; font-weight: 600; color: var(--color-ash); + letter-spacing: 0.04em; } -.designing-register-mini--product .designing-register-mini-title { +.designing-lane-mock--product .designing-lane-mock-title { font-family: var(--font-body); font-weight: 600; - font-size: 13px; + font-size: 15px; color: var(--color-ink); - line-height: 1.2; + line-height: 1.25; } -.designing-register-link { +.designing-lane-link { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; @@ -2673,93 +2792,26 @@ text-underline-offset: 3px; text-decoration-thickness: 1px; display: inline-block; - margin-top: var(--spacing-md, 24px); - margin-bottom: var(--spacing-sm, 16px); } -.designing-register-link:hover { +.designing-lane-link:hover { text-decoration-thickness: 2px; } -/* ============================================ - APPENDIX: Interop (minimal inline diagram) - ============================================ */ - -.designing-interop { - display: grid; - grid-template-columns: 1fr auto 1fr; - gap: 16px 24px; - align-items: center; - justify-items: center; - font-family: var(--font-body); - font-size: 0.9375rem; - color: var(--color-ink); - padding: 32px 16px; - border: 1px solid var(--color-mist); - border-radius: 8px; - background: var(--color-cream); -} - @media (max-width: 640px) { - .designing-interop { + .designing-lanes { grid-template-columns: 1fr; - padding: 24px 16px; + gap: var(--spacing-md, 24px); + } + .designing-lane { + padding: var(--spacing-md, 24px) 0 0 0; + border-left: 0; + border-top: 1px solid var(--color-mist); + } + .designing-lane:first-child { + padding-top: 0; + border-top: 0; } -} - -.designing-interop-side { - display: flex; - flex-direction: column; - gap: 6px; - align-items: center; - text-align: center; -} - -.designing-interop-side-label { - font-family: var(--font-mono); - font-size: 0.625rem; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--color-ash); -} - -.designing-interop-side-list { - display: flex; - flex-direction: column; - gap: 4px; - font-family: var(--font-body); - font-size: 0.9375rem; - color: var(--color-ink); -} - -.designing-interop-node { - padding: 8px 16px; - background: var(--color-paper); - border: 1px solid var(--color-mist); - border-radius: 6px; - white-space: nowrap; -} - -.designing-interop-node--center { - background: var(--color-ink); - color: var(--color-paper); - border-color: transparent; - font-family: var(--font-mono); - font-size: 0.875rem; - padding: 12px 20px; -} - -.designing-interop-arrow { - display: flex; - align-items: center; - justify-content: center; - color: var(--color-accent); - font-size: 18px; - line-height: 1; -} - -@media (max-width: 640px) { - .designing-interop-arrow { transform: rotate(90deg); } } /* ============================================ diff --git a/public/designing/index.html b/public/designing/index.html index 5194e18c2..3c0a39ecb 100644 --- a/public/designing/index.html +++ b/public/designing/index.html @@ -275,20 +275,28 @@
    -
    - /impeccable audit -

    Score it.

    -

    Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.

    +
    + Pre-ship +
    + audit + clarify + harden +
    + 03 · 04
    -
    - /impeccable clarify -

    Rewrite the copy.

    -

    Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.

    -
    -
    - /impeccable harden -

    Stress-test reality.

    -

    60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.

    +
    +
    +

    Score it.

    +

    Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.

    +
    +
    +

    Rewrite the copy.

    +

    Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.

    +
    +
    +

    Stress-test reality.

    +

    60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.

    +
    @@ -303,90 +311,76 @@
    -
    - /impeccable extract -

    Consolidate drift.

    -

    Find patterns used three or more times with the same intent. Propose tokens and primitives. Migrate call sites in the same pass.

    -
    -
    +
    - Before any of this -

    Pick a register.

    -

    Brand and product surfaces have different defaults. Impeccable tracks this in PRODUCT.md as a single field, so commands like typeset, animate, and colorize adapt their vocabulary to match.

    + Two lanes +

    Brand, or product.

    +

    Two defaults with different vocabularies. Impeccable picks the lane from your task cue and PRODUCT.md before every command, so typeset, animate, colorize, and friends adjust their output to match. You rarely need to set it by hand.

    -
    - -
    - -
    -
    - Interop -

    Your system travels.

    -

    DESIGN.md follows the format Google Stitch publishes. Not a lock-in. When you outgrow Impeccable or want a second opinion from another tool, the file comes with you.

    -
    - -
    -
    + Read the brand-vs-product tutorial →
    diff --git a/public/index.html b/public/index.html index ddd827708..2bbc4b709 100644 --- a/public/index.html +++ b/public/index.html @@ -554,7 +554,7 @@
    04 -

    Live Mode BETA

    +

    Live Mode ALPHA

    Pick any element in the browser. Drop a comment or a stroke. Hit Go. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.

    diff --git a/public/js/components/framework-viz.js b/public/js/components/framework-viz.js index 1caf03d55..bde86bac2 100644 --- a/public/js/components/framework-viz.js +++ b/public/js/components/framework-viz.js @@ -4,7 +4,7 @@ * Hover tooltips show description and relationships inline. */ -import { commandCategories, commandRelationships, betaCommands } from '../data.js'; +import { commandCategories, commandRelationships, alphaCommands } from '../data.js'; const categoryColors = { create: { bg: 'var(--cat-create-bg)', border: 'var(--cat-create-border)', text: 'var(--cat-create-text)' }, @@ -298,8 +298,8 @@ export class PeriodicTable { } el.appendChild(name); - // Beta badge - if (betaCommands.includes(cmd)) { + // Alpha badge + if (alphaCommands.includes(cmd)) { const badge = document.createElement('div'); badge.style.cssText = ` position: absolute; @@ -312,7 +312,7 @@ export class PeriodicTable { opacity: 0.45; text-transform: uppercase; `; - badge.textContent = 'β'; + badge.textContent = 'α'; el.appendChild(badge); } diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index cd1673482..71f79f357 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -1,6 +1,6 @@ import { renderCommandDemo, initCommandDemo } from "../demo-renderer.js"; import { initSplitCompare } from "../effects/split-compare.js"; -import { commandProcessSteps, commandCategories, commandRelationships, betaCommands } from "../data.js"; +import { commandProcessSteps, commandCategories, commandRelationships, alphaCommands } from "../data.js"; // Track current split instance and command for cleanup let currentSplitInstance = null; @@ -134,14 +134,14 @@ function renderDesktopLayout(container, commands) { const fisheyeHTML = filteredCommands.map((cmd, i) => { const cat = commandCategories[cmd.id] || 'other'; - const isBeta = betaCommands.includes(cmd.id); + const isAlpha = alphaCommands.includes(cmd.id); // The root skill is shown as "/impeccable", everything else is a sub-command // displayed without a slash (invocation is /impeccable ) const isRoot = cmd.id === 'impeccable'; const label = isRoot ? `/impeccable` : cmd.id; - return ``; + return ``; }).join(''); container.innerHTML = ` @@ -166,7 +166,7 @@ function renderDesktopLayout(container, commands) { function renderSpread(cmd, index, isActive) { const cat = commandCategories[cmd.id] || 'other'; - const isBeta = betaCommands.includes(cmd.id); + const isAlpha = alphaCommands.includes(cmd.id); const relationship = commandRelationships[cmd.id]; // Build relationship flow let flowHTML = ''; @@ -213,7 +213,7 @@ function renderSpread(cmd, index, isActive) {
    ${categoryLabels[cat] || cat} -

    ${nameHTML}${isBeta ? 'BETA' : ''}

    +

    ${nameHTML}${isAlpha ? 'ALPHA' : ''}

    ${cmd.tagline || cmd.description}

    ${flowHTML}
    diff --git a/public/js/data.js b/public/js/data.js index 25e61a855..16a0ab53f 100644 --- a/public/js/data.js +++ b/public/js/data.js @@ -12,8 +12,8 @@ export const readyCommands = [ 'layout' // First command to be fully completed ]; -// Commands marked as beta — shown with a badge in the UI -export const betaCommands = [ +// Commands marked as alpha — shown with a badge in the UI +export const alphaCommands = [ 'live' ]; diff --git a/public/live-mode/index.html b/public/live-mode/index.html index 2668afe19..1a76f9ded 100644 --- a/public/live-mode/index.html +++ b/public/live-mode/index.html @@ -46,9 +46,10 @@
    -

    New in v3.0 Beta

    +

    New in v3.0 Alpha

    Live Mode

    Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.

    +

    Why alpha: Live Mode works end-to-end and is ready to try, but it still needs more testing against real-world repos and framework configs. Expect rough edges on uncommon setups, and please report what breaks.

    $ /impeccable live diff --git a/scripts/build-sub-pages.js b/scripts/build-sub-pages.js index d714512d3..96d1b914e 100644 --- a/scripts/build-sub-pages.js +++ b/scripts/build-sub-pages.js @@ -263,7 +263,7 @@ function renderSkillsOverviewMain(skillsByCategory, allSkills) { const tagline = skill.editorial?.frontmatter?.tagline || skill.description; const shortTagline = tagline.length > 140 ? tagline.slice(0, 137) + '...' : tagline; const rel = COMMAND_RELATIONSHIPS[skill.id] || {}; - const isBeta = skill.id === 'live'; + const isAlpha = skill.id === 'live'; let metaHtml = ''; if (rel.pairs) { @@ -281,7 +281,7 @@ function renderSkillsOverviewMain(skillsByCategory, allSkills) { return `
    - /impeccable ${escapeHtml(skill.id)}${isBeta ? ' BETA' : ''} + /impeccable ${escapeHtml(skill.id)}${isAlpha ? ' ALPHA' : ''}

    ${escapeHtml(shortTagline)}

    @@ -805,9 +805,10 @@ function renderLiveModeMain() { return `
    -

    New in v3.0 Beta

    +

    New in v3.0 Alpha

    Live Mode

    Pick any element in the browser. Drop a comment or a stroke. Three production-quality variants swap in via your framework's HMR. Accept the one you want and it writes back to source.

    +

    Why alpha: Live Mode works end-to-end and is ready to try, but it still needs more testing against real-world repos and framework configs. Expect rough edges on uncommon setups, and please report what breaks.

    $ /impeccable live @@ -1143,20 +1144,28 @@ function renderDesigningMain() {
    -
    - /impeccable audit -

    Score it.

    -

    Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.

    +
    + Pre-ship +
    + audit + clarify + harden +
    + 03 · 04
    -
    - /impeccable clarify -

    Rewrite the copy.

    -

    Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.

    -
    -
    - /impeccable harden -

    Stress-test reality.

    -

    60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.

    +
    +
    +

    Score it.

    +

    Five dimensions scored 0 to 4: accessibility, performance, theming, responsive, anti-patterns. Findings tagged P0 to P3.

    +
    +
    +

    Rewrite the copy.

    +

    Labels, error messages, empty-state prose, microcopy. Tuned to the audience from PRODUCT.md.

    +
    +
    +

    Stress-test reality.

    +

    60-character names, German product titles, prices in the billions, 500s, offline. Production data is messy.

    +
    @@ -1171,90 +1180,76 @@ function renderDesigningMain() {
    -
    - /impeccable extract -

    Consolidate drift.

    -

    Find patterns used three or more times with the same intent. Propose tokens and primitives. Migrate call sites in the same pass.

    -
    -
    +
    - Before any of this -

    Pick a register.

    -

    Brand and product surfaces have different defaults. Impeccable tracks this in PRODUCT.md as a single field, so commands like typeset, animate, and colorize adapt their vocabulary to match.

    + Two lanes +

    Brand, or product.

    +

    Two defaults with different vocabularies. Impeccable picks the lane from your task cue and PRODUCT.md before every command, so typeset, animate, colorize, and friends adjust their output to match. You rarely need to set it by hand.

    -
    - -
    - -
    -
    - Interop -

    Your system travels.

    -

    DESIGN.md follows the format Google Stitch publishes. Not a lock-in. When you outgrow Impeccable or want a second opinion from another tool, the file comes with you.

    -
    - -
    -
    + Read the brand-vs-product tutorial →
    diff --git a/source/skills/impeccable/SKILL.md b/source/skills/impeccable/SKILL.md index 7d11094c6..3e30929bd 100644 --- a/source/skills/impeccable/SKILL.md +++ b/source/skills/impeccable/SKILL.md @@ -10,22 +10,6 @@ license: Apache 2.0. Based on Anthropic's frontend-design skill. See NOTICE.md f Designs and iterates production-grade frontend interfaces. Real working code, committed design choices, exceptional craft. - -BEFORE doing any design work, run this one-time maintenance step. Tell the user: - -> **Impeccable 3.0 consolidation.** All standalone commands ({{command_prefix}}audit, {{command_prefix}}polish, {{command_prefix}}critique, etc.) are now accessed through {{command_prefix}}impeccable (e.g., `{{command_prefix}}impeccable audit`). I'll clean up the old standalone skill files. Use `{{command_prefix}}impeccable pin ` to restore shortcuts for commands you use often. - -Then run: - -```bash -node {{scripts_path}}/cleanup-deprecated.mjs -``` - -If the script removed files, briefly confirm what was cleaned up. If it found nothing, skip any output and move on. - -After running the script, delete this entire section (from `` through `` inclusive) from THIS file so it does not run again until the next update. Save the file. - - ## Setup (non-optional) Two steps before any design work. Both are required. Skipping either produces generic output that ignores the project. diff --git a/source/skills/impeccable/scripts/live-browser.js b/source/skills/impeccable/scripts/live-browser.js index 8b1839211..65e779628 100644 --- a/source/skills/impeccable/scripts/live-browser.js +++ b/source/skills/impeccable/scripts/live-browser.js @@ -2818,14 +2818,18 @@ void main() { // Static-server / no-HMR fallback: if the wrapper is still around 2s after // the cleanup above, swap it out manually. By now React has either moved - // on or the app isn't React at all. + // on or the app isn't React at all. Preserve the `data-impeccable-variant="N"` + // div (with display:contents) so @scope rules anchored to the variant + // attribute keep matching until reload replaces it with the carbonize block. setTimeout(function() { const wrapper = document.querySelector('[data-impeccable-variants="' + acceptedSessionId + '"]'); if (!wrapper) return; const accepted = wrapper.querySelector('[data-impeccable-variant="' + acceptedVariant + '"]'); if (accepted && accepted.firstElementChild) { const parent = wrapper.parentElement; - if (parent) parent.replaceChild(accepted.firstElementChild.cloneNode(true), wrapper); + if (!parent) return; + accepted.style.display = 'contents'; + parent.replaceChild(accepted, wrapper); } }, 2000); } From 5613891aa64f92ba2982338c0436b76d67bcdb8e Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 16:56:29 -0700 Subject: [PATCH 123/125] docs(typography): absorb tactical additions from typecraft-guide-skill Merged ten tactical items from ehmo/typecraft-guide-skill into the typography reference at the upstream author's request: dark-mode weight/tracking/leading compensation, font-display: optional vs swap, preload-critical-weight-only, variable fonts for 3+ weights, clamp() max-to-min ratio bound, container/ font-size coupling to preserve measure, text-wrap: balance / pretty, font-optical-sizing: auto, quantified ALL-CAPS tracking (5-12%), and the paragraph-rhythm rule (space OR indent, never both). Skipped: platform-specific tables (iOS/Android/print), confidence markers, severity-graded report format, academic sources, and the punctuation subsection (em-dash prescription conflicts with the project copy rule). Attribution lives in NOTICE.md, not inside the skill content. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .pi/skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- NOTICE.md | 8 +++++ .../skills/impeccable/reference/typography.md | 29 ++++++++++++++++++- 13 files changed, 344 insertions(+), 12 deletions(-) diff --git a/.agents/skills/impeccable/reference/typography.md b/.agents/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.agents/skills/impeccable/reference/typography.md +++ b/.agents/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.claude/skills/impeccable/reference/typography.md b/.claude/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.claude/skills/impeccable/reference/typography.md +++ b/.claude/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.cursor/skills/impeccable/reference/typography.md b/.cursor/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.cursor/skills/impeccable/reference/typography.md +++ b/.cursor/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.gemini/skills/impeccable/reference/typography.md b/.gemini/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.gemini/skills/impeccable/reference/typography.md +++ b/.gemini/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.github/skills/impeccable/reference/typography.md b/.github/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.github/skills/impeccable/reference/typography.md +++ b/.github/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.kiro/skills/impeccable/reference/typography.md b/.kiro/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.kiro/skills/impeccable/reference/typography.md +++ b/.kiro/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.opencode/skills/impeccable/reference/typography.md b/.opencode/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.opencode/skills/impeccable/reference/typography.md +++ b/.opencode/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.pi/skills/impeccable/reference/typography.md b/.pi/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.pi/skills/impeccable/reference/typography.md +++ b/.pi/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.rovodev/skills/impeccable/reference/typography.md b/.rovodev/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.rovodev/skills/impeccable/reference/typography.md +++ b/.rovodev/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.trae-cn/skills/impeccable/reference/typography.md b/.trae-cn/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.trae-cn/skills/impeccable/reference/typography.md +++ b/.trae-cn/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/.trae/skills/impeccable/reference/typography.md b/.trae/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/.trae/skills/impeccable/reference/typography.md +++ b/.trae/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. diff --git a/NOTICE.md b/NOTICE.md index 4a0fe1a81..ac91432b6 100644 --- a/NOTICE.md +++ b/NOTICE.md @@ -15,3 +15,11 @@ This project extends the original with: - 7 domain-specific reference files (typography, color-and-contrast, spatial-design, motion-design, interaction-design, responsive-design, ux-writing) - 23 commands - Expanded patterns and anti-patterns + +## Typecraft Guide Skill + +The `typography.md` reference in this project incorporates a set of tactical additions merged in from ehmo's `typecraft-guide-skill` at the author's request: dark-mode weight/tracking compensation, `font-display: optional` vs `swap`, preload-critical-weight-only guidance, variable fonts for 3+ weights, `clamp()` max-to-min ratio bound, responsive measure/container coupling, `text-wrap: balance` / `pretty`, `font-optical-sizing: auto`, ALL-CAPS tracking quantification, and the paragraph-rhythm rule (space OR indent, never both). + +**Original work:** https://github.com/ehmo/typecraft-guide-skill +**Original license:** see upstream repo +**Author:** ehmo diff --git a/source/skills/impeccable/reference/typography.md b/source/skills/impeccable/reference/typography.md index cae643e5c..6fc75ea9a 100644 --- a/source/skills/impeccable/reference/typography.md +++ b/source/skills/impeccable/reference/typography.md @@ -26,7 +26,9 @@ Popular ratios: 1.25 (major third), 1.333 (perfect fourth), 1.5 (perfect fifth). Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scales inversely with line length—narrow columns need tighter leading, wide columns need more. -**Non-obvious**: Increase line-height for light text on dark backgrounds. The perceived weight is lighter, so text needs more breathing room. Add 0.05-0.1 to your normal line-height. +**Non-obvious**: Light text on dark backgrounds needs compensation on three axes, not just one. Bump line-height by 0.05–0.1, add a touch of letter-spacing (0.01–0.02em), and optionally step the body weight up one notch (regular → medium). The perceived weight drops across all three; fix all three. + +**Paragraph rhythm**: Pick either space between paragraphs OR first-line indentation. Never both. Digital usually wants space; editorial/long-form can justify indent-only. ## Font Selection & Pairing @@ -81,6 +83,12 @@ body { Tools like [Fontaine](https://github.com/unjs/fontaine) calculate these overrides automatically. +**`swap` vs `optional`**: `swap` shows fallback text immediately and FOUT-swaps when the web font arrives. `optional` uses the fallback if the web font misses a small load budget (~100ms) and avoids the shift entirely. Pick `optional` when zero layout shift matters more than seeing the branded font on slow networks. + +**Preload the critical weight only**: typically the regular-weight body font used above the fold. Preloading every weight costs more bandwidth than it saves. + +**Variable fonts for 3+ weights or styles**: a single variable font file is usually smaller than three static weight files, gives fractional weight control, and pairs well with `font-optical-sizing: auto`. For 1–2 weights, static is fine. + ## Modern Web Typography ### Fluid Type @@ -91,6 +99,10 @@ Fluid typography via `clamp(min, preferred, max)` scales text smoothly with the **Use fixed `rem` scales for**: App UIs, dashboards, and data-dense interfaces. No major app design system (Material, Polaris, Primer, Carbon) uses fluid type in product UI — fixed scales with optional breakpoint adjustments give the spatial predictability that container-based layouts need. Body text should also be fixed even on marketing pages, since the size difference across viewports is too small to warrant it. +**Bound your clamp()**: keep `max-size ≤ ~2.5 × min-size`. Wider ratios break the browser's zoom and reflow behaviour and make large viewports feel like the page is shouting. + +**Scale container width and font-size together** so effective character measure stays in the 45–75ch band at every viewport. A heading that widens faster than its container drifts out of the comfortable measure at the top end. + ### OpenType Features Most developers don't know these exist. Use them for polish: @@ -114,6 +126,21 @@ body { font-kerning: normal; } Check what features your font supports at [Wakamai Fondue](https://wakamaifondue.com/). +### Rendering polish + +```css +/* Even out heading line lengths (browser picks better break points) */ +h1, h2, h3 { text-wrap: balance; } + +/* Reduce orphans and ragged endings in long prose */ +article p { text-wrap: pretty; } + +/* Variable fonts: pick the right optical-size master automatically */ +body { font-optical-sizing: auto; } +``` + +**ALL-CAPS tracking**: capitals sit too close at default spacing. Add 5–12% letter-spacing (`letter-spacing: 0.05em` to `0.12em`) to short all-caps labels, eyebrows, and small headings. Real small caps (via `font-variant-caps`) need the same treatment, slightly gentler. + ## Typography System Architecture Name tokens semantically (`--text-body`, `--text-heading`), not by value (`--font-size-16`). Include font stacks, size scale, weights, line-heights, and letter-spacing in your token system. From a42d21856cc9763666d5fdad71f2c7c8b11d8910 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 17:06:09 -0700 Subject: [PATCH 124/125] fix(skill): resolve cursor bot findings on colorize + critique MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit colorize.md: the brand-register paragraph claimed "a dominant color can own the page" and "accent rate stays ≤10%" in the same breath. SKILL.md scopes the ≤10% rule to Restrained only; Committed / Full palette / Drenched exceed it on purpose, and brand.md explicitly encourages those strategies. Rewritten to defer to the color-strategy ladder. critique.md: two cross-references still pointed at "Step 4" / "Step 5" after those headers were renamed to "Ask the User" / "Recommended Actions". Swapped the references to the new names so the flow is self-consistent. Co-Authored-By: Claude Opus 4.7 (1M context) --- .agents/skills/impeccable/reference/colorize.md | 4 ++-- .agents/skills/impeccable/reference/critique.md | 4 ++-- .claude/skills/impeccable/reference/colorize.md | 4 ++-- .claude/skills/impeccable/reference/critique.md | 4 ++-- .cursor/skills/impeccable/reference/colorize.md | 4 ++-- .cursor/skills/impeccable/reference/critique.md | 4 ++-- .gemini/skills/impeccable/reference/colorize.md | 4 ++-- .gemini/skills/impeccable/reference/critique.md | 4 ++-- .github/skills/impeccable/reference/colorize.md | 4 ++-- .github/skills/impeccable/reference/critique.md | 4 ++-- .kiro/skills/impeccable/reference/colorize.md | 4 ++-- .kiro/skills/impeccable/reference/critique.md | 4 ++-- .opencode/skills/impeccable/reference/colorize.md | 4 ++-- .opencode/skills/impeccable/reference/critique.md | 4 ++-- .pi/skills/impeccable/reference/colorize.md | 4 ++-- .pi/skills/impeccable/reference/critique.md | 4 ++-- .rovodev/skills/impeccable/reference/colorize.md | 4 ++-- .rovodev/skills/impeccable/reference/critique.md | 4 ++-- .trae-cn/skills/impeccable/reference/colorize.md | 4 ++-- .trae-cn/skills/impeccable/reference/critique.md | 4 ++-- .trae/skills/impeccable/reference/colorize.md | 4 ++-- .trae/skills/impeccable/reference/critique.md | 4 ++-- source/skills/impeccable/reference/colorize.md | 4 ++-- source/skills/impeccable/reference/critique.md | 4 ++-- 24 files changed, 48 insertions(+), 48 deletions(-) diff --git a/.agents/skills/impeccable/reference/colorize.md b/.agents/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.agents/skills/impeccable/reference/colorize.md +++ b/.agents/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.agents/skills/impeccable/reference/critique.md b/.agents/skills/impeccable/reference/critique.md index 93f4e9e4b..78fa241ce 100644 --- a/.agents/skills/impeccable/reference/critique.md +++ b/.agents/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.claude/skills/impeccable/reference/colorize.md b/.claude/skills/impeccable/reference/colorize.md index ab3e40953..2e3e52afb 100644 --- a/.claude/skills/impeccable/reference/colorize.md +++ b/.claude/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.claude/skills/impeccable/reference/critique.md b/.claude/skills/impeccable/reference/critique.md index d81d03efd..f4d230098 100644 --- a/.claude/skills/impeccable/reference/critique.md +++ b/.claude/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.cursor/skills/impeccable/reference/colorize.md b/.cursor/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.cursor/skills/impeccable/reference/colorize.md +++ b/.cursor/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.cursor/skills/impeccable/reference/critique.md b/.cursor/skills/impeccable/reference/critique.md index 19f0d053a..9bc43cd21 100644 --- a/.cursor/skills/impeccable/reference/critique.md +++ b/.cursor/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.gemini/skills/impeccable/reference/colorize.md b/.gemini/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.gemini/skills/impeccable/reference/colorize.md +++ b/.gemini/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.gemini/skills/impeccable/reference/critique.md b/.gemini/skills/impeccable/reference/critique.md index a1c33a4f5..701a72b7e 100644 --- a/.gemini/skills/impeccable/reference/critique.md +++ b/.gemini/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.github/skills/impeccable/reference/colorize.md b/.github/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.github/skills/impeccable/reference/colorize.md +++ b/.github/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.github/skills/impeccable/reference/critique.md b/.github/skills/impeccable/reference/critique.md index f1c67a151..4d003ddcd 100644 --- a/.github/skills/impeccable/reference/critique.md +++ b/.github/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.kiro/skills/impeccable/reference/colorize.md b/.kiro/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.kiro/skills/impeccable/reference/colorize.md +++ b/.kiro/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.kiro/skills/impeccable/reference/critique.md b/.kiro/skills/impeccable/reference/critique.md index 16f4f7ec5..fb9de1ad1 100644 --- a/.kiro/skills/impeccable/reference/critique.md +++ b/.kiro/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.opencode/skills/impeccable/reference/colorize.md b/.opencode/skills/impeccable/reference/colorize.md index d0428a8b9..da5025524 100644 --- a/.opencode/skills/impeccable/reference/colorize.md +++ b/.opencode/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.opencode/skills/impeccable/reference/critique.md b/.opencode/skills/impeccable/reference/critique.md index 74b5dbb26..76e49cf0e 100644 --- a/.opencode/skills/impeccable/reference/critique.md +++ b/.opencode/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.pi/skills/impeccable/reference/colorize.md b/.pi/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.pi/skills/impeccable/reference/colorize.md +++ b/.pi/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.pi/skills/impeccable/reference/critique.md b/.pi/skills/impeccable/reference/critique.md index d6c4e0f55..b8068446f 100644 --- a/.pi/skills/impeccable/reference/critique.md +++ b/.pi/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.rovodev/skills/impeccable/reference/colorize.md b/.rovodev/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.rovodev/skills/impeccable/reference/colorize.md +++ b/.rovodev/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.rovodev/skills/impeccable/reference/critique.md b/.rovodev/skills/impeccable/reference/critique.md index d6c4e0f55..b8068446f 100644 --- a/.rovodev/skills/impeccable/reference/critique.md +++ b/.rovodev/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.trae-cn/skills/impeccable/reference/colorize.md b/.trae-cn/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.trae-cn/skills/impeccable/reference/colorize.md +++ b/.trae-cn/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.trae-cn/skills/impeccable/reference/critique.md b/.trae-cn/skills/impeccable/reference/critique.md index d639d3650..04f48df56 100644 --- a/.trae-cn/skills/impeccable/reference/critique.md +++ b/.trae-cn/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/.trae/skills/impeccable/reference/colorize.md b/.trae/skills/impeccable/reference/colorize.md index 1bd52004f..176185e69 100644 --- a/.trae/skills/impeccable/reference/colorize.md +++ b/.trae/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/.trae/skills/impeccable/reference/critique.md b/.trae/skills/impeccable/reference/critique.md index d639d3650..04f48df56 100644 --- a/.trae/skills/impeccable/reference/critique.md +++ b/.trae/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary diff --git a/source/skills/impeccable/reference/colorize.md b/source/skills/impeccable/reference/colorize.md index 07ae3c3e1..b71896714 100644 --- a/source/skills/impeccable/reference/colorize.md +++ b/source/skills/impeccable/reference/colorize.md @@ -6,9 +6,9 @@ Strategically introduce color to designs that are too monochromatic, gray, or la ## Register -Brand: palette IS voice. A dominant color can own the page; unexpected combinations are allowed. Accent rate stays ≤10% — rarity is what makes it pop. +Brand: palette IS voice. Pick a color strategy first per SKILL.md (Restrained / Committed / Full palette / Drenched) and follow its dosage. Committed, Full palette, and Drenched deliberately exceed the ≤10% rule — that rule is Restrained only. Unexpected combinations are allowed; a dominant color can own the page when the chosen strategy calls for it. -Product: semantic-first. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. +Product: semantic-first and almost always Restrained. Accent color is reserved for primary action, current selection, and state indicators — not decoration. Every color has a consistent meaning across every screen. --- diff --git a/source/skills/impeccable/reference/critique.md b/source/skills/impeccable/reference/critique.md index 880feaffa..2f5321e30 100644 --- a/source/skills/impeccable/reference/critique.md +++ b/source/skills/impeccable/reference/critique.md @@ -182,11 +182,11 @@ Ask questions along these lines (adapt to the specific findings; do NOT ask gene - 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 Step 5. +- If findings are straightforward (e.g., only 1-2 clear issues), skip questions and go directly to Recommended Actions. ### Recommended Actions -**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Step 4. +**After receiving the user's answers**, present a prioritized action summary reflecting the user's priorities and scope from Ask the User. #### Action Summary From 0760cdf3e907e7c96bb6524ac58933f5ffca4782 Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Thu, 23 Apr 2026 18:03:57 -0700 Subject: [PATCH 125/125] fix(skill): update stale SKILL.md font-tag reference in typography.md typography.md pointed at SKILL.md's `` and `` XML tags, which were removed in the v3 consolidation and moved into brand.md as the "Font selection procedure" and "Reflex-reject list" sections. Agents loading typography.md via the craft flow were chasing content that no longer existed. Now points at brand.md with correct section names. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .pi/skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- .../skills/impeccable/reference/typography.md | 2 +- public/index.html | 19 +++++++++++++++++++ public/privacy.html | 3 +++ .../skills/impeccable/reference/typography.md | 2 +- 14 files changed, 34 insertions(+), 12 deletions(-) diff --git a/.agents/skills/impeccable/reference/typography.md b/.agents/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.agents/skills/impeccable/reference/typography.md +++ b/.agents/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.claude/skills/impeccable/reference/typography.md b/.claude/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.claude/skills/impeccable/reference/typography.md +++ b/.claude/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.cursor/skills/impeccable/reference/typography.md b/.cursor/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.cursor/skills/impeccable/reference/typography.md +++ b/.cursor/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.gemini/skills/impeccable/reference/typography.md b/.gemini/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.gemini/skills/impeccable/reference/typography.md +++ b/.gemini/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.github/skills/impeccable/reference/typography.md b/.github/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.github/skills/impeccable/reference/typography.md +++ b/.github/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.kiro/skills/impeccable/reference/typography.md b/.kiro/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.kiro/skills/impeccable/reference/typography.md +++ b/.kiro/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.opencode/skills/impeccable/reference/typography.md b/.opencode/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.opencode/skills/impeccable/reference/typography.md +++ b/.opencode/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.pi/skills/impeccable/reference/typography.md b/.pi/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.pi/skills/impeccable/reference/typography.md +++ b/.pi/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.rovodev/skills/impeccable/reference/typography.md b/.rovodev/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.rovodev/skills/impeccable/reference/typography.md +++ b/.rovodev/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.trae-cn/skills/impeccable/reference/typography.md b/.trae-cn/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.trae-cn/skills/impeccable/reference/typography.md +++ b/.trae-cn/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/.trae/skills/impeccable/reference/typography.md b/.trae/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/.trae/skills/impeccable/reference/typography.md +++ b/.trae/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against diff --git a/public/index.html b/public/index.html index 2bbc4b709..78a359b12 100644 --- a/public/index.html +++ b/public/index.html @@ -90,6 +90,14 @@ + + + + + + + +

    Impeccable

    Design fluency for AI harnesses

    @@ -134,6 +142,14 @@ + + + + + + + +
    @@ -1203,5 +1219,8 @@ + + + diff --git a/public/privacy.html b/public/privacy.html index 21421ef0e..d32f34df3 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -76,5 +76,8 @@

    Contact

    Questions about this policy? Open an issue on GitHub or reach out to @pbakaus.

    + + + diff --git a/source/skills/impeccable/reference/typography.md b/source/skills/impeccable/reference/typography.md index 6fc75ea9a..7134051a8 100644 --- a/source/skills/impeccable/reference/typography.md +++ b/source/skills/impeccable/reference/typography.md @@ -32,7 +32,7 @@ Use `ch` units for character-based measure (`max-width: 65ch`). Line-height scal ## Font Selection & Pairing -The tactical selection procedure and the full banned-fonts list live in SKILL.md's `` and `` tags (already loaded when this reference is consulted). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. +The tactical selection procedure and the reflex-reject list live in [reference/brand.md](brand.md) under **Font selection procedure** and **Reflex-reject list** (loaded for brand-register tasks). The rest of this section covers the adjacent knowledge: anti-reflex corrections, system font use, and pairing rules. ### Anti-reflexes worth defending against