Network Protocol Visualization Skill
Create browser-openable HTML animations for computer networking concepts. This skill focuses on helping users understand protocols through packet structures, sequence flows, topology animation, tables, and step-by-step explanations.
When To Use
Use this skill for:
- TCP three-way handshake, data transfer, and four-way close;
- IPv4 datagram and header field explanations;
- Ethernet frame structure and MAC addressing;
- switch MAC table learning, flooding, and forwarding;
- routing table lookup, longest-prefix matching, and packet forwarding;
- DHCP Discover / Offer / Request / ACK;
- HTTPS/TLS handshake and certificate verification;
- PPP frame structure;
- packet capture and protocol stack explanation;
- firewall filtering by IP, port, protocol, or rule order.
For general concept maps or non-network diagrams, use learning-visualization-skill. For a full presentation deck, use html-ppt-skill or pptx-deck-skill.
Output
Default to a single .html file with inline CSS and JavaScript. The page should run in a modern browser without 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
- Identify the protocol or networking concept.
- Decide whether the explanation is about structure, interaction, topology, or filtering.
- Select the closest bundled reference asset if useful.
- Generate an HTML animation with clear controls and step text.
- Verify that packet direction, protocol fields, table highlights, and labels are accurate.
Visualization Modes
| Topic shape | Recommended layout |
|---|---|
| Packet/frame structure | Layered colored fields with hover or step explanations |
| Client/server handshake | Left-right sequence diagram with packets moving between endpoints |
| Routing/switching | Network topology with animated packet path and highlighted table rows |
| Protocol stack | Layered OSI/TCP-IP stack with encapsulation/decapsulation |
| Firewall/filtering | Rule table plus animated packet accept/drop decisions |
Required Interactions
Include these controls unless the output is intentionally static:
- play/pause;
- reset or replay;
- current-step explanation.
Add step-next controls for dense teaching material. Add speed controls only when timing is important for the user's scenario.
Visual Standards
- Use protocol-layer color coding consistently:
- physical/link context: gray or blue;
- network layer: green;
- transport layer: orange;
- application/security layer: purple;
- warnings or drops: red.
- Show packet direction unambiguously with arrows or moving packets.
- Keep labels short and provide explanations in side panels or step text.
- Avoid showing offensive or directly actionable attack instructions. Security examples should explain defensive understanding and include an education-only framing.
Reference Assets
Use these bundled examples as structure references:
assets/tcp-visualization.html- TCP handshake animation.assets/ipv4_datagram.htmlandassets/ipv4_datagram-3d.html- IPv4 header visualization.assets/ethernet-frame.html- Ethernet frame structure.assets/router-routing-table.html- routing table lookup and forwarding.assets/switch-mac-table.html- switch MAC learning.assets/HTTPS.html- HTTPS/TLS flow.assets/ppp_frame.html- PPP frame structure.
Prompt examples are in references/prompts.md. Read them when you need protocol-specific phrasing or a starting structure.
Quality Checklist
Before delivering:
- The protocol steps are ordered correctly.
- The packet fields and layer names are accurate.
- Animation timing supports explanation rather than distraction.
- Step text explains what changed at each stage.
- Security-related content stays educational and does not include usable attack code.
- The output file path is reported clearly.
