Infographic Generator Creation

Infographic Generator Creation

Claude Code v2.0.36 Sonnet 4.5 · Claude Pro

!!! prompt Use the skill-generator skill to create a new skill called infograph-generator-p5.
This skill is a variation of the microsim-p5 skill. The key difference is that there is that the control region of the layout is ONLY used for displaying the details of the item that the user's mouse is hovering over. The definition of infographic is a drawing region that has shapes (nodes) on it. This microsim reads a JSON file called data.json that uses the same structure as the vis-network.js format for metadata, groups, nodes and edges. Each shape has a label over it. The label is usually under 30 characters. When the user hovers over a shape, a tooltip will be displayed next to the item the user is hovering over. The tooltip uses a small amount of screen area to give a single sentence of the item being viewed. Below the drawing in the control area a full paragraph about the item will be shown. This full paragraph may have links in it. The tooltip will never have links, just a short description. The tooltip will always be visible in the drawing area, even if the drawing shape is near the edge of the drawing area. The input to this simulation is a list of items with the following parameters: item-label, item-short-description, item-full-description, item shape, item color, item icon (optional), item location (x,y), item border color, item border width. At the end of the list of items, there can also be an edge list. This list describes edges between any two items (to and from to other items). The edges are black by default, but they may also have a color, a width and a curve type. Use the parameters in the vis-network library for describing nodes and edges.

⏺ I'll help you create the infograph-generator-p5 skill using the skill-creator. This will be an infographic generator that uses p5.js with hover interactions and vis-network compatible data format.

The "skill-creator" skill is running

The "skill-creator" skill is running

⏺ I'll help you create the infograph-generator-p5 skill following the skill creation process. Let me start by understanding the requirements and then create the skill.

⏺ Bash(python scripts/init_skill.py infograph-generator-p5 --path skills/infograph-generator-p5) ⎿  Error: Exit code 2 python: can't open file '$HOME/Documents/ws/claude-skills/scripts/init_skill.py': [Errno 2] No such file or directory

⏺ Bash(ls -la scripts/) ⎿  total 80
drwxr-xr-x 9 dan staff 288 Nov 8 09:13 . drwxr-xr-x@ 24 dan staff 768 Nov 9 09:54 .. … +7 lines (ctrl+o to expand)

⏺ Bash(find ~/.claude/skills/skill-creator -name "*.py" -type f) ⎿  (No content)

⏺ Bash(ls -la ~/.claude/skills/skill-creator/) ⎿  total 48
drwxr-xr-x 5 dan staff 160 Nov 1 17:23 . drwxr-xr-x 21 dan staff 672 Nov 1 17:25 .. … +3 lines (ctrl+o to expand)

⏺ Bash(ls -la ~/.claude/skills/skill-creator/scripts/) ⎿  total 40
drwxr-xr-x 3 dan staff 96 Nov 2 08:37 pycache drwxr-xr-x 6 dan staff 192 Nov 2 08:37 . … +4 lines (ctrl+o to expand)

⏺ Bash(python ~/.claude/skills/skill-creator/scripts/init_skill.py infograph-generator-p5 --path skills/infograph-generator-p5) ⎿  🚀 Initializing skill: infograph-generator-p5 Location: skills/infograph-generator-p5 … +14 lines (ctrl+o to expand)

⏺ Bash(find skills/infograph-generator-p5 -type f) ⎿  skills/infograph-generator-p5/infograph-generator-p5/references/api_reference.md skills/infograph-generator-p5/infograph-generator-p5/scripts/example.py skills/infograph-generator-p5/infograph-generator-p5/SKILL.md skills/infograph-generator-p5/infograph-generator-p5/assets/example_asset.txt

⏺ Read(skills/infograph-generator-p5/infograph-generator-p5/SKILL.md) ⎿  Read 86 lines

⏺ Read(skills/microsim-p5/SKILL.md) ⎿  Read 667 lines

⏺ Now let me create the complete infograph-generator-p5 skill. I'll start by writing the SKILL.md file with detailed instructions:

⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/SKILL.md) ⎿  Updated skills/infograph-generator-p5/infograph-generator-p5/SKILL.md with 549
additions and 53 removals 1 --- 2 name: infograph-generator-p5 3 - description: [TODO: Complete and informative explanation of what the - skill does and when to use it. Include WHEN to use this skill - specific - scenarios, file types, or tasks that trigger it.] 3 + description: This skill generates interactive infographic visualizations + using p5.js that read vis-network compatible JSON data. Use this skill + when creating educational infographics with nodes, edges, and hover + interactions where users can explore relationships between concepts. Each + infographic displays shapes with labels, shows tooltips on hover, and + displays detailed descriptions in a control panel below the drawing area. 4 --- 5
6 - # Infograph Generator P5 6 + # Interactive Infographic Generator with P5.js 7
8 ## Overview 9
10 - [TODO: 1-2 sentences explaining what this skill enables] 10 + Generate interactive educational infographics using p5.js that visualize + relationships between concepts through nodes and edges. Infographics are + data-driven visualizations that read from JSON files in vis-network + format, allowing users to hover over elements to see detailed + information. 11
12 - ## Structuring This Skill 12 + ## Purpose 13
14 - [TODO: Choose the structure that best fits this skill's purpose. Common - patterns: 14 + Infographics transform complex concept relationships into visual, + explorable diagrams. Unlike MicroSims which focus on simulation and + interaction controls, infographics emphasize information display and + exploration through hover interactions. The control region is dedicated + exclusively to displaying detailed information about the currently + hovered item. 15
16 - 1. Workflow-Based (best for sequential processes) 17 - - Works well when there are clear step-by-step procedures 18 - - Example: DOCX skill with "Workflow Decision Tree" → "Reading" → - "Creating" → "Editing" 19 - - Structure: ## Overview → ## Workflow Decision Tree → ## Step 1 → ## - Step 2... 16 + ## When to Use This Skill 17
18 - 2. Task-Based (best for tool collections) 19 - - Works well when the skill offers different operations/capabilities 20 - - Example: PDF skill with "Quick Start" → "Merge PDFs" → "Split PDFs" → - "Extract Text" 21 - - Structure: ## Overview → ## Quick Start → ## Task Category 1 → ## Task - Category 2... 18 + Use this skill when: 19 + - Creating concept maps, mind maps, or knowledge graphs 20 + - Visualizing relationships between topics, ideas, or entities 21 + - Building interactive diagrams for educational content 22 + - Converting vis-network data into standalone p5.js visualizations 23 + - Creating hover-based information exploration interfaces 24
25 - 3. Reference/Guidelines (best for standards or specifications) 26 - - Works well for brand guidelines, coding standards, or requirements 27 - - Example: Brand styling with "Brand Guidelines" → "Colors" → - "Typography" → "Features" 28 - - Structure: ## Overview → ## Guidelines → ## Specifications → ## - Usage... 25 + ## Key Differences from MicroSim 26
27 - 4. Capabilities-Based (best for integrated systems) 28 - - Works well when the skill provides multiple interrelated features 29 - - Example: Product Management with "Core Capabilities" → numbered - capability list 30 - - Structure: ## Overview → ## Core Capabilities → ### 1. Feature → ### - 2. Feature... 27 + 1. Control Region Purpose: The control area ONLY displays details of + the hovered item (no sliders, buttons, or other controls) 28 + 2. Data-Driven: Reads node and edge data from data.json file 29 + 3. Interaction Model: Primarily hover-based exploration rather than + parameter manipulation 30 + 4. Layout: Nodes have fixed positions defined in the data file 31
32 - Patterns can be mixed and matched as needed. Most skills combine - patterns (e.g., start with task-based, add workflow for complex - operations). 32 + ## Development Process 33
34 - Delete this entire "Structuring This Skill" section when done - it's - just guidance.] 34 + ### Step 1: Define Infographic Requirements 35
36 - ## [TODO: Replace with the first main section based on chosen structure] 36 + Gather the following information: 37
38 - [TODO: Add content here. See examples in existing skills: 39 - - Code samples for technical skills 40 - - Decision trees for complex workflows 41 - - Concrete examples with realistic user requests 42 - - References to scripts/templates/references as needed] 38 + 1. Subject Area: What topic does this infographic visualize? 39 + 2. Audience Level: Elementary, Middle School, High School, + Undergraduate, Graduate 40 + 3. Node Types: What categories/groups of nodes exist? 41 + 4. Relationships: What do the edges represent? 42 + 5. Data Source: Where will the node/edge data come from? 43
44 - ## Resources 44 + ### Step 2: Prepare Data File (data.json) 45
46 - This skill includes example resource directories that demonstrate how to - organize different types of bundled resources: 46 + Create a JSON file following the vis-network format with metadata, + groups, nodes, and edges: 47
48 - ### scripts/ 49 - Executable code (Python/Bash/etc.) that can be run directly to perform - specific operations. 48 + json 49 + { 50 + "metadata": { 51 + "title": "Topic Overview", 52 + "description": "An interactive infographic showing relationships + between concepts", 53 + "author": "Your Name", 54 + "created": "2025-01-09" 55 + }, 56 + "groups": { 57 + "foundation": { 58 + "color": "#FF6B6B", 59 + "borderColor": "#C92A2A", 60 + "shape": "ellipse" 61 + }, 62 + "intermediate": { 63 + "color": "#4ECDC4", 64 + "borderColor": "#0B7285", 65 + "shape": "box" 66 + } 67 + }, 68 + "nodes": [ 69 + { 70 + "id": 1, 71 + "label": "Concept Name", 72 + "group": "foundation", 73 + "x": 100, 74 + "y": 100, 75 + "shortDescription": "Brief one-sentence description for tooltip", 76 + "fullDescription": "Detailed paragraph about this concept. Can + include <a href='url'>links</a> and formatting." 77 + } 78 + ], 79 + "edges": [ 80 + { 81 + "from": 1, 82 + "to": 2, 83 + "label": "depends on", 84 + "color": "#999999", 85 + "width": 2 86 + } 87 + ] 88 + } 89 + 90
91 - Examples from other skills: 92 - - PDF skill: fill_fillable_fields.py, extract_form_field_info.py - - utilities for PDF manipulation 93 - - DOCX skill: document.py, utilities.py - Python modules for - document processing 91 + ### Step 3: Generate Infographic Files 92
93 - Appropriate for: Python scripts, shell scripts, or any executable - code that performs automation, data processing, or specific operations. 93 + Create the following folder structure in + /docs/sims/$INFOGRAPHIC_NAME/: 94
95 - Note: Scripts may be executed without loading into context, but can - still be read by Claude for patching or environment adjustments. 95 + 96 + /docs/sims/$INFOGRAPHIC_NAME/ 97 + ├── index.md # Documentation page with iframe 98 + ├── main.html # HTML file with p5.js CDN 99 + ├── $INFOGRAPHIC_NAME.js # p5.js JavaScript code 100 + └── data.json # Node and edge data 101 + 102
103 - ### references/ 104 - Documentation and reference material intended to be loaded into context - to inform Claude's process and thinking. 103 + ## Technical Architecture 104
105 - Examples from other skills: 106 - - Product management: communication.md, context_building.md - - detailed workflow guides 107 - - BigQuery: API reference documentation and query examples 108 - - Finance: Schema documentation, company policies 105 + ### Canvas Structure (REQUIRED) 106
107 - Appropriate for: In-depth documentation, API references, database - schemas, comprehensive guides, or any detailed information that Claude - should reference while working. 107 + Every infographic must have two regions: 108
109 - ### assets/ 110 - Files not intended to be loaded into context, but rather used within the - output Claude produces. 109 + 1. Drawing Region (top): Displays nodes, edges, labels, and tooltips 110 + 2. Detail Display Region (bottom): Shows full description of hovered + item 111
112 - Examples from other skills: 113 - - Brand styling: PowerPoint template files (.pptx), logo files 114 - - Frontend builder: HTML/React boilerplate project directories 115 - - Typography: Font files (.ttf, .woff2) 112 + javascript 113 + // Canvas dimensions - REQUIRED structure 114 + let canvasWidth = 800; // Initial width (responsive) 115 + let drawHeight = 600; // Drawing area height 116 + let controlHeight = 120; // Detail display area height 117 + let canvasHeight = drawHeight + controlHeight; 118 + let margin = 20; // Margin for visual elements 119 + let defaultTextSize = 16; // Base text size 120 121 - **Appropriate for:** Templates, boilerplate code, document templates, - images, icons, fonts, or any files meant to be copied or used in the - final output. 121 + // Data variables 122 + let infographicData; 123 + let nodes = []; 124 + let edges = []; 125 + let groups = {}; 126 + let hoveredNode = null; 127 + let tooltipData = null; 128 129 + function preload() { 130 + infographicData = loadJSON('data.json'); 131 + } 132 + 133 + function setup() { 134 + updateCanvasSize(); 135 + const canvas = createCanvas(canvasWidth, canvasHeight); 136 + canvas.parent(document.querySelector('main')); 137 + 138 + // Parse data 139 + parseData(); 140 + 141 + describe('Interactive infographic showing concept relationships', + LABEL); 142 + } 143 + 144 + function draw() { 145 + updateCanvasSize(); 146 + 147 + // Drawing area background 148 + fill('aliceblue'); 149 + rect(0, 0, width, drawHeight); 150 + 151 + // Detail display area background 152 + fill('white'); 153 + rect(0, drawHeight, width, controlHeight); 154 + 155 + // Draw edges first (behind nodes) 156 + drawEdges(); 157 + 158 + // Draw nodes 159 + drawNodes(); 160 + 161 + // Draw tooltip if hovering over a node 162 + drawTooltip(); 163 + 164 + // Draw detail panel for hovered node 165 + drawDetailPanel(); 166 + } 167 + 168 +
169 + ### Data Parsing 170 +
171 + javascript 172 + function parseData() { 173 + // Parse groups 174 + if (infographicData.groups) { 175 + groups = infographicData.groups; 176 + } 177 + 178 + // Parse nodes 179 + nodes = infographicData.nodes.map(n => ({ 180 + id: n.id, 181 + label: n.label || '', 182 + x: n.x || 0, 183 + y: n.y || 0, 184 + group: n.group || 'default', 185 + shortDescription: n.shortDescription || '', 186 + fullDescription: n.fullDescription || '', 187 + shape: n.shape || (groups[n.group]?.shape || 'ellipse'), 188 + color: n.color || (groups[n.group]?.color || '#97C2FC'), 189 + borderColor: n.borderColor || (groups[n.group]?.borderColor || + '#2B7CE9'), 190 + borderWidth: n.borderWidth || 2, 191 + size: n.size || 40, 192 + icon: n.icon || null 193 + })); 194 + 195 + // Parse edges 196 + edges = infographicData.edges.map(e => ({ 197 + from: e.from, 198 + to: e.to, 199 + label: e.label || '', 200 + color: e.color || '#848484', 201 + width: e.width || 1, 202 + dashes: e.dashes || false, 203 + smooth: e.smooth || { type: 'continuous', roundness: 0.5 } 204 + })); 205 + } 206 + 207 +
208 + ### Node Drawing 209 +
210 + javascript 211 + function drawNodes() { 212 + hoveredNode = null; 213 + 214 + for (let node of nodes) { 215 + // Check if mouse is hovering over this node 216 + let d = dist(mouseX, mouseY, node.x, node.y); 217 + let isHovered = d < node.size; 218 + 219 + if (isHovered && mouseY < drawHeight) { 220 + hoveredNode = node; 221 + } 222 + 223 + // Draw node shape 224 + push(); 225 + stroke(node.borderColor); 226 + strokeWeight(isHovered ? node.borderWidth + 1 : node.borderWidth); 227 + fill(node.color); 228 + 229 + if (node.shape === 'ellipse' || node.shape === 'circle') { 230 + ellipse(node.x, node.y, node.size * 2); 231 + } else if (node.shape === 'box' || node.shape === 'square') { 232 + rectMode(CENTER); 233 + rect(node.x, node.y, node.size * 1.8, node.size * 1.8); 234 + } else if (node.shape === 'diamond') { 235 + drawDiamond(node.x, node.y, node.size); 236 + } 237 + 238 + // Draw icon if available 239 + if (node.icon) { 240 + // Icon drawing code here 241 + } 242 + 243 + pop(); 244 + 245 + // Draw label 246 + fill(0); 247 + noStroke(); 248 + textAlign(CENTER, CENTER); 249 + textSize(14); 250 + text(node.label, node.x, node.y + node.size + 15); 251 + } 252 + } 253 + 254 + function drawDiamond(x, y, size) { 255 + beginShape(); 256 + vertex(x, y - size); // top 257 + vertex(x + size, y); // right 258 + vertex(x, y + size); // bottom 259 + vertex(x - size, y); // left 260 + endShape(CLOSE); 261 + } 262 + 263 +
264 + ### Edge Drawing 265 +
266 + javascript 267 + function drawEdges() { 268 + for (let edge of edges) { 269 + let fromNode = nodes.find(n => n.id === edge.from); 270 + let toNode = nodes.find(n => n.id === edge.to); 271 + 272 + if (!fromNode || !toNode) continue; 273 + 274 + push(); 275 + stroke(edge.color); 276 + strokeWeight(edge.width); 277 + 278 + if (edge.dashes) { 279 + drawingContext.setLineDash([5, 5]); 280 + } 281 + 282 + // Draw curved or straight line based on smooth parameter 283 + if (edge.smooth && edge.smooth.type === 'curvedCW') { 284 + // Draw curved line clockwise 285 + noFill(); 286 + let controlX = (fromNode.x + toNode.x) / 2 + 50; 287 + let controlY = (fromNode.y + toNode.y) / 2; 288 + bezier(fromNode.x, fromNode.y, controlX, controlY, 289 + controlX, controlY, toNode.x, toNode.y); 290 + } else { 291 + // Draw straight line 292 + line(fromNode.x, fromNode.y, toNode.x, toNode.y); 293 + } 294 + 295 + drawingContext.setLineDash([]); 296 + pop(); 297 + 298 + // Draw edge label if exists 299 + if (edge.label) { 300 + let midX = (fromNode.x + toNode.x) / 2; 301 + let midY = (fromNode.y + toNode.y) / 2; 302 + fill(100); 303 + noStroke(); 304 + textAlign(CENTER, CENTER); 305 + textSize(12); 306 + text(edge.label, midX, midY); 307 + } 308 + } 309 + } 310 + 311 +
312 + ### Tooltip Display (REQUIRED) 313 +
314 + Tooltips must always remain visible within the drawing area, even when + hovering near edges: 315 +
316 + javascript 317 + function drawTooltip() { 318 + if (!hoveredNode || mouseY >= drawHeight) return; 319 + 320 + let tooltipText = hoveredNode.shortDescription; 321 + if (!tooltipText) return; 322 + 323 + // Measure tooltip dimensions 324 + textSize(14); 325 + let tooltipWidth = textWidth(tooltipText) + 20; 326 + let tooltipHeight = 30; 327 + let padding = 10; 328 + 329 + // Position tooltip near mouse, but keep within drawing bounds 330 + let tooltipX = mouseX + 15; 331 + let tooltipY = mouseY - 20; 332 + 333 + // Adjust if tooltip would go off right edge 334 + if (tooltipX + tooltipWidth > width - padding) { 335 + tooltipX = mouseX - tooltipWidth - 15; 336 + } 337 + 338 + // Adjust if tooltip would go off left edge 339 + if (tooltipX < padding) { 340 + tooltipX = padding; 341 + } 342 + 343 + // Adjust if tooltip would go off top edge 344 + if (tooltipY < padding) { 345 + tooltipY = mouseY + 20; 346 + } 347 + 348 + // Adjust if tooltip would go off bottom of drawing area 349 + if (tooltipY + tooltipHeight > drawHeight - padding) { 350 + tooltipY = drawHeight - tooltipHeight - padding; 351 + } 352 + 353 + // Draw tooltip background 354 + push(); 355 + fill(255, 255, 220); 356 + stroke(150); 357 + strokeWeight(1); 358 + rect(tooltipX, tooltipY, tooltipWidth, tooltipHeight, 5); 359 + 360 + // Draw tooltip text 361 + fill(0); 362 + noStroke(); 363 + textAlign(LEFT, CENTER); 364 + textSize(14); 365 + text(tooltipText, tooltipX + 10, tooltipY + tooltipHeight / 2); 366 + pop(); 367 + } 368 + 369 +
370 + ### Detail Panel Display (REQUIRED) 371 +
372 + The control region exclusively displays the full description of the + hovered item: 373 +
374 + javascript 375 + function drawDetailPanel() { 376 + push(); 377 + fill(0); 378 + noStroke(); 379 + textAlign(LEFT, TOP); 380 + textSize(defaultTextSize); 381 + 382 + let panelX = margin; 383 + let panelY = drawHeight + 10; 384 + let panelWidth = width - 2 * margin; 385 + 386 + if (hoveredNode) { 387 + // Display node label as header 388 + textSize(18); 389 + textStyle(BOLD); 390 + text(hoveredNode.label, panelX, panelY); 391 + 392 + // Display full description 393 + textSize(defaultTextSize); 394 + textStyle(NORMAL); 395 + 396 + // Note: p5.js doesn't render HTML, so strip tags for display 397 + let displayText = hoveredNode.fullDescription.replace(/<[^>]*>/g, + ''); 398 + 399 + // Wrap text to fit panel width 400 + let words = displayText.split(' '); 401 + let line = ''; 402 + let y = panelY + 25; 403 + 404 + for (let word of words) { 405 + let testLine = line + word + ' '; 406 + if (textWidth(testLine) > panelWidth && line.length > 0) { 407 + text(line, panelX, y); 408 + line = word + ' '; 409 + y += 20; 410 + } else { 411 + line = testLine; 412 + } 413 + } 414 + text(line, panelX, y); 415 + } else { 416 + // Default message when nothing is hovered 417 + textStyle(ITALIC); 418 + fill(100); 419 + text('Hover over a concept to see details...', panelX, panelY); 420 + } 421 + 422 + pop(); 423 + } 424 + 425 +
426 + ### Responsive Design (REQUIRED) 427 +
428 + javascript 429 + function windowResized() { 430 + updateCanvasSize(); 431 + resizeCanvas(canvasWidth, canvasHeight); 432 + } 433 + 434 + function updateCanvasSize() { 435 + const container = document.querySelector('main'); 436 + if (container) { 437 + canvasWidth = container.offsetWidth; 438 + } 439 + } 440 + 441 +
442 + ## File Templates 443 +
444 + ### main.html Template 445 +
446 + html 447 + <!DOCTYPE html> 448 + <html lang="en"> 449 + <head> 450 + <meta charset="UTF-8"> 451 + <title>Infographic Title</title> 452 + <script + src="https://cdn.jsdelivr.net/npm/p5@1.11.10/lib/p5.js"></script> 453 + <style> 454 + body { 455 + margin: 0px; 456 + padding: 0px; 457 + font-family: Arial, Helvetica, sans-serif; 458 + } 459 + </style> 460 + <script src="infographic-name.js"></script> 461 + </head> 462 + <body> 463 + <main></main> 464 + <br/> 465 + <a href=".">Back to Documentation</a> 466 + </body> 467 + </html> 468 + 469 +
470 + ### index.md Template 471 +
472 + markdown 473 --- 474 + title: Infographic Title 475 + description: Brief description of the infographic content 476 + --- 477 478 - **Any unneeded directories can be deleted.** Not every skill requires - all three types of resources. 478 + # Infographic Title 479 + 480 + <iframe src="main.html" height="722px" scrolling="no"></iframe> 481 + 482 + `[View Fullscreen](./main.html){ .md-button .md-button--primary } 483 + 484 + ## Description 485 + 486 + [Description of what this infographic visualizes] 487 + 488 + ## How to Use 489 + 490 + 1. **Hover** over any concept to see a brief description 491 + 2. **Read** the detailed information in the panel below the diagram 492 + 3. **Explore** the relationships shown by the connecting lines 493 + 494 + ## Legend 495 + 496 + [Explanation of colors, shapes, and edge types] 497 + 498 +
499 + ## Data Format Specification 500 +
501 + ### Node Properties 502 +
503 + Each node in the nodes array supports these properties: 504 +
505 + - **id** (required): Unique integer identifier 506 + - **label** (required): Display text (max 30 characters recommended) 507 + - **x** (required): Horizontal position in pixels 508 + - **y** (required): Vertical position in pixels 509 + - **shortDescription** (required): One-sentence tooltip text (no HTML) 510 + - **fullDescription** (required): Detailed paragraph (can include HTML + links) 511 + - **group** (optional): Group identifier for styling 512 + - **shape** (optional): 'ellipse', 'box', 'diamond', 'circle', 'square' 513 + - **color** (optional): Fill color (hex or named color) 514 + - **borderColor** (optional): Border color 515 + - **borderWidth** (optional): Border thickness in pixels 516 + - **size** (optional): Node radius/size in pixels 517 + - **icon** (optional): Icon identifier (future use) 518 +
519 + ### Edge Properties 520 +
521 + Each edge in the edges array supports these properties: 522 +
523 + - **from** (required): Source node ID 524 + - **to** (required): Target node ID 525 + - **label** (optional): Text label for the edge 526 + - **color** (optional): Edge color (default: '#999999') 527 + - **width** (optional): Line thickness (default: 1) 528 + - **dashes** (optional): Boolean for dashed line (default: false) 529 + - **smooth** (optional): Object with type and roundness for curved edges 530 +
531 + ### Group Properties 532 +
533 + Groups define default styling for node categories: 534 +
535 + - **color**: Default fill color for nodes in this group 536 + - **borderColor**: Default border color 537 + - **shape**: Default shape type 538 +
539 + ## Quality Standards 540 +
541 + Every infographic must meet these criteria: 542 +
543 + - ✅ Loads and parses data.json without errors 544 + - ✅ All nodes are visible and properly positioned 545 + - ✅ Tooltips remain within drawing bounds 546 + - ✅ Detail panel displays full descriptions correctly 547 + - ✅ Responsive design adapts to container width 548 + - ✅ Clear visual hierarchy and readable labels 549 + - ✅ Edges don't obscure important information 550 +
551 + ## Deployment 552 +
553 + After generating the infographic files: 554 +
555 + 1. Place the folder in /docs/sims/$INFOGRAPHIC_NAME/ 556 + 2. Update mkdocs.yml navigation to include the new infographic 557 + 3. Test locally with mkdocs serve 558 + 4. Deploy with mkdocs gh-deploy 559 +
560 + ## Common Use Cases 561 +
562 + ### Concept Maps 563 + Show relationships between educational concepts with hierarchical or + network structures. 564 +
565 + ### Timeline Visualizations 566 + Display historical events or process steps as connected nodes. 567 +
568 + ### System Diagrams 569 + Visualize components and their relationships in complex systems. 570 +
571 + ### Knowledge Graphs 572 + Create explorable networks of related topics or ideas. 573 +
574 + ## References 575 +
576 + This skill uses vis-network compatible data formats. For detailed + parameter documentation, see references/vis-network-parameters.md. 577 +
578 + Template files are available in assets/ for quick start: 579 + - assets/template-main.html 580 + - assets/template-infographic.js 581 + - assets/template-data.json

⏺ Bash(rm skills/infograph-generator-p5/infograph-generator-p5/assets/example_asset.txt && rm skills/infograph-generator-p5/infograph-generator-p5/scripts/example.py) ⎿  (No content)

⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/assets/template-main.html) ⎿  Wrote 23 lines to
skills/infograph-generator-p5/infograph-generator-p5/assets/template-main.html Interactive Infographic using P5.js 1.11.10 body { margin: 0px; padding: 0px; … +13 lines (ctrl+o to expand)

⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/assets/template-infographic.js) ⎿  Wrote 331 lines to
skills/infograph-generator-p5/infograph-generator-p5/assets/template-infographic.js // Interactive Infographic Template // This template demonstrates the core structure for creating // data-driven infographics with hover interactions // Canvas dimensions - REQUIRED structure let canvasWidth = 800; // Initial width (responsive) let drawHeight = 600; // Drawing area height let controlHeight = 120; // Detail display area height let canvasHeight = drawHeight + controlHeight; let margin = 20; // Margin for visual elements … +321 lines (ctrl+o to expand)

⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/assets/template-data.json) ⎿  Wrote 136 lines to
skills/infograph-generator-p5/infograph-generator-p5/assets/template-data.json { "metadata": { "title": "Sample Concept Map", "description": "An interactive infographic demonstrating the infograph-generator-p5 template", "author": "Template Author", "created": "2025-01-09", "subject": "Educational Technology", "version": "1.0" }, "groups": { … +126 lines (ctrl+o to expand)

⏺ Write(skills/infograph-generator-p5/infograph-generator-p5/references/vis-network-parameter s.md) ⎿  Wrote 451 lines to skills/infograph-generator-p5/infograph-generator-p5/references/ is-network-parameters.md # Vis-Network Data Format Reference This document provides comprehensive reference documentation for the vis-network compatible data format used by the infograph-generator-p5 skill. ## Overview The infograph-generator-p5 skill reads data from a data.json file that follows the vis-network library format. This format is widely used for network visualizations and ensures compatibility with other visualization tools. ## JSON Structure … +441 lines (ctrl+o to expand)

⏺ Bash(rm skills/infograph-generator-p5/infograph-generator-p5/references/api_reference.md) ⎿  (No content)

⏺ Bash(find skills/infograph-generator-p5/infograph-generator-p5 -type f | sort) ⎿  skills/infograph-generator-p5/infograph-generator-p5/assets/template-data.json
skills/infograph-generator-p5/infograph-generator-p5/assets/template-infographic.js skills/infograph-generator-p5/infograph-generator-p5/assets/template-main.html … +3 lines (ctrl+o to expand)

⏺ Bash(python ~/.claude/skills/skill-creator/scripts/package_skill.py skills/infograph-generator-p5/infograph-generator-p5) ⎿  📦 Packaging skill: skills/infograph-generator-p5/infograph-generator-p5

 🔍 Validating skill...
 … +10 lines (ctrl+o to expand)

⏺ Perfect! I've successfully created the infograph-generator-p5 skill. Here's what was completed:

Skill Summary

The infograph-generator-p5 skill generates interactive infographic visualizations using p5.js that read vis-network compatible JSON data.

Key Features

1. Data-Driven Visualizations: Reads node and edge data from JSON files in vis-network format
2. Hover Interactions: - Tooltips appear near hovered nodes with short descriptions - Detail panel below shows full descriptions with context
3. Smart Tooltip Positioning: Tooltips always stay within the drawing bounds, even near edges
4. Responsive Design: Width-responsive canvas that adapts to container size
5. Multiple Node Shapes: Supports ellipse, box, diamond, circle, square, and triangle shapes
6. Flexible Edge Styling: Straight, curved, dashed, labeled connections

What Was Created

SKILL.md - Complete skill documentation including:

• Technical architecture with canvas structure (drawing + detail regions)
• Data parsing and rendering code patterns
• Tooltip and detail panel implementation
• Responsive design patterns
• Data format specifications

assets/ - Template files:

• template-main.html - HTML wrapper with p5.js CDN
• template-infographic.js - Complete working JavaScript template
• template-data.json - Sample 6-node concept map with groups and edges

references/ - Documentation:

• vis-network-parameters.md - Comprehensive reference for:
  • Node properties (required and optional)
  • Edge properties with smooth curves
  • Group definitions
  • Color guidelines and palettes
  • Layout patterns (hierarchical, radial, grid)
  • Complete examples and validation checklist

Package Location

The skill has been packaged and validated:

• Location: $HOME/Documents/ws/claude-skills/infograph-generator-p5.zip
• Validation: ✅ Passed all quality checks

How to Use

To install this skill globally:

Extract to Claude skills directory

unzip infograph-generator-p5.zip -d ~/.claude/skills/

Or for a specific project:

Extract to project .claude directory

unzip inf

…(truncated)