Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-smithchart — Claude Code skill: React Smith Charts

A skill that walks your agent through building and customizing Syncfusion's React Smith Chart for impedance and RF work.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-smithchart -a claude-code
Open on GitHub

What syncfusion-react-smithchart does

The skill documents the Smith Chart component from @syncfusion/ej2-react-charts and guides an agent through configuring it. Reference files cover series, axes, markers, data labels, legend, tooltips, sizing, titles, and export. There is a separate section on printing, PNG/JPEG/SVG/PDF export, and WCAG 2.2 accessibility.

You can bind data two ways: a dataSource with resistance and reactance fields, or a points array. Multiple series are supported, each with its own fill and legend name. Interactivity needs modules — SmithchartLegend and TooltipRender go through Inject, otherwise the legend and tooltips never render.

Worth installing if you draw Smith Charts in React and keep forgetting prop names and directive order. It assumes @syncfusion/ej2-react-charts is already in your project; the skill does not pull the package for you.

What it helps with

  • plot resistance and reactance points on a Smith Chart
  • show impedance matching for a transmission line
  • add several series with distinct colors and a legend
  • turn on markers and tooltips for data points
  • export the chart to PDF or SVG for a report

Example prompts for the agent

  • build a Smith Chart from this resistance and reactance data
  • add a second series and enable the legend with tooltips
  • configure the horizontal and radial axes, then export the chart to PDF

How to install syncfusion-react-smithchart

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-smithchart

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

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

What does syncfusion-react-smithchart do?

It helps an agent implement and customize the Syncfusion React Smith Chart component: series, axes, markers, data labels, legend, tooltips, export, and accessibility.

What do I need before using this skill?

A React project with @syncfusion/ej2-react-charts installed. The skill does not install dependencies itself, it only guides component configuration.

Similar skills

Everything for Frontend and UI →
echarts sentimony A skill for building, styling and debugging Apache ECharts charts in JavaScript, React and Vue. CX Codex +1 2,700installs 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 chart Starchild-ai-agent Builds interactive charts on Apache ECharts: line, bar, candlestick, scatter. Outputs an HTML page plus a PNG screenshot. CX Codex +1 3,900installs 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 chart-designer claude-office-skills Picks a chart type for your data and hands back ready configs for ECharts and Chart.js. Useful when you need a dashboard or report, not a hand-drawn graph. CX Codex +1 5,600installs

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-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-sankey A skill that walks your coding agent through building Sankey diagrams in React with the Syncfusion chart component: nodes, links, legend, tooltips and export. CX Codex +1 644installs 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

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor