jiannanya

D3.js data visualization skill. Use when creating charts, graphs, maps, or any data-driven SVG/Canvas visualizations with D3.js. Covers bar charts, line charts, pie charts, scatter plots, area charts, histograms, force-directed graphs, tree layouts, treemaps, choropleth maps, transitions, zoom, brush, and all 30 D3 modules. Also covers heatmaps, radial/polar charts, Sankey diagrams, box plots, violin plots, waterfall charts, Gantt timelines, parallel coordinates, radar/spider charts, bump/ranking charts, sunburst partitions, Voronoi diagrams, density contours, candlestick OHLC charts, lollipop/dot plots, correlation matrices, and ridgeline/joy plots. Triggers: d3, d3.js, data visualization, chart, graph, svg visualization, interactive chart, force graph, geo map, treemap, sunburst, chord diagram, sankey, heatmap, gantt, candlestick, radar, voronoi, ridgeline, waterfall, parallel coordinates, d3-selection, d3-scale, d3-shape, d3-force, d3-hierarchy, d3-geo.

Generate precise, professional Excalidraw diagrams for any domain: system architecture, data pipelines, product flows, concept maps, wireframes, timelines, UML sequence diagrams, ER diagrams, kanban boards, sales funnels, and more. Supports multiple visual styles (sketch, blueprint, clean, dark). Delivers a live edit URL by default (via local sites/ viewer); PNG, animated SVG, and saved source on request. Uses the `audit` delivery mode by default (opens `sites/audit.html`).

Create, configure, and customize Apache ECharts charts and visualizations. Use when: building charts with ECharts; selecting chart types (bar, line, pie, scatter, map, heatmap, radar, candlestick, funnel, gauge, tree, treemap, sankey, graph, boxplot, pictorialBar, themeRiver, sunburst, parallel, calendar, custom, matrix, chord, 3D/GL charts); configuring series, axes, legends, tooltips, dataZoom, visualMap, toolbox; using echarts.init, setOption, on/off events; implementing responsive charts; theme customization; large-data rendering optimization. Covers all chart types from the official examples gallery including v6 Matrix/Chord and echarts-gl 3D charts.

HTML slide page-transition animation system. Implements multiple slide-switching effects (slide-left, slide-right, slide-up, slide-down, zoom, flip, fade, blur, elastic-scale) for single-page HTML presentations, while coordinating per-element entrance animations so that the slide transition and element animations play simultaneously — never sequentially — eliminating the double-animation problem. Use for: HTML PPT/Slides authoring, single-page presentation animation systems, smooth slide transitions that do not break element entrance animations. Keywords: slides switch transition animation ppt stagger entrance overlap.

snow-three is a Three.js 3D graphics skill. Use when: creating 3D scenes, WebGL/WebGPU rendering, 3D animations, particle systems, shaders, post-processing effects, physics simulations, model loading (GLTF/OBJ/FBX), camera controls, raycasting, instanced rendering, environment maps, shadows, textures, TSL shaders. Covers all Three.js core APIs and addon features.

用六步 SOP 将模糊需求转成可执行、可验证、可交付的 Claude Code 工作流。适用于新功能规划、需求澄清、原型落地、局部重构和 AI 协作提效。