Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →fengshao1227/overdrive
Pushes interfaces past conventional limits with technically ambitious implementations — shaders, spring physics, scroll-driven reveals, 60fps animations.
Passed 9 of 22 test cases with the skill, and 13 of 22 without it.
and 3 more in the full report
3 fixed14 passed either way1 still failing4 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
Our creative agency's landing page hero section feels flat and conventional. I want you to turn it into a high-end sensory experience with subtle GPU-accelerated background motion, scroll-tied reveal effects, and fluid spring animations on user interactions. Push the browser's capabilities to make the page feel cinematic while remaining performant across mobile and desktop.
| Checked | Without skill | With skill |
|---|---|---|
| Outlines 2 or 3 distinct technical approaches for the visual hero experience before providing code. | Missed | Passed |
| Asks the user to select an execution direction prior to producing the code. | Missed | Passed |
The instructions your model reads when the skill loads.
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.
Invoke /frontend-design — 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 /teach-impeccable 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.
This skill has the highest potential to misfire. Do NOT jump straight into implementation. You MUST:
Skipping this step risks building something embarrassing that needs to be thrown away.
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.
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"?
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.
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.
test cases passed, vs 13 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.