Provides expert knowledge on G2 legend rendering, architecture, and interaction.
Install
mkdir -p .claude/skills/g2-legend-expert && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/7704" && unzip -o skill.zip -d .claude/skills/g2-legend-expert && rm skill.zipInstalls to .claude/skills/g2-legend-expert
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Expert skill for G2 legend development - provides comprehensive knowledge about legend rendering implementation, component architecture, layout algorithms, and interaction handling. Use when implementing, customizing, or debugging legend functionality in G2 visualizations.Key capabilities
- →Infer legend components from chart scales
- →Support categorical and continuous legend types
- →Calculate layout and sizing for legend components
- →Handle legend filtering and interaction states
- →Integrate with G2 theming system
How it works
The skill follows a multi-stage flow: inferring components from scales, creating specific legend types, calculating layout dimensions, and rendering the final display object.
Inputs & outputs
When to use g2-legend-expert
- →Customizing G2 chart legends
- →Debugging legend rendering flow
- →Implementing interaction handling in charts
About g2-legend-expert
Assists with the G2 legend rendering pipeline, including component inference, layout algorithms, and handling interactions for categorical or continuous scales.
Expert skill for G2 legend development - provides comprehensive knowledge about legend rendering implementation, component architecture, layout algorithms, and interaction handling. Use when implementing, customizing, or debugging legend functionality in G2 visualizations.
When not to use it
- →When using non-G2 visualization libraries
- →When manual padding overrides are not properly configured with size properties
Prerequisites
Limitations
- →Manual padding settings require explicit size property configuration to avoid default size fallbacks
- →Performance may degrade with excessive legend data processing in large datasets
How it compares
Unlike manual legend implementation, this skill automates component inference and layout calculation based on the chart's internal scale properties.
Compared to similar skills
g2-legend-expert side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| g2-legend-expert (this skill) | 1 | 9mo | No flags | Intermediate |
| streamlit | 86 | 11mo | No flags | Intermediate |
| d3-visualization | 7 | 5mo | No flags | Advanced |
| threejs | 35 | 8mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by antvis
View all by antvis →You might also like
streamlit
sverzijl
When working with Streamlit web apps, data dashboards, ML/AI app UIs, interactive Python visualizations, or building data science applications with Python
d3-visualization
lyndonkl
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.
threejs
mrgoonie
Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.
streaming-mindmap-rendering
SSShooter
Implement real-time streaming mindmap rendering using Mind Elixir in web applications. Supports streaming text parsing and incremental updates.
d3js-visualization
benchflow-ai
Build deterministic, verifiable data visualizations with D3.js (v6). Generate standalone HTML/SVG (and optional PNG) from local data files without external network dependencies. Use when tasks require charts, plots, axes/scales, legends, tooltips, or data-driven SVG output.
dashboard-build
mckinsey
A skill that should be invoked whenever a user wants to build a Dashboard or simple app. This skill is Phase 2 of an e2e process that covers the actual build and testing. For Phase 1 (requirements, layout design, visualization selection), use the dashboard-design skill.