# syncfusion-react-dashboard-layout

A skill that tells your coding agent how to build React dashboards with draggable Syncfusion panels.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 703 installs · ★ 3
- Author: Syncfusion Inc
- 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-dashboard-layout/SKILL.md
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/skills/syncfusion-react-dashboard-layout

## What it does

This skill covers the Dashboard Layout component from `@syncfusion/ej2-react-layouts`. It ships as a set of reference files: grid setup, panel templates, dragging, resizing, state persistence, accessibility. The agent picks the file that matches your task instead of guessing the API.

The root `SKILL.md` works as a map, and the details live under `references/` — separate pages for properties, methods, events, responsive behaviour and WCAG compliance. The references document 15 properties, 9 methods and 10 events, among them `addPanel`, `removePanel`, `movePanel`, `resizePanel` and `serialize`. Layout state can go to `localStorage`, `sessionStorage` or a database API.

Your project needs React with the Syncfusion package installed and a theme CSS import, otherwise the snippets in the references won't run. The source text is cut off, so check the repository for the rest of the setup notes. If your dashboard already runs on another grid library, porting it here is extra work for little gain.

## Install

### Claude Code (native platform)

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

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

### Codex

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

2. **Manually: put the files in place**
- File: `.agents/skills/syncfusion-react-dashboard-layout/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-dashboard-layout -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/syncfusion-react-dashboard-layout/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-dashboard-layout
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/syncfusion-react-dashboard-layout/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-dashboard-layout -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-dashboard-layout/SKILL.md

## When to use it
- lay out a multi-column dashboard grid with panels of different sizes
- turn on panel dragging and handle dragStart and dragStop events
- cap panel resizing with minSizeX and maxSizeY constraints
- persist the layout between sessions and restore it on load
- add or remove a panel programmatically while the app runs

## Example prompts
- Build a Syncfusion React Dashboard Layout with four panels, dragging enabled and the layout saved to localStorage
- Constrain resizing on the reports panel and attach a handler to the resizeStop event
- How do I use serialize to save the current layout and restore it after a page reload?

## Similar
- [react-vite-dashboard](https://affpapa.org/en/nevibecode/skills/react-vite-dashboard.md) — skill · 5500 installs
- [better-layout](https://affpapa.org/en/nevibecode/skills/better-layout.md) — skill · 30800 installs
- [layout-grid](https://affpapa.org/en/nevibecode/skills/layout-grid.md) — skill · 2400 installs
- [dark-glass-clean-layout](https://affpapa.org/en/nevibecode/skills/dark-glass-clean-layout.md) — skill · 1400 installs
- [framed-grid-layout](https://affpapa.org/en/nevibecode/skills/framed-grid-layout.md) — skill · 1400 installs
- [node-link-and-diagram-layout](https://affpapa.org/en/nevibecode/skills/node-link-and-diagram-layout.md) — skill · 16 installs

From the same set: [syncfusion/react-ui-components-skills](https://affpapa.org/en/nevibecode/by/syncfusion/react-ui-components-skills.md) — 15 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