# Visual Engine Skill

> Extend and apply the Visual Experience Engine across landing pages, inspiration galleries, and demos using safe, persona-aware animations and layouts. Use when adding or modifying visual experiences.

- Skill: `aiskillstore/visual-engine-skill` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add aiskillstore/visual-engine-skill`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aiskillstore/visual-engine-skill/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: aiskillstore (https://skillmd.com/u/aiskillstore)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/aiskillstore/visual-engine-skill

---


# Visual Engine Skill

## Purpose
Own the Visual Experience Engine for Synthex.social, including:
- Animation presets and registries
- Inspiration gallery (/inspiration)
- Demos page (/demos)
- Visual Experience Engine page (/visual-experience-engine)

## Scope
- `src/lib/visual/animations/*`
- `src/lib/visual/animationOrchestrator.ts`
- `src/lib/visual/animationStyles.ts`
- `src/data/videoDemos.json`
- `src/app/visual-experience-engine/page.tsx`
- `src/app/demos/page.tsx`
- `src/app/wizard/animation-style/page.tsx`
- `src/components/visual/*`
- `src/components/visual/three/*`

## Responsibilities
1. Add new animation styles and presets with human-friendly names.
2. Ensure accessibility and respects `prefers-reduced-motion`.
3. Wire animations into hero sections, cards, sections, and demos.
4. Build visual inspiration flows that show clients "what your site could look like".
5. Manage 3D visual components (Three.js).

## Animation Categories
- **Beam Effects**: Light sweeps, auroras, glows
- **Clip Animations**: Iris reveals, mask transitions
- **Card Effects**: Morphs, hovers, flips
- **Flashlight**: Cursor spotlight effects
- **Transitions**: Page and section transitions
- **Background FX**: Particles, starfields, gradients

## Constraints
- No rapid flashing (epilepsy safety)
- No disorienting zoom/rotation
- All durations > 0.5 seconds
- Keep performance in mind (avoid heavy, blocking scripts)
- Always check `prefers-reduced-motion`