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

syncfusion-react-barcode — Claude Code skill: barcodes in React

A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label.

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

What syncfusion-react-barcode does

The skill covers three components from @syncfusion/ej2-react-barcode-generator: BarcodeGeneratorComponent for 1D codes (Code39, Code128, Code11, Code32, Code93, Codabar), QRCodeGeneratorComponent for QR codes and DataMatrixGeneratorComponent for compact labels. The agent picks the right type for your case and writes the JSX with the props you need.

Reference files inside cover each generator, styling and export. Appearance is set through width, height, foreColor, backgroundColor and the displayText object. Export runs through exportImage(filename, format) and exportAsBase64Image(format), with JPG and PNG available. The component needs an id prop for export to work — that is the usual snag when you copy an example and the download button does nothing.

The skill does not ship the Syncfusion package itself, so the components still have to be installed in your project. From there the agent walks through the steps: choose a generator, add the import, set the value and dimensions, wire up an export button if you need one.

What it helps with

  • generate a Code128 for SKUs and product codes
  • build a QR code that links to a product page
  • create a Data Matrix for package tracking
  • match bar colours and size to a label layout
  • download a barcode as PNG from a button click

Example prompts for the agent

  • Build a React component with a Code128 barcode bound to state
  • Add a QR code for a product link and a button that downloads it as PNG
  • Set foreColor and backgroundColor on a Data Matrix for label printing

How to install syncfusion-react-barcode

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-barcode

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

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

What does syncfusion-react-barcode do?

It guides the agent through writing React code for barcodes, QR codes and Data Matrix codes with Syncfusion components, including styling and image export.

Do I need anything besides the skill?

Yes — the Syncfusion components themselves are installed in your project separately; the skill only guides how the agent uses them.

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 globe-gl MengTo Sets up 3D globe visualizations using globe.gl with WebGL and ThreeJS. Helps configure data layers like points, arcs, and polygons in plain HTML or React. CX Codex +1 1,500installs coordinated-data-views dembrandt A coding-agent skill that explains how to show a table next to its map, diagram or chart and keep selection synced both ways. CX Codex +1 668installs vercel-react-view-transitions vercel A skill that walks your agent through native view transitions in React: page changes, shared elements, enter and exit animations without third-party libraries. CX Codex +1 168,100installs gsap-react greensock This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. CX Codex +1 66,300installs stitch::react-components official google-labs-code Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs. CX Codex +1 50,400installs

From the same set15

syncfusion-react-image-editor A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. CX Codex +1 713installs syncfusion-react-tabs Guides the agent through building and customizing Syncfusion Tab components in React: headers, drag-and-drop, content rendering. CX Codex +1 710installs syncfusion-react-dashboard-layout A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels. CX Codex +1 703installs syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 702installs syncfusion-react-blockeditor A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. CX Codex +1 701installs 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

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