syncfusion-react-cards — скилл для Claude Code: установка
Скилл помогает собирать карточные интерфейсы в React: с заголовками, изображениями, кнопками и вложенными компонентами.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-codeЧто делает syncfusion-react-cards
Скилл подсказывает агенту, как строить карточки Syncfusion в React. Он охватывает корневой контейнер, заголовок с подзаголовком, основной контент, изображения, разделители и области действий с кнопками.
Внутри есть навигация по примерам и отдельным сценариям: горизонтальные карточки, профили, товары, записи блога, а также встраивание ListView, графиков и других компонентов Syncfusion. Для оформления в примере используется импорт @syncfusion/ej2-layouts/styles/tailwind3.css.
Разметка опирается на классы вроде e-card, e-card-header, e-card-content и e-card-actions, поэтому агенту нужно понимать структуру React-компонента и CSS-классов Syncfusion.
Какие задачи решает
- собрать карточку с заголовком и содержимым
- добавить изображение и подпись поверх него
- разместить кнопки действий в карточке
- сверстать горизонтальный вариант карточки
- встроить список или график в карточку
Примеры запросов агенту
- Собери карточку профиля React с изображением, заголовком и кнопками действий.
- Сделай горизонтальную карточку товара с изображением, описанием и кнопкой покупки.
- Встрой
ListViewв карточку Syncfusion и раздели секции визуальным разделителем.
Как установить syncfusion-react-cards
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-code2Вручную: положить файлы
~/.claude/skills/syncfusion-react-cards/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/syncfusion-react-cards/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a codex2Вручную: положить файлы
.agents/skills/syncfusion-react-cards/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a cursor2Вручную: положить файлы
.cursor/skills/syncfusion-react-cards/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-cards2Вручную: положить файлы
.github/skills/syncfusion-react-cards/SKILL.md1Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a gemini-cli2Командой платформы
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-cardsВручную: положить файлы
.devin/skills/syncfusion-react-cards/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о syncfusion-react-cards
Как установить syncfusion-react-cards в Claude Code?
Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-code, затем откройте ~/.claude/skills/syncfusion-react-cards/SKILL.md.
Что делает syncfusion-react-cards?
Скилл помогает агенту создавать карточные интерфейсы в React с заголовками, изображениями, контентом, кнопками и горизонтальной раскладкой.
Какие компоненты можно встроить в карточку?
В карточки можно встраивать ListView, графики и другие компоненты Syncfusion.
