К основному содержанию
affpapa.org
RU EN
скилл CX Codex

syncfusion-react-barcode — скилл для Claude Code: штрихкоды в React

Скилл для генерации штрихкодов, QR-кодов и Data Matrix в React через компоненты Syncfusion. Пригодится, когда нужно встроить коды в форму, отчёт или этикетку.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a claude-code
Открыть на GitHub

Что делает syncfusion-react-barcode

Скилл закрывает работу с тремя компонентами пакета @syncfusion/ej2-react-barcode-generator: BarcodeGeneratorComponent для линейных кодов (Code39, Code128, Code11, Code32, Code93, Codabar), QRCodeGeneratorComponent для QR и DataMatrixGeneratorComponent для компактных меток. Агент подскажет, какой тип брать под задачу, и соберёт разметку с нужными пропсами.

Внутри — справочники по каждому генератору, настройке внешнего вида и экспорту. Стилизация идёт через width, height, foreColor, backgroundColor и объект displayText. Выгрузка — методами exportImage(filename, format) и exportAsBase64Image(format), форматы JPG и PNG. Для экспорта компоненту нужен проп id, иначе метод не найдёт элемент: это первое, на чём спотыкаются при копировании примеров.

Скилл не заменяет сам пакет — компоненты Syncfusion надо поставить в проект отдельно. Дальше агент ведёт по шагам: выбрать генератор, подключить импорт, задать значение и размеры, при необходимости добавить кнопку выгрузки.

Какие задачи решает

  • сгенерировать Code128 для артикулов и SKU
  • сделать QR-код со ссылкой на страницу товара
  • собрать Data Matrix для отслеживания посылок
  • настроить цвет и размер полос под макет этикетки
  • выгрузить штрихкод в PNG по нажатию кнопки

Примеры запросов агенту

  • Сделай компонент React с Code128 для значения из стейта
  • Добавь QR-код с ссылкой на товар и кнопку скачивания в PNG
  • Настрой foreColor и backgroundColor у Data Matrix под печать этикетки

Как установить syncfusion-react-barcode

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-barcode/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора15

syncfusion-react-image-editor Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение. CX Codex +1 713установок syncfusion-react-tabs Помогает агенту собрать и настроить компонент Tab из Syncfusion для React: заголовки, перетаскивание, ленивую загрузку контента. CX Codex +1 710установок syncfusion-react-dashboard-layout Скилл для ИИ-агента: подсказывает, как собрать дашборд на React с перетаскиваемыми панелями Syncfusion. CX Codex +1 703установок syncfusion-react-maps Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам. CX Codex +1 702установок syncfusion-react-blockeditor Скилл помогает агенту подключить Syncfusion React BlockEditor: блочный редактор контента с меню, drag-and-drop и совместной работой. CX Codex +1 701установок syncfusion-react-treeview Скилл для ИИ-агента, который помогает собрать иерархический TreeView из @syncfusion/ej2-react-navigations: выбор узлов, чекбоксы, drag-drop, инлайн-редактирование. CX Codex +1 700установок syncfusion-react-popups Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React. CX Codex +1 658установок syncfusion-react-3d-chart Скилл помогает агенту собрать объёмные столбчатые и линейчатые диаграммы Syncfusion в React-проекте. Пригодится, когда нужен график с осями, легендой и экспортом. CX Codex +1 656установок

Похожие

react-and-nextjs-data-visualization официальный OpenAI Инструкции по встраиванию графиков и диаграмм в React и Next.js: границы SSR, разделение состояния и отрисовки, адаптивность и защита от ошибок гидратации. CX Codex GP ChatGPT 13установок globe-gl MengTo Скилл помогает настраивать 3D-глобусы через библиотеку globe.gl на ThreeJS и WebGL. Пригодится при отрисовке точек, дуг и полигонов на карте в чистом HTML или React. CX Codex +1 1 500установок coordinated-data-views dembrandt Скилл для ИИ-кодинга, который подсказывает, как связать таблицу с картой, диаграммой или графиком и синхронизировать выделение в обе стороны. CX Codex +1 668установок vercel-react-view-transitions vercel Скилл ведёт агента по нативным view transitions в React: переходы между страницами, общие элементы, появление и исчезновение блоков без сторонних библиотек. CX Codex +1 168 100установок gsap-react greensock Скилл подсказывает, как создавать анимации GSAP в React и Next.js, ограничивать их область действия и очищать при размонтировании компонента. CX Codex +1 66 300установок stitch::react-components официальный google-labs-code Превращает дизайны Stitch в компоненты React с Vite. Также синхронизирует существующие компоненты с обновлёнными макетами. CX Codex +1 50 400установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о syncfusion-react-barcode

Как установить syncfusion-react-barcode в Claude?

Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-barcode -a claude-code. Файл скилла появится по пути ~/.claude/skills/syncfusion-react-barcode/SKILL.md.

Что делает syncfusion-react-barcode?

Помогает агенту писать код генерации штрихкодов, QR-кодов и Data Matrix на React с компонентами Syncfusion, включая стилизацию и экспорт в изображение.

Нужно ли что-то ставить помимо скилла?

Да, сами компоненты Syncfusion подключаются в проект отдельно — скилл только ведёт агента по их использованию.

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором