syncfusion-react-breadcrumb — скилл для Claude Code
Скилл для ИИ-агента, который помогает собрать и настроить компонент Breadcrumb из Syncfusion в React-приложении: маршруты, иконки, переполнение. Пригодится, когда нужна навигационная цепочка без чтения документации.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-codeЧто делает syncfusion-react-breadcrumb
Скилл описывает работу с BreadcrumbComponent из пакета @syncfusion/ej2-react-navigations. Агент получает справочник по свойствам и событиям, примеры быстрого старта и готовые шаблоны: включение навигации через enableNavigation, генерация пунктов из URL, шесть режимов переполнения (Menu, Collapsed, Scroll, Wrap, Hidden, None), шаблоны пунктов и разделителей, иконки шрифтом, картинками и SVG.
Внутри — набор файлов-справочников, которые агент читает по мере надобности: references/api-properties-and-events.md, references/getting-started.md, references/navigation-and-routing.md, references/customization.md, references/icon-integration-data-binding.md, references/accessibility.md. Отдельно разобраны интеграция с React Router, события beforeItemRender, itemClick, created, поддержка RTL и доступность по WCAG 2.2 с навигацией с клавиатуры.
Скилл завязан на конкретную библиотеку: примеры импортируют @syncfusion/ej2-react-navigations и стили тем, например @syncfusion/ej2-navigations/styles/tailwind3.css. Если в проекте другой набор компонентов, примеры придётся переписывать под него, и агент тут не поможет.
Какие задачи решает
- собрать хлебные крошки с текущим путём в иерархии разделов
- включить переходы по пунктам и открытие ссылок в новой вкладке
- настроить поведение при переполнении длинной цепочки
- подставить иконки и свои шаблоны для пунктов и разделителей
- сгенерировать пункты из URL и связать их с React Router
Примеры запросов агенту
- Сделай хлебные крошки на
BreadcrumbComponentс пунктами «Главная», «Компоненты», «Breadcrumb» и включённой навигацией - Настрой режим переполнения Collapsed и ограничь число видимых пунктов через
maxItems - Сгенерируй пункты крошек из текущего URL и повесь обработчик на
itemClick
Как установить syncfusion-react-breadcrumb
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-breadcrumb/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-breadcrumb/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-breadcrumb/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-breadcrumb/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-breadcrumb2Вручную: положить файлы
.github/skills/syncfusion-react-breadcrumb/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-breadcrumbВручную: положить файлы
.devin/skills/syncfusion-react-breadcrumb/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-breadcrumb
Как установить syncfusion-react-breadcrumb в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-breadcrumb -a claude-code, затем проверьте, что файл появился по пути ~/.claude/skills/syncfusion-react-breadcrumb/SKILL.md.
Что делает этот скилл?
Даёт агенту справочники и примеры по компоненту Breadcrumb из Syncfusion для React: свойства, события, режимы переполнения, шаблоны, иконки, маршрутизация и доступность.
С чем ещё работает скилл, кроме Claude?
Его можно поставить в Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode — команды установки отличаются флагом -a или отдельной командой для Copilot.
