i-overdrive_skill

Overview

──────────── ⚡ OVERDRIVE ───────────── 》》》 Entering overdrive mode... This skill pushes interfaces past conventional limits by combining advanced browser APIs, performance techniques, and refined motion design. It guides you through proposing multiple directions, validating context, and iterating with browser automation so the result feels purposeful and polished. The focus is on making UI feel extraordinary without breaking accessibility or performance constraints.

How this skill works

It inspects the project context and design goals, then recommends 2–3 feasible directions (e.g., shader-driven hero, GPU-accelerated table, or spring-morphed dialog) and explains trade-offs. Before implementation you must ask the user to pick a direction and then use progressive enhancement, lazy initialization, Web Workers/OffscreenCanvas/WASM or WebGL/WebGPU as appropriate. Iterative visual verification with browser automation is required until the effect reads as intent, not gimmick.

When to use it

• When you need a sensory "wow" on marketing surfaces (cinematic transitions, shaders).
• When functional UI must feel faster or more natural (virtual scrolling, spring physics, morphing dialogs).
• When datasets are large and need fluid rendering (GPU charts, canvas rendering).
• When performance must remain invisible (off-main-thread processing, lazy init).
• When you can commit time to polish and iterative visual testing.

Best practices

• Always run the Context Gathering Protocol and propose multiple directions before coding.
• Provide progressive enhancement and robust fallbacks for all bleeding-edge APIs.
• Respect prefers-reduced-motion and test on mid-range devices.
• Lazy-initialize heavy resources and pause off-screen rendering.
• Use browser automation to preview and iterate; polish the last 20% of motion and timing.

Example use cases

• A portfolio hero that uses a lightweight shader and scroll-tied reveal for a cinematic entrance with a static fallback.
• A data table that virtualizes 100k rows and uses GPU-accelerated sorting/filters for smooth 60fps interaction.
• A settings dialog that morphs from its trigger using View Transitions and spring physics for natural motion.
• A dashboard with WebGL-rendered charts that animate between states and scale to large datasets with OffscreenCanvas processing.
• A form with streaming validation and optimistic UI feedback that never blocks the main thread.