Learning Visualization Skill

Learning Visualization Skill

Create focused, browser-openable HTML pages that explain knowledge through diagrams and motion. This skill is for learning and review scenarios where a static answer is not enough: the user needs a visual explanation, a step-by-step concept map, or an animated principle demo.

When To Use

Use this skill for:

• concept maps and knowledge structures;
• process diagrams, workflows, and decision flows;
• principle demos for algorithms, systems, protocols, or scientific ideas;
• comparison diagrams such as "A vs B";
• timelines and evolution diagrams;
• simplified system overviews for teaching;
• AI/ML visualizations such as MLP, RNN, LSTM, GRU, Word2Vec, One-Hot, or GPU computation.

If the user asks for a full slide deck, use html-ppt-skill or pptx-deck-skill instead. If the user asks for a specialized network protocol animation, prefer network-protocol-viz.

Output

Default to a single .html file with inline CSS and JavaScript. The result should open directly in a browser and should not require a build step.

Write generated files into the current agent output directory when available. If no output directory is provided, ask once or use a clear local output path under the current workspace.

Workflow

1. Identify the target concept, process, or model.
2. Choose the visualization type.
3. Pick a reference example only if it matches the task.
4. Generate a single-file HTML page with clear visual hierarchy and restrained motion.
5. Include a short current-step explanation when the animation is sequential.
6. Check that text does not overlap, controls work, and the page is useful for learning rather than decorative only.

Visualization Types

Visual Standards

• Use purposeful motion: nodes appear in order, connection lines draw after nodes, and data flow should be visible when the concept has direction.
• Keep diagrams readable on common laptop screens. Avoid cramming a whole textbook page into one canvas.
• Prefer SVG or CSS shapes for diagrams. Use images only when the subject needs real visual material.
• Use text as labels and explanations, not as decoration.
• Do not use emoji as diagram icons. Use simple inline SVG or icon fonts if icons are necessary.
• Avoid one-note dark neon pages for every subject. Match the visual tone to the learning context.

Reference Assets

Use these bundled examples as structure references, not as content to copy blindly:

• assets/MLP.html - feed-forward neural network / layer flow.
• assets/RNN.html - recurrent flow over time.
• assets/LSTM-Introduce.html and assets/LSTM-1.html - gate and cell-state explanation.
• assets/GRU-Introduce.html - GRU gate explanation.
• assets/word2vec.html - vector representation explanation.
• assets/onehot.html - one-hot encoding explanation.
• assets/GPU.html - parallel computing/system overview.

Prompt examples are in references/prompts.md. Read them only when the task is close to the bundled examples or when you need a starting structure.

Quality Checklist

Before delivering:

• The page has a clear learning objective in the title or first screen.
• The diagram can be understood without reading a long paragraph first.
• The animation has a reason: sequence, causality, hierarchy, or flow.
• Controls, if present, include at least replay/reset; step controls are useful for dense topics.
• Long labels wrap cleanly and do not overlap nodes or arrows.
• The output file path is reported clearly.