overdrive_skill

Overview

This skill helps you push interfaces past conventional limits with technically ambitious, well-considered implementations. It guides choice of GPU, worker, and animation techniques so interactions feel extraordinary without compromising accessibility or performance. Use it to design cinematic transitions, massive-data tables at 60fps, or subtle physical motion that makes UI feel alive.

How this skill works

The skill inspects the design context and project goals (personality, audience, constraints) then proposes 2–3 distinct directions that balance ambition, complexity, and fallback strategies. It prescribes concrete techniques—View Transitions, WebGL/WebGPU, OffscreenCanvas, virtual scrolling, springs, scroll-driven timelines—and enforces progressive enhancement, performance budgets, and prefers-reduced-motion checks. It requires iterative browser automation and visual verification before finalizing implementation.

When to use it

• When you want an interface to feel unexpectedly fast, fluid, or cinematic
• When rendering or animating large datasets while keeping 60fps is required
• When a visual or motion enhancement would improve perceived quality without changing product behavior
• When a UI component should morph naturally from its trigger (shared element transitions)
• When you need GPU-accelerated visuals or off-main-thread rendering for heavy work

Best practices

• Run the Context Gathering Protocol first; if no context exists, run teach-impeccable before proposing directions
• Always propose 2–3 candidate directions and get the user's pick before coding; explain trade-offs (support, perf, complexity)
• Progressive enhancement: provide functional fallbacks and respect prefers-reduced-motion
• Lazy-init heavy resources, pause off-screen work, and test on mid-range devices
• Iterate visually with browser automation—preview, tweak easing/timing, and re-run tests

Example use cases

• A product-list page that morphs a card into a full-screen detail using the View Transitions API with a graceful CSS fallback
• A table that virtualizes and GPU-renders 100k rows with OffscreenCanvas and WebGL, remaining interactive at 60fps
• A hero section with scroll-driven parallax and shader-backed background that degrades to a static image on unsupported browsers
• A form with streaming validation and animated state transitions that feel instant without blocking the main thread