fogsight-skill

Generate educational HTML animations for abstract concepts with GSAP and bilingual subtitles.

19|1|Updated Mar 7, 2026

Search Tags:#html #educational content #visualization #animation #gsap #concept explanation

Ready to run

npx skills add https://github.com/hongyangAndroid/blog_ai --skill fogsight-skill

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: fogsight-skill
Source: https://github.com/hongyangAndroid/blog_ai/tree/main/.trae/skills/fogsight-skill
Command: npx skills add https://github.com/hongyangAndroid/blog_ai --skill fogsight-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of engaging, animated educational content from abstract concepts, making complex topics visually understandable.

Core Features & Use Cases

Concept Visualization: Transforms abstract ideas (algorithms, physics, math) into dynamic HTML/CSS/JS animations.
Automated Content Generation: Uses a specific prompt template to generate unique animations for any given topic.
Use Case: A user wants to understand how "Bubble Sort" works. This skill generates a self-playing HTML animation demonstrating the sorting process step-by-step with bilingual subtitles.

Quick Start

Use the fogsight-skill to generate an animation for the topic '冒泡排序'.

Frequently Asked Questions about fogsight-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate educational animations for abstract concepts?▼

To generate educational animations for abstract concepts, this skill uses GSAP within a predefined prompt template to produce self-contained HTML files with visual effects and bilingual subtitles. It automatically transforms topics like algorithms or physics into dynamic web animations.

Can I visualize sorting algorithms using HTML and GSAP?▼

You can visualize sorting algorithms using HTML and GSAP, as this skill creates single HTML files demonstrating step-by-step processes. It leverages GSAP for visual effects to animate algorithmic logic with auto-play functionality and bilingual subtitles.

What do I need to create auto-playing HTML animations for physics and math topics?▼

To create auto-playing HTML animations for physics and math topics, you only need to provide the topic name. The skill handles the GSAP visual effects, bilingual subtitles, and 2K resolution compatible container generation automatically without external dependencies.

Does this educational content generator support bilingual subtitles?▼

This educational content generator supports bilingual subtitles natively. It embeds them directly into the single HTML file output, ensuring clear explanations accompany the GSAP visual effects for abstract concept visualization.

What is the best way to explain complex algorithms visually?▼

The best way to explain complex algorithms visually is generating a single HTML file with auto-play functionality. This approach uses GSAP to ensure accurate visual representation of algorithmic steps within a 2K resolution compatible container.

Are there limitations to the HTML animations created for concept explanation?▼

Limitations of the HTML animations for concept explanation include a strict focus on algorithms, physics, and mathematics. The output is a single HTML file, and all visual representations are constrained within a 2K resolution compatible container using GSAP.