| name | fogsight-skill |
| description | Use when user wants to generate educational animation for a concept or topic, create visual explanation with HTML/CSS/JS animation, or transform abstract ideas into animated visual content |
Fogsight Skill
Overview
Generate beautiful, animated educational content from abstract concepts using the Fogsight methodology. This skill transforms topics like algorithms, physics principles, or mathematical concepts into self-contained HTML files with stunning visual animations.
Core Principle: Use the Fogsight Prompt Template to generate animations - every animation is created fresh based on the topic, not pre-written templates.
When to Use
- User asks to "generate animation for [topic]"
- User wants to "create visual explanation" of a concept
- User mentions "animated tutorial" or "educational animation"
- User references Fogsight or similar animation generation tools
- Converting abstract concepts (algorithms, physics, math) into visual form
Core Workflow
Step 1: Receive Topic
User provides a topic (e.g., "冒泡排序", "TCP三次握手", "相对论")
Step 2: Apply Fogsight Prompt Template
MANDATORY: Use the following prompt template to generate the animation:
请你生成一个非常精美的动态动画,讲讲 {topic}
要动态的,要像一个完整的,正在播放的视频。包含一个完整的过程，能把知识点讲清楚。
页面极为精美，好看，有设计感，同时能够很好的传达知识。知识和图像要准确
附带一些旁白式的文字解说,从头到尾讲清楚一个小的知识点
不需要任何互动按钮,直接开始播放
使用和谐好看，广泛采用的浅色配色方案，使用很多的，丰富的视觉元素。双语字幕
**请保证任何一个元素都在一个2k分辨率的容器中被摆在了正确的位置，避免穿模，字幕遮挡，图形位置错误等等问题影响正确的视觉传达**
html+css+js+svg，放进一个html里
Replace {topic} with the user's input.
Step 3: Generate Animation According to Prompt Requirements
Based on the prompt template, generate HTML that includes:
Required Structure:
- Single HTML file with inline CSS and JavaScript
- GSAP library from CDN:
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
- Light color scheme (参考: #fafbfc, #f0f2f5 backgrounds)
- Bilingual subtitles (Chinese + English) at bottom
- Auto-play on load (no interaction buttons)
Required Scenes:
- Introduction Scene - What is this concept?
- Concept Scene - Core idea explanation
- Main Visualization Scene - Step-by-step demonstration
- Completion Scene - Summary and statistics
Required Features:
- Scene transitions with GSAP animations
- Synchronized subtitles that explain each step
- Visual elements that demonstrate the concept clearly
- Proper spacing and positioning (2K resolution compatible)
- Total duration: 40-80 seconds
Step 4: Save and Deliver
- Save the HTML file with descriptive name:
{topic}-animation.html
- Provide file path to user
- Briefly explain what the animation covers
Example Generation
User Input: "冒泡排序"
Prompt Used:
请你生成一个非常精美的动态动画,讲讲 冒泡排序
要动态的,要像一个完整的,正在播放的视频...
[rest of template]
Generated Output: Complete HTML file with:
- Scene 1: Title "冒泡排序 Bubble Sort" with description
- Scene 2: Core concept explanation (bubbling up like bubbles in water)
- Scene 3: Live visualization of sorting process with animated bars
- Scene 4: Completion with statistics (rounds, comparisons, swaps)
Output Format
Always respond with:
- Confirmation of the topic
- Brief description of what the animation shows
- File path where HTML is saved
- Instructions to open in browser
Example response:
已为您生成"快速排序算法"的动画演示。
动画内容：
- 开场介绍快速排序的基本概念
- 核心思想：分治法与基准元素
- 可视化展示分区过程和递归调用
- 完成统计：遍历轮次、比较次数、交换次数
- 全程双语字幕解释每一步
文件已保存至：/path/to/quicksort-animation.html
直接在浏览器中打开即可观看动画。
Technical Requirements Checklist
When generating, ensure:
Common Topics
Algorithms:
- 冒泡排序 Bubble Sort
- 快速排序 Quick Sort
- 归并排序 Merge Sort
- 二分查找 Binary Search
- 深度优先搜索 DFS
- 动态规划 Dynamic Programming
Physics:
- 波的干涉 Wave Interference
- 抛体运动 Projectile Motion
- 电磁感应 Electromagnetic Induction
Mathematics:
- 勾股定理 Pythagorean Theorem
- 欧拉公式 Euler's Formula
- 导数与积分 Derivatives and Integrals
Computer Science:
- DNS解析原理 How DNS Works
- TCP三次握手 TCP Handshake
- 区块链共识 Blockchain Consensus
Important Notes
- ALWAYS use the Fogsight Prompt Template - never pre-write animations
- ALWAYS generate fresh for each topic - don't reuse code
- ALWAYS include all 4 scenes for complete narrative
- ALWAYS use bilingual subtitles
- NEVER use external images or assets
- NEVER require user interaction (auto-play only)
