overdrive

Design and implement high-performance front-end effects with progressive enhancement and 60fps targets.

Updated Apr 3, 2026
One-click install
npx skills add https://github.com/yahya-azeem/Pokedex --skill overdrive-yahya-azeem
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: overdrive
Source: https://github.com/yahya-azeem/Pokedex/tree/main/library/impeccable/skills/overdrive
Command: npx skills add https://github.com/yahya-azeem/Pokedex --skill overdrive-yahya-azeem

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you push a web interface beyond ordinary UI polish into technically impressive experiences that feel cinematic, fast, and “wow” to users.

Core Features & Use Cases

  • Design-context-driven effects: Uses the project’s gathered design principles to decide what level of “extraordinary” fits the current surface (marketing vs functional vs performance-critical).
  • Cinematic transitions and high-performance motion: Builds transitions using View Transitions, spring physics, and Web Animations with disciplined fallbacks.
  • Scroll/GPU-powered interactivity and data feel-alive UX: Applies scroll-driven reveals, virtual scrolling, GPU-accelerated rendering, and animated state transitions while targeting 60fps and honoring reduced-motion preferences.
  • Progressive enhancement and verification loops: Enforces graceful degradation, performance guardrails, and iterative browser-automation preview/testing to refine the final result.

Quick Start

Use the overdrive skill to enhance an existing component by first selecting 2–3 ambitious visual or interactive directions and then implementing the confirmed direction with progressive enhancement and performance checks.

Frequently Asked Questions about overdrive

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make web interfaces feel cinematic at 60fps?

To make web interfaces feel cinematic at 60fps, apply GPU-accelerated rendering, View Transitions, and spring physics while enforcing progressive enhancement and prefers-reduced-motion fallbacks.

What is the best way to implement scroll-driven UI animation?

The best way to implement scroll-driven UI animation is using GPU-powered interactivity and Web Animations, targeting 60fps performance while providing graceful degradation for reduced-motion preferences.

How do I add progressive enhancement to data-heavy dashboards?

Add progressive enhancement to data-heavy dashboards by applying virtual scrolling and GPU-accelerated rendering to keep data feel-alive UX performant, ensuring graceful degradation for unsupported environments.

Does this approach work for both marketing surfaces and functional UI components?

Yes, this approach works for both marketing surfaces and functional UI components by using design-context-driven effects to determine the appropriate level of motion and interactivity for each surface type.

How do you verify high-performance front-end effects maintain 60fps?

Verify high-performance front-end effects maintain 60fps through iterative browser-automation preview testing, enforcing performance guardrails and refining the final cinematic transitions during the development loop.

Why include prefers-reduced-motion fallbacks for UI animation?

Include prefers-reduced-motion fallbacks for UI animation to enforce progressive enhancement, ensuring users with motion sensitivities experience graceful degradation without losing core functional state transitions.