# syncfusion-react-cards

This skill guides React card layouts with headers, images, action buttons, horizontal structure, and embedded Syncfusion components.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 624 installs · ★ 3
- Author: Syncfusion
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-cards/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-cards

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/syncfusion-react-cards/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-cards/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-cards/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-cards/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install syncfusion/react-ui-components-skills syncfusion-react-cards
```

2. **Manually: put the files in place**
- File: `.github/skills/syncfusion-react-cards/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/syncfusion/react-ui-components-skills --path skills/syncfusion-react-cards
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-cards/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-cards -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/syncfusion/react-ui-components-skills/tree/HEAD/skills/syncfusion-react-cards/SKILL.md

## When to use it
- 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
- 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 `ListView` inside a Syncfusion card and separate its content sections.

## Similar
- [cards-containers](https://affpapa.org/en/nevibecode/skills/cards-containers.md) — skill · 513 installs
- [chat-cards](https://affpapa.org/en/nevibecode/plugins/chat-cards.md) — plugin · ★ 40451
- [pipefy-pipes-and-cards](https://affpapa.org/en/nevibecode/skills/pipefy-pipes-and-cards.md) — skill · 675 installs
- [react-spring-physics](https://affpapa.org/en/nevibecode/skills/react-spring-physics.md) — skill · 2400 installs
- [repeated-component-alignment](https://affpapa.org/en/nevibecode/skills/repeated-component-alignment.md) — skill · 678 installs
- [react-joyride](https://affpapa.org/en/nevibecode/skills/react-joyride.md) — skill · 686 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 37 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md