webgl-card-effects

# WebGL Card Effects Skill ## Overview This skill adds GPU-accelerated visual effects to React card components using standalone WebGL2 fragment shaders — no Three.js, no R3F, no external library required. It targets deckbuilder games and card UIs where rarity tiers should feel visually distinct, not just differentiated by a CSS `box-shadow` value. **Scope**: Holographic foil overlays, metallic shimmer bands, rarity-driven energy pulses, and interactive tilt-shine effects mounted directly on React card components. The canonical target is `FramedCard.tsx` in a React 19 / Vite / Tailwind project with a rarity system (starter → common → uncommon → rare → legendary). **Not in scope**: 3D transformations, texture loading, post-processing pipelines, or any Three.js scene management. For those, use `threejs-builder`. **Key constraint**: Browsers cap WebGL contexts at roughly 8–16 total per page. This skill uses a single shared WebGL2 context with blit-to-2D-canvas output per card, avoiding the per-card context problem entirely. See `references/shader-integration-react.md` for the full singleton pattern. --- ## Instructions ### Phase 1: ASSESS **Goal**: Understand which effects are needed and confirm the card component structure before writing any code. **Step 1: Read the card component** Read these files before writing anything: - `src/components/cards/FramedCard.tsx` — component structure, hover state, rarity prop flow - `src/components/cards/cardStyles.ts` — `CARD_SIZE_C...