Venn Diagram Skill

Prompt

Use the skill-generator skill to create a new skill called venn-diagram-generator. This skill will use the venn.js javascript library to create a new diagram. The github repo for venn.js is here: https://github.com/benfred/venn.js/. The output of this skill will be the creation of a new directory in the /docs/sims directory. Each drawing must have a title as well as a directory name in lowercase with dashes. Use the existing microseism as templates. Make sure you create an index.md file, a main.html, a script.js and if needed, a style.css file. The drawing should be referenced by placing an HTML element at the top of the index.md file. If the user does not provide a title, ask them for a title. Place the new skill in /skills/venn-diagram-generator. </p> </div> <h2 id="results">Results</h2> <p>Claude Code v2.0.35 Sonnet 4.5 · Claude Pro</p> <p>⏺ I'll help you create the venn-diagram-generator skill using the skill-creator skill. Let me invoke it now.</p> <blockquote> <p>The "skill-creator" skill is running </p> </blockquote> <p>⏺ I'll create the venn-diagram-generator skill following the skill creation process. Let me start by setting up a todo list to track the work.</p> <p>⏺ Now let me understand the requirements better by examining an existing microsim to use as a template.</p> <p>⏺ Search(pattern: "<strong>/microsim-p5/assets/template/</strong>") ⎿ Found 0 files </p> <p>⏺ Bash(find $HOME/Documents/ws/claude-skills/docs/sims -type d -maxdepth 1) ⎿ find: $HOME/Documents/ws/claude-skills/docs/sims: No such file or directory</p> <p>⏺ Read(skills/microsim-p5/SKILL.md) ⎿ Read 667 lines</p> <p>⏺ Read(skills/mermaid-generator/assets/template/index.md) ⎿ Read 42 lines</p> <p>⏺ Read(skills/mermaid-generator/SKILL.md) ⎿ Read 517 lines</p> <p>⏺ Now let me also check the mermaid-generator's template files to understand the structure better:</p> <p>⏺ Bash(find $HOME/Documents/ws/claude-skills/skills/mermaid-generator -type f -name "<em>.html" -o -name "</em>.css" -o -name "<em>.js" -o -name "</em>.json" | head -10) ⎿ $HOME/Documents/ws/claude-skills/skills/mermaid-generator/assets/template/metadata.json $HOME/Documents/ws/claude-skills/skills/mermaid-generator/assets/template/script.js $HOME/Documents/ws/claude-skills/skills/mermaid-generator/assets/template/main.html $HOME/Documents/ws/claude-skills/skills/mermaid-generator/assets/template/style.css</p> <p>⏺ Read(skills/mermaid-generator/assets/template/main.html) ⎿ Read 47 lines</p> <p>⏺ Read(skills/mermaid-generator/assets/template/metadata.json) ⎿ Read 23 lines</p> <p>⏺ Now let me check where the init_skill.py script is located:</p> <p>⏺ Search(pattern: "**/init_skill.py") ⎿ Found 0 files </p> <p>⏺ Bash(ls -la $HOME/Documents/ws/claude-skills/scripts/) ⎿ total 56 <br /> drwxr-xr-x 7 dan staff 224 Nov 3 10:14 . drwxr-xr-x@ 21 dan staff 672 Nov 6 21:27 .. … +5 lines (ctrl+o to expand)</p> <p>⏺ The init_skill.py script isn't available in this repository, so I'll manually create the skill directory structure. Let me create the venn-diagram-generator skill directory:</p> <p>⏺ Bash(mkdir -p $HOME/Documents/ws/claude-skills/skills/venn-diagram-generator/assets/template && mkdir -p $HOME/Documents/ws/claude-skills/skills/venn-diagr…) ⎿ (No content)</p> <p>⏺ Now let me research the venn.js library from its GitHub repository:</p> <p>⏺ Fetch(<code>https://github.com/benfred/venn.js/</code>) ⎿ Received 339.6KB (200 OK)</p> <p>⏺ Web Search("venn.js CDN jsdelivr unpkg 2024 2025") ⎿ Did 1 search in 17s </p> <p>⏺ Fetch(<code>https://cdnjs.com/libraries/venn.js/0.2.14</code>) ⎿ Received 91.1KB (200 OK)</p> <p>⏺ Now let me create the template files for the venn-diagram-generator skill. First, let me create the main.html template:</p> <p>⏺ Write(skills/venn-diagram-generator/assets/template/main.html) ⎿ Wrote 40 lines to skills/venn-diagram-generator/assets/template/main.html <br /> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{{TITLE}}</title> <link rel="stylesheet" href="style.css">  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js"></script>  … +30 lines (ctrl+o to expand)</p> <p>⏺ Write(skills/venn-diagram-generator/assets/template/style.css) ⎿ Wrote 191 lines to skills/venn-diagram-generator/assets/template/style.css /<em> Venn Diagram MicroSim Stylesheet </em>/ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; … +181 lines (ctrl+o to expand)</p> <p>⏺ Write(skills/venn-diagram-generator/assets/template/script.js) ⎿ Wrote 101 lines to skills/venn-diagram-generator/assets/template/script.js // Venn Diagram Configuration and Rendering // This script is populated with data specific to each diagram // Venn diagram data - Replace {{VENN_DATA}} with actual sets data var sets = {{VENN_DATA}}; // Color configuration - Replace {{COLOR_SCHEME}} with actual colors var colorScheme = {{COLOR_SCHEME}}; // Initialize the Venn diagram … +91 lines (ctrl+o to expand)</p> <p>⏺ Write(skills/venn-diagram-generator/assets/template/index.md) ⎿ Wrote 49 lines to skills/venn-diagram-generator/assets/template/index.md --- title: {{TITLE}} description: {{META_DESCRIPTION}} --- # {{TITLE}} ## Overview {{OVERVIEW}} … +39 lines (ctrl+o to expand)</p> <p>⏺ Write(skills/venn-diagram-generator/assets/template/metadata.json) ⎿ Wrote 24 lines to skills/venn-diagram-generator/assets/template/metadata.json { "title": "{{TITLE}}", "description": "{{DESCRIPTION}}", "subject": "{{SUBJECT}}", "creator": "Claude AI with Venn Diagram Generator Skill", "date": "{{DATE}}", "type": "Interactive Venn Diagram", "format": "text/html", "language": "en-US", "coverage": "{{COVERAGE}}", … +14 lines (ctrl+o to expand)</p> <p>⏺ Write(skills/venn-diagram-generator/references/venn-js-reference.md) ⎿ Wrote 398 lines to skills/venn-diagram-generator/references/venn-js-reference.md <br /> # venn.js Reference Guide ## Overview venn.js is a JavaScript library for laying out area-proportional Venn and Euler diagrams. It uses D3.js for rendering SVG visualizations. ## Dependencies - <strong>D3.js v7+</strong> - Required for DOM manipulation and SVG rendering - CDN: <code>https://cdnjs.cloudflare.com/ajax/libs/d3/7.9.0/d3.min.js</code> … +388 lines (ctrl+o to expand)</p> <p>⏺ Now let me create the main SKILL.md file:</p> <p>⏺ Write(skills/venn-diagram-generator/SKILL.md) ⎿ Wrote 612 lines to skills/venn-diagram-generator/SKILL.md <br /> --- name: venn-diagram-generator description: This skill generates interactive Venn diagram visualizations using the venn.js JavaScript library. Use this skill when users request creating Venn diagrams, set visualizations, overlap diagrams, or comparison charts for educational textbooks. The skill creates complete MicroSim packages with standalone HTML files featuring colorful circles, clear labels, and interactive tooltips, saved to /docs/sims/ following the MicroSim pattern. --- # Venn Diagram Generator ## Overview Generate interactive Venn diagram visualizations using venn.js and D3.js for intelligent textbooks. Creates complete MicroSim packages with standalone HTML files, MkDocs integration, and Dublin Core metadata. Each diagram features customizable colors, interactive tooltips, and follows the educational MicroSim pattern for seamless integration into educational content. … +602 lines (ctrl+o to expand)</p> <p>⏺ Let me check if there's a packaging script available:</p> <p>⏺ Search(pattern: "**/package_skill.py") ⎿ Found 0 files </p> <p>⏺ Since there's no packaging script, let me create the zip file manually:</p> <p>⏺ Bash(cd $HOME/Documents/ws/claude-skills/skills && zip -r venn-diagram-generator.zip venn-diagram-generator/) ⎿ adding: venn-diagram-generator/ (stored 0%) <br /> adding: venn-diagram-generator/references/ (stored 0%) adding: venn-diagram-generator/references/venn-js-reference.md (deflated 64%) … +8 lines (ctrl+o to expand)</p> <p>⏺ Bash(mv $HOME/Documents/ws/claude-skills/skills/venn-diagram-generator.zip $HOME/Documents/ws/claude-skills/) ⎿ (No content)</p> <p>⏺ Perfect! I've successfully created the venn-diagram-generator skill. Here's what was created:</p> <p>Skill Created: venn-diagram-generator</p> <p>Location: $HOME/Documents/ws/claude-skills/skills/venn-diagram-generator/</p> <p>Package: venn-diagram-generator.zip (in project root)</p> <p>Files Generated</p> <p>Core Skill File</p> <ul> <li>SKILL.md - Complete skill definition with:<ul> <li>Comprehensive workflow (7 steps)</li> <li>When to use this skill</li> <li>Best practices for educational Venn diagrams</li> <li>Common patterns (2, 3, and 4-circle diagrams)</li> <li>Troubleshooting guide</li> <li>3 detailed examples</li> </ul> </li> </ul> <p>Template Assets (assets/template/)</p> <ul> <li>main.html - Standalone HTML with venn.js (0.2.20) and D3.js (7.9.0) from CDN</li> <li>style.css - Responsive stylesheet with tooltips, 16px fonts, print-friendly styles</li> <li>script.js - Interactive venn.js initialization with hover effects and tooltips</li> <li>index.md - MkDocs integration template with iframe embed</li> <li>metadata.json - Dublin Core metadata template</li> </ul> <p>Reference Documentation (references/)</p> <ul> <li>venn-js-reference.md - Comprehensive guide covering:<ul> <li>venn.js data format and API</li> <li>2, 3, and 4+ circle diagram examples</li> <li>Color schemes for education</li> <li>Styling and interactivity patterns</li> <li>Troubleshooting common issues</li> <li>Best practices</li> </ul> </li> </ul> <p>Key Features</p> <p>The skill will: 1. Ask for a title if not provided by the user 2. Generate interactive Venn diagrams with 2-4 circles 3. Create complete MicroSim packages in /docs/sims/[diagram-name]/ 4. Include customizable color schemes 5. Provide interactive tooltips on hover 6. Ensure responsive design for mobile and desktop 7. Use educational-friendly 16px fonts for readability 8. Follow the MicroSim pattern from your existing skills</p> <p>Technology Stack: - venn.js 0.2.20 - Venn diagram layout engine - D3.js 7.9.0 - SVG rendering and interactivity - CDN-hosted libraries (no installation needed)</p> <p>Installation</p> <p>To use this skill globally:</p> <p># Create symlink to make skill available system-wide ln -s $HOME/Documents/ws/claude-skills/skills/venn-diagram-generator ~/.claude/skills/venn-diagram-generator</p> <p>Or for project-specific use, the skill is ready to use from the current location.</p> <p>Example Usage</p> <p>When users request: - "Create a Venn diagram comparing Python, JavaScript, and Java" - "Make a 2-circle Venn diagram showing cats and dogs" - "Generate a diagram showing the overlap between AI, ML, and Data Science"</p> <p>The skill will generate a complete MicroSim with all necessary files following your established patterns.</p> <p>Next Steps</p> <ol> <li>Test the skill by invoking it with a sample request</li> <li>Review the generated SKILL.md for any adjustments</li> <li>Consider adding the skill to your documentation</li> <li>Update .gitignore if the zip file shouldn't be committed</li> </ol> <p>The skill follows the same structure and conventions as your mermaid-generator and microsim-p5 skills, ensuring consistency across your skill collection.</p> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type="button" class="md-top md-icon" data-md-component="top" hidden> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class="md-footer"> <nav class="md-footer__inner md-grid" aria-label="Footer" > <a href="../run-glossary-generator-skill/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Run glossary generator skill"> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class="md-footer__title"> <span class="md-footer__direction"> Previous </span> <div class="md-ellipsis"> Run glossary generator skill </div> </div> </a> <a href="../chapter-content-generator/" class="md-footer__link md-footer__link--next" aria-label="Next: Chapter Generator"> <div class="md-footer__title"> <span class="md-footer__direction"> Next </span> <div class="md-ellipsis"> Chapter Generator </div> </div> <div class="md-footer__button md-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class="md-copyright"> <div class="md-copyright__highlight"> Copyright © 2025 Dan McCreary. Licensed under <a href="license/">CC BY-NC-SA 4.0</a> for non-commercial use. </div> </div> </div> </div> </footer> </div> <div class="md-dialog" data-md-component="dialog"> <div class="md-dialog__inner md-typeset"></div> </div> <script id="__config" type="application/json">{"base": "../..", "features": ["content.code.copy", "navigation.expand", "navigation.path", "navigation.prune", "navigation.indexes", "toc.follow", "navigation.top", "navigation.footer", "content.action.edit"], "search": "../../assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script> <script src="../../assets/javascripts/bundle.83f73b43.min.js"></script> </body> </html>