Require direction confirmation and browser iteration for overdrive

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) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-16 11:45:30 -07:00
co-authored by Claude Opus 4.6
parent 9bdb836903
commit fcc70fd4c9
2 changed files with 28 additions and 0 deletions
+14
View File
@@ -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