скилл CX Codex

syncfusion-react-dashboard-layout — скилл для Claude Code: панели

Q: Как установить syncfusion-react-dashboard-layout в Claude?

Выполните `npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dashboard-layout -a claude-code`. Скилл окажется в `~/.claude/skills/syncfusion-react-dashboard-layout/SKILL.md`.

Q: Что нужно, чтобы примеры скилла заработали?

React-проект с пакетом `@syncfusion/ej2-react-layouts` и импортом CSS-темы, например `@syncfusion/ej2-react-layouts/styles/tailwind3.css`.

Скилл для ИИ-агента: подсказывает, как собрать дашборд на React с перетаскиваемыми панелями Syncfusion.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

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

Открыть на GitHub

Что делает syncfusion-react-dashboard-layout

Скилл описывает работу с компонентом Dashboard Layout из пакета @syncfusion/ej2-react-layouts. Внутри — справочники по сетке, шаблонам панелей, перетаскиванию, изменению размера и сохранению состояния. Агент читает нужный файл и сразу пишет код под вашу задачу, а не выдумывает API по памяти.

Структура простая: корневой SKILL.md служит навигатором, а детали лежат в references/ — отдельные файлы про свойства, методы, события, адаптивность и доступность. Есть разбор 15 свойств, 9 методов и 10 событий компонента, включая addPanel, removePanel, movePanel, resizePanel и serialize. Состояние раскладки можно сохранять в localStorage, sessionStorage или через API.

Скилл рассчитан на React-проект с установленным пакетом Syncfusion и импортом темы CSS — без этого примеры из справочников не заработают. Тексты обрезаны, поэтому часть деталей по настройке ищите в самом репозитории. Если вы уже пишете дашборд на чём-то другом, переносить сюда логику не стоит.

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

собрать сетку дашборда из нескольких колонок с панелями разного размера
включить перетаскивание панелей и ловить события dragStart и dragStop
ограничить изменение размера панели через minSizeX и maxSizeY
сохранить раскладку между сессиями и восстановить её при загрузке
добавить и убрать панель программно во время работы приложения

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

Собери дашборд на Syncfusion React Dashboard Layout: четыре панели, перетаскивание и сохранение раскладки в localStorage
Добавь ограничения на изменение размера панели отчётов и повесь обработчик на событие resizeStop
Как через serialize сохранить текущую раскладку и восстановить её после перезагрузки страницы?

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

1Через Skills CLI (Vercel)

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

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

~/.claude/skills/syncfusion-react-dashboard-layout/SKILL.md

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

1Через Skills CLI (Vercel)

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

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

.agents/skills/syncfusion-react-dashboard-layout/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

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

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

.cursor/skills/syncfusion-react-dashboard-layout/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install syncfusion/react-ui-components-skills syncfusion-react-dashboard-layout

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

.github/skills/syncfusion-react-dashboard-layout/SKILL.md

1Через Skills CLI (Vercel)

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

2Командой платформы

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

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

.devin/skills/syncfusion-react-dashboard-layout/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

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

По шагам, с командами для каждой платформы: Как установить скилл в 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-barcode Скилл для генерации штрихкодов, QR-кодов и Data Matrix в React через компоненты Syncfusion. Пригодится, когда нужно встроить коды в форму, отчёт или этикетку. CX Codex +1 706установок 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установок

Вопросы о syncfusion-react-dashboard-layout

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

Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dashboard-layout -a claude-code. Скилл окажется в ~/.claude/skills/syncfusion-react-dashboard-layout/SKILL.md.

Что делает syncfusion-react-dashboard-layout?

Помогает агенту писать код дашбордов на компоненте Dashboard Layout: сетка, перетаскивание панелей, изменение размера, шаблоны и сохранение состояния.

Что нужно, чтобы примеры скилла заработали?

React-проект с пакетом @syncfusion/ej2-react-layouts и импортом CSS-темы, например @syncfusion/ej2-react-layouts/styles/tailwind3.css.

syncfusion-react-dashboard-layout — скилл для Claude Code: панели

Что делает syncfusion-react-dashboard-layout

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

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

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

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

Похожие

Вопросы о syncfusion-react-dashboard-layout

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