syncfusion-react-cards — Claude Code skill: install
This skill guides React card layouts with headers, images, action buttons, horizontal structure, and embedded Syncfusion components.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-codeWhat syncfusion-react-cards does
This skill gives the agent a structure for building Syncfusion cards in React. It covers the card shell, header captions, subtitles, content areas, images, separators, and action regions with buttons.
The material is split into focused implementation paths for horizontal cards, profile cards, product listings, blog entries, and embedded components. It also points to patterns for placing ListView, charts, and other Syncfusion pieces inside a card. The sample setup imports @syncfusion/ej2-layouts/styles/tailwind3.css for the card styling.
The markup uses classes such as e-card, e-card-header, e-card-content, and e-card-actions. That means the agent works from Syncfusion’s React structure and class names rather than inventing a separate card API.
What it helps with
- build a card with a title and content area
- place an image with an overlaid card title
- add horizontal or vertical card actions
- turn a stacked card into a horizontal layout
- embed a list or chart inside a card
Example prompts for the agent
- Create a React profile card with an image, a heading, and action buttons.
- Build a horizontal product card with an image, description, and purchase action.
- Put
ListViewinside a Syncfusion card and separate its content sections.
How to install syncfusion-react-cards
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-code2Manually: put the files in place
~/.claude/skills/syncfusion-react-cards/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/syncfusion-react-cards/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a codex2Manually: put the files in place
.agents/skills/syncfusion-react-cards/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a cursor2Manually: put the files in place
.cursor/skills/syncfusion-react-cards/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install syncfusion/react-ui-components-skills syncfusion-react-cards2Manually: put the files in place
.github/skills/syncfusion-react-cards/SKILL.md1Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a gemini-cli2Platform CLI
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-cardsManually: put the files in place
.devin/skills/syncfusion-react-cards/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about syncfusion-react-cards
How do I install syncfusion-react-cards in Claude Code?
Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-code, then open ~/.claude/skills/syncfusion-react-cards/SKILL.md.
What does syncfusion-react-cards do?
It helps the agent create React card layouts with headers, images, content blocks, action buttons, and horizontal arrangements.
What can I embed inside a card?
The skill covers embedding ListView, charts, and other Syncfusion components within card content.
