From fcc70fd4c92878bf1cc79fa5e1ddb17ca650ac8f Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Mon, 16 Mar 2026 11:45:30 -0700 Subject: [PATCH] Require direction confirmation and browser iteration for overdrive MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two new mandatory sections in the skill: 1. Propose Before Building — must present 2-3 directions with trade-offs and get user confirmation before writing code. This skill has the highest misfire potential. 2. Iterate with Browser Automation — must use browser tools to visually verify effects and iterate. Complex effects never work on the first try. Co-Authored-By: Claude Opus 4.6 (1M context) --- .claude/skills/overdrive/SKILL.md | 14 ++++++++++++++ source/skills/overdrive/SKILL.md | 14 ++++++++++++++ 2 files changed, 28 insertions(+) diff --git a/.claude/skills/overdrive/SKILL.md b/.claude/skills/overdrive/SKILL.md index ef701878f..3d29932c6 100644 --- a/.claude/skills/overdrive/SKILL.md +++ b/.claude/skills/overdrive/SKILL.md @@ -16,6 +16,20 @@ Use the frontend-design skill — it contains design principles, anti-patterns, **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. **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. + +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 diff --git a/source/skills/overdrive/SKILL.md b/source/skills/overdrive/SKILL.md index 2307e0d70..5beeb4410 100644 --- a/source/skills/overdrive/SKILL.md +++ b/source/skills/overdrive/SKILL.md @@ -16,6 +16,20 @@ Use the frontend-design skill — it contains design principles, anti-patterns, **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_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. + +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