What problem does it solve? Static text and images often fail to explain processes, transformations, and relationships in educational lessons. This Skill guides the creation of purposeful, accessible animations as reusable React islands that make lesson concepts genuinely easier to understand. ## Core Features & Use Cases - Teaching-focused animations: Builds interactive React islands in src/components/react/ that visualize processes, transformations, and relationships rather than decorating pages. - Accessibility and performance guardrails: Enforces prefers-reduced-motion fallbacks, transform/opacity-only animation, keyboard-operable controls, and design-token styling with bun run check validation. - Bilingual MDX integration: Wires islands into lessons with client:visible hydration and Spanish twin translations, including MindMap chunking summaries. - Use Case: When writing a lesson about a multi-step mental model, use this Skill to author a slider-driven interactive visual next to each explanation, plus a closing MindMap, in both English and Spanish. ## Quick Start Ask the AI to add an interactive animation explaining the core process of the lesson you are currently authoring.
