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

syncfusion-react-linear-gauge — Claude Code React skill

Build Syncfusion linear gauges in React for temperature readings, progress values, KPIs, or live sensor data.

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

What syncfusion-react-linear-gauge does

This skill guides the setup of a linear scale with an axis, tick marks, labels, and value pointers. It covers colored value ranges, text or image annotations, and styling. Pointers can use a bar or marker; the guidance also covers changing values, animation, and exporting to PDF, PNG, or SVG.

The React component comes from @syncfusion/ej2-react-lineargauge, which must be installed before adding LinearGaugeComponent to a project. The skill also covers multiple pointers, responsive layouts, RTL support, printing, and live data updates. Without the package, the component example will not build.

What it helps with

  • add a temperature scale with colored zones
  • show completion as a linear marker
  • configure axis bounds, ticks, and labels
  • update a gauge pointer from sensor readings
  • prepare a gauge for printing or export

Example prompts for the agent

  • Add a Syncfusion temperature gauge with colored ranges to my React project.
  • Show completion as a linear scale and configure its marker pointer.
  • Set up the axis labels for sensor readings that update in real time.

How to install syncfusion-react-linear-gauge

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-linear-gauge/SKILL.md

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

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

Questions about syncfusion-react-linear-gauge

How do I install syncfusion-react-linear-gauge in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-linear-gauge -a claude-code. The skill file is located at ~/.claude/skills/syncfusion-react-linear-gauge/SKILL.md.

What does syncfusion-react-linear-gauge do?

It guides implementation of Syncfusion linear gauges in React, including axes, pointers, ranges, and annotations. It also covers live updates, animation, and export.

Which package does the React gauge use?

The component package is @syncfusion/ej2-react-lineargauge. Install it before adding the gauge component to your app.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set57

syncfusion-react-circular-gauge Build React circular gauges for KPIs, sensor readings, speedometers, and live monitoring dashboards with this skill. CX Codex +1 651installs 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 651installs syncfusion-react-stepper This skill helps an agent build React step flows for wizards, multi-step forms, and guided process screens. CX Codex +1 649installs 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 650installs 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 648installs syncfusion-react-treemaps This skill guides agents through building Syncfusion React TreeMap views. Use it to map hierarchical data, set up drill-down, and tune how categories appear. CX Codex +1 646installs syncfusion-react-cards This skill guides React card layouts with headers, images, action buttons, horizontal structure, and embedded Syncfusion components. CX Codex +1 624installs syncfusion-react-accordion This skill guides coding assistants in configuring Syncfusion collapsible panels for React. It assists with expand behavior, animations, and styling. CX Codex +1 621installs

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