preview-skills

Render and preview CSV files in browser with interactive sorting, filtering, and column statistics

Create interactive 2D data visualizations using D3.js with zoom, pan, and custom rendering

Git diff preview tool with GitHub-style formatting and interactive features

Render and preview JSON files in browser with syntax highlighting, collapsible tree view, and search

Create interactive maps with markers, routes, and geographic data using Leaflet

Render and preview Markdown files in browser with GitHub-flavored formatting and syntax highlighting

Render and preview Mermaid diagrams in browser with support for flowcharts, sequence diagrams, class diagrams, and more

Render implementation plans as navigable HTML with sidebar TOC and progress tracking. Activate automatically when producing or previewing implementation plans, design docs, architecture proposals, migration plans, or any long-form structured plan.

Render and preview SVG animations in the browser with play/pause, timeline scrubbing, zoom & pan, code view, and export. Use when explaining a concept visually with an animated SVG (SMIL, CSS keyframes, or inline-JS), prototyping path-draw / morph / motion-path effects, or iterating on an animated icon, logo, or diagram. Triggers on "animated SVG", "explain visually", "SMIL", "path morph", "animateMotion", "animate this concept".

Create interactive 3D visualizations using Three.js with orbit controls, lighting, and animation