Advanced Visual Effects

What it does

Implements purposeful premium effects with SVG, masks, Canvas or WebGL, choosing the lightest technique that works.

When to use it

Use for image reveals, custom cursors, material transitions, or data-driven visuals that need real fallbacks.

Problems it prevents

Stops effects reached for because a library supports them, with no accessibility or device fallback plan.

Typical workflow

1. Work up the selection ladder from CSS
2. Justify anything beyond CSS
3. Build device and motion-preference fallbacks
4. Verify real-device performance

Example output

One effect implemented with the lightest technique that achieves it, plus a stated, working fallback for constrained devices.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemCinematic Animation System

  Designs bespoke, brand-specific motion (typography, imagery, interface, scroll, depth) that rejects default AI motion clichés.

• System3D Modelling

  Sources, integrates and optimises realistic web-ready 3D assets: product models, WebGL and Three.js scenes.

• SystemPerformance

  Measures and improves loading, Core Web Vitals, images, fonts, JavaScript and animation cost on real devices.