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.
Best use case
visual-engine-skill is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.
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.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "visual-engine-skill" skill to help with this workflow task. Context: 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.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/visual-engine-skill/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How visual-engine-skill Compares
| Feature / Agent | visual-engine-skill | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
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.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# 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`
Related Skills
visual-design-foundations
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
voice-ai-engine-development
Build real-time conversational AI voice engines using async worker pipelines, streaming transcription, LLM agents, and TTS synthesis with interrupt handling and multi-provider support
vector-database-engineer
Expert in vector databases, embedding strategies, and semantic search implementation. Masters Pinecone, Weaviate, Qdrant, Milvus, and pgvector for RAG applications, recommendation systems, and similar
unreal-engine-cpp-pro
Expert guide for Unreal Engine 5.x C++ development, covering UObject hygiene, performance patterns, and best practices.
ui-visual-validator
Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification. Masters screenshot analysis, visual regression testing, and component validation. Use PROACTIVELY to verify UI modifications have achieved their intended goals through comprehensive visual analysis.
tutorial-engineer
Creates step-by-step tutorials and educational content from code. Transforms complex concepts into progressive learning experiences with hands-on examples. Use PROACTIVELY for onboarding guides, feature tutorials, or concept explanations.
reverse-engineer
Expert reverse engineer specializing in binary analysis, disassembly, decompilation, and software analysis. Masters IDA Pro, Ghidra, radare2, x64dbg, and modern RE toolchains. Handles executable analysis, library inspection, protocol extraction, and vulnerability research. Use PROACTIVELY for binary analysis, CTF challenges, security research, or understanding undocumented software.
research-engineer
An uncompromising Academic Research Engineer. Operates with absolute scientific rigor, objective criticism, and zero flair. Focuses on theoretical correctness, formal verification, and optimal implementation across any required technology.
rag-engineer
Expert in building Retrieval-Augmented Generation systems. Masters embedding models, vector databases, chunking strategies, and retrieval optimization for LLM applications. Use when: building RAG, vector search, embeddings, semantic search, document retrieval.
protocol-reverse-engineering
Master network protocol reverse engineering including packet analysis, protocol dissection, and custom protocol documentation. Use when analyzing network traffic, understanding proprietary protocols, or debugging network communication.
prompt-engineering-patterns
Master advanced prompt engineering techniques to maximize LLM performance, reliability, and controllability in production. Use when optimizing prompts, improving LLM outputs, or designing production prompt templates.
prompt-engineer
Transforms user prompts into optimized prompts using frameworks (RTF, RISEN, Chain of Thought, RODES, Chain of Density, RACE, RISE, STAR, SOAP, CLEAR, GROW)