Skip to main content
affpapa.org
RU EN
skill CX Codex

syncfusion-react-dashboard-layout — Claude Code skill: React

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

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dashboard-layout -a claude-code
Open on GitHub

What syncfusion-react-dashboard-layout 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.

What it helps with

  • 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 for the agent

  • 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?

How to install syncfusion-react-dashboard-layout

1Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dashboard-layout -a claude-code

2Manually: put the files in place

~/.claude/skills/syncfusion-react-dashboard-layout/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/syncfusion-react-dashboard-layout/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about syncfusion-react-dashboard-layout

How do I install syncfusion-react-dashboard-layout in Claude?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-dashboard-layout -a claude-code. The skill lands in ~/.claude/skills/syncfusion-react-dashboard-layout/SKILL.md.

What does syncfusion-react-dashboard-layout do?

It guides the agent through building dashboards with the Dashboard Layout component: grid, panel dragging, resizing, templates and state persistence.

What do I need for the skill's examples to work?

A React project with @syncfusion/ej2-react-layouts installed and a theme CSS import such as @syncfusion/ej2-react-layouts/styles/tailwind3.css.

Similar skills

Everything for Frontend and UI →
react-vite-dashboard official google-labs-code This skill converts Stitch designs into production React and Vite dashboards. It maps tokens from DESIGN.md and integrates async data fetching with TanStack Query. CX Codex +1 5,500installs better-layout jakubkrehel A skill that sets grouping, alignment, reading order and responsive structure, then stress-tests the result by resizing, translating and mirroring it for RTL. CX Codex +1 30,800installs layout-grid Owl-Listener This skill defines a responsive page grid: columns, gutters, margins and breakpoint behaviour. Handy when you are setting up page structure from scratch. CX Codex +1 2,400installs dark-glass-clean-layout MengTo This skill defines a dark glass UI system with clean columns, floating data cards, and restrained depth. Use it for workspace and console layouts. CX Codex +1 1,400installs framed-grid-layout MengTo A skill that spells out how to build pages with thin visible section borders, L-shaped corner brackets and strict grid alignment. CX Codex +1 1,400installs node-link-and-diagram-layout official OpenAI This skill selects layouts for graphs, diagrams, and connected nodes. Use it when crossings, overlaps, edge routing, or unstable placement make a visual hard to read. CX Codex GP ChatGPT 16installs

From the same set15

syncfusion-react-image-editor A skill for the Syncfusion React Image Editor component: tells the agent how to wire image editing into a React app. CX Codex +1 713installs syncfusion-react-tabs Guides the agent through building and customizing Syncfusion Tab components in React: headers, drag-and-drop, content rendering. CX Codex +1 710installs syncfusion-react-barcode A skill for generating barcodes, QR codes and Data Matrix codes in React with Syncfusion components. Useful when codes go into a form, report or label. CX Codex +1 706installs syncfusion-react-maps Walks the agent through building geographic maps in React: GeoJSON, markers, bubbles, legends, choropleth. Useful when data has to be shown by region. CX Codex +1 702installs syncfusion-react-blockeditor A skill that walks your agent through the Syncfusion React BlockEditor: block-based content editing with menus, drag-and-drop and Yjs collaboration. CX Codex +1 701installs syncfusion-react-treeview An agent skill for building hierarchical trees with @syncfusion/ej2-react-navigations: node selection, checkboxes, drag-drop, inline editing and templates. CX Codex +1 700installs syncfusion-react-popups A skill that tells your coding agent how to build modal dialogs, tooltips and popovers with Syncfusion React components. CX Codex +1 658installs syncfusion-react-3d-chart This skill walks your agent through Syncfusion 3D column and bar charts in a React app. Handy when a chart needs axes, a legend and export. CX Codex +1 656installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor