dmccreary/claude-skills
Overview
This skill generates interactive Leaflet maps packaged as MicroSims ready for iframe embedding in narrow MkDocs pages. It produces a complete directory with HTML, CSS, JavaScript, JSON data, and documentation optimized for minimal margins, responsive behavior, and a navbar/TOC-friendly layout. Use it to create geographic visualizations, location-based displays, or educational map modules.
How this skill works
The skill collects map requirements (purpose, region, markers, layers, zoom, interactive features) and builds a docs/sims/[map-name] package. It creates map-data.json for markers/GeoJSON, main.html with Leaflet assets, style.css tuned for iframe embedding, script.js with map initialization and layers, index.md with iframe embed and docs, and metadata.json for discovery. The output is tested for responsiveness, marker popups, and browser compatibility.
When to use it
- Create interactive maps for textbooks, tutorials, or classroom pages
- Display location-based data like landmarks, campuses, or historical sites
- Embed a compact, responsive map inside narrow MkDocs Material pages
- Visualize routes, choropleths, or highlighted regions with GeoJSON
- Provide an interactive map with layer controls and custom markers
Best practices
- Collect center coords, zoom level, and structured marker data upfront
- Limit visible markers to under 100 or use marker clustering for large sets
- Keep body margins and padding at zero and set a fixed #map height for iframes
- Use OpenStreetMap as default tile layer and document any custom tile URLs and attribution
- Add descriptive popup text, keyboard access notes, and high-contrast styles for accessibility
Example use cases
- A MicroSim showing major universities in a state with custom icons and popups
- An interactive campus map with building markers and layer toggles for transit vs. satellite
- A historical map highlighting ancient city boundaries using GeoJSON polygons
- A travel guide page with route visualization and step-by-step popups
- A classroom activity that asks students to identify geographic patterns and submit answers
FAQ
A map package includes main.html, style.css, script.js, map-data.json (optional), index.md, and metadata.json placed under docs/sims/[map-name]/.
How do I change the initial zoom or center?
Edit center and zoom in map-data.json or replace {{CENTER_LAT}}, {{CENTER_LNG}}, and {{ZOOM}} placeholders in script.js before packaging.
How many markers are safe for performance?
Keep live markers under ~100; use Leaflet.markercluster for larger datasets to preserve performance.
17 skills
This skill generates interactive Leaflet maps as MicroSims, enabling educators to visualize geography with ready-to-embed MkDocs content.
This skill analyzes or creates complete course descriptions aligned with Bloom's taxonomy to support high-quality learning-graph generation.
This skill analyzes a diagram or spec and ranks MicroSim generator options with scores and reasoning to guide tool selection.
This skill helps you create interactive plots of mathematical functions using Plotly.js for embeddable textbook-friendly visuals with hover tooltips and
This skill captures high-quality MicroSim screenshots using Chrome headless, ensuring dynamic visualizations render before saving images.
This skill helps you create interactive p5.js Educational MicroSims with responsive layout, iframe embedding, and metadata for seamless classroom deployment.
Installs and configures project infrastructure including MkDocs Material intelligent textbook templates, learning graph viewers, and skill tracking systems. Routes to the appropriate installation guide based on what the user needs to set up.
This skill helps you generate interactive comparison tables as MicroSims with ratings, badges, logos, and documentation to streamline educational decisions.
This skill generates self-contained p5.js celebration animations for MicroSims, enabling quick creation, testing, and integration of reward visuals.
This skill installs a global Claude Code tracking system to log skill usage, duration, token costs, and prompts for insight.
This skill automatically creates a complete MkDocs Material project template with branding, social cards, and GitHub Pages deployment.
This skill generates or updates a comprehensive README.md following GitHub best practices, including badges, overview, setup, metrics, and documentation.
This skill helps students learn classification across subjects by presenting scenario based questions with multiple choices and instant explanations.
This skill generates and updates a MkDocs Material index for MicroSims, captures missing screenshots, and keeps navigation in sync.
This skill helps educators generate educational MicroSims using vis-network, enabling accessible, embeddable browser simulations for textbook demonstrations.
This skill generates interactive bubble charts with Chart.js to visualize 2x2 priority matrices and multi-dimensional data, delivering a complete MicroSim
This skill generates professional LinkedIn announcements for intelligent textbooks by synthesizing metrics, milestones, and links into engaging, shareable
