skill CX Codex

syncfusion-react-sankey — Claude Code skill: Sankey charts

Q: How do I install syncfusion-react-sankey in Claude?

Run `npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code`. The skill lands at `~/.claude/skills/syncfusion-react-sankey/SKILL.md`.

Q: What does the component need to work?

React and the `@syncfusion/ej2-react-charts` package. Services like `SankeyTooltip`, `SankeyLegend` and `SankeyExport` are registered through `Inject` — without them those features stay off.

A skill that walks your coding agent through building Sankey diagrams in React with the Syncfusion chart component: nodes, links, legend, tooltips and export.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code

Open on GitHub

What syncfusion-react-sankey does

The skill covers SankeyComponent from @syncfusion/ej2-react-charts. Your agent gets instructions for wiring nodes and links with SankeyNodeDirective and SankeyLinkDirective, plus labels, legend, tooltips, click events and styling. Separate sections handle RTL layout, accessibility and diagram export.

Inside sits a set of reference files: references/getting-started.md for install and module setup, references/nodes-and-links.md for the data shape, then references/labels-and-positioning.md, references/legend-and-display.md, references/interactivity.md, references/appearance-and-styling.md, references/accessibility-and-orientation.md and references/export-and-print.md. API listings for props, events and methods round it out. The agent pulls the one file it needs instead of the whole bundle.

You need React and the @syncfusion/ej2-react-charts package in the project, and services such as SankeyTooltip and SankeyLegend only activate through Inject. Skip that and the chart renders without tooltips or a legend — worth checking first when something looks missing.

What it helps with

map energy flows from sources to consumers
break a process into nodes and links
build an interactive node-link chart with tooltips
add a legend and labels to a Sankey diagram
export a flow diagram as an image

Example prompts for the agent

Build a React Sankey chart of energy flows with Syncfusion
Add tooltips and a bottom legend to this Sankey diagram
Set up PNG export for the Sankey chart

How to install syncfusion-react-sankey

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-sankey/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-sankey/

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a codex

2Manually: put the files in place

.agents/skills/syncfusion-react-sankey/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a cursor

2Manually: put the files in place

.cursor/skills/syncfusion-react-sankey/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install syncfusion/react-ui-components-skills syncfusion-react-sankey

2Manually: put the files in place

.github/skills/syncfusion-react-sankey/SKILL.md

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a gemini-cli

2Platform CLI

gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-sankey

Manually: put the files in place

.devin/skills/syncfusion-react-sankey/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-sankey

How do I install syncfusion-react-sankey in Claude?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-sankey -a claude-code. The skill lands at ~/.claude/skills/syncfusion-react-sankey/SKILL.md.

What does syncfusion-react-sankey do?

It gives your agent instructions for the Syncfusion Sankey component in React: nodes, links, labels, legend, tooltips, events, styling, RTL, accessibility and export.

What does the component need to work?

React and the @syncfusion/ej2-react-charts package. Services like SankeyTooltip, SankeyLegend and SankeyExport are registered through Inject — without them those features stay off.

Similar skills

Everything for Frontend and UI →

react-and-nextjs-data-visualization official OpenAI Patterns for embedding charts and diagrams into React and Next.js: SSR boundaries, hydration safety, URL-backed state, and isolated rendering layers. CX Codex GP ChatGPT 13installs data-visualization Owl-Listener Guides your agent through picking a chart type and setting axes, labels and accessible colors so the result reads without a legend. CX Codex +1 2,400installs d3-data-visualization official OpenAI This skill builds custom D3 visualizations with SVG or DOM, annotations, bespoke scales, and interaction. Use it when standard chart grammars no longer fit. CX Codex GP ChatGPT 13installs swift-charts dpearson2699 A skill that steers your coding agent through Swift Charts work on iOS 26+. Useful for bars, lines, donuts, heat maps and 3D surfaces. CX Codex +1 4,000installs blog-chart AgriciDaniel Builds inline SVG charts for blog posts in HTML or MDX. The orchestrator calls it automatically when resolving data markers during blog-write runs. CX Codex +1 2,500installs Scientific Data Visualizer devisasari A prompt that turns a chat into a visualization assistant for research data: charts, maps, dashboards. Useful when you have measurements and need a readable plot. GP ChatGPT ★ 174,597repo stars

From the same set15

syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 700installs syncfusion-react-popups A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. CX Codex +1 658installs syncfusion-react-3d-chart This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export. CX Codex +1 656installs syncfusion-react-notifications A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs. CX Codex +1 654installs syncfusion-react-timeline Tells your agent how to build event chronologies with the Syncfusion Timeline component for React. Useful for roadmaps, shipping tracking and activity feeds. CX Codex +1 650installs syncfusion-react-smithchart A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work. CX Codex +1 647installs syncfusion-react-3d-circular-chart A skill that walks your coding agent through building 3D pie and donut charts in React with Syncfusion components. CX Codex +1 646installs syncfusion-react-stock-chart A skill that walks your agent through building a stock chart with the Syncfusion Stock Chart component in React: candles, OHLC, indicators. CX Codex +1 642installs