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

syncfusion-react-themes — Claude Code skill: themes and setup

This skill helps configure Syncfusion React themes, dark mode, CSS variables, icons, and component sizing. Use it when changing an app’s visual styling.

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

What syncfusion-react-themes does

The skill covers built-in Syncfusion React themes and their CSS imports from npm packages or a CDN. It also explains moving styles to theme packages, using lite CSS files, and setting up the icon library with the e-icons class. Theme Studio is included for custom theme work.

For dark mode, the guidance uses the e-dark-mode class on the page and supports runtime switching or per-component styling. CSS variables can change primary, success, warning, danger, and info colors, while the value format depends on the selected theme. A CDN stylesheet must match the installed npm package version, or styles and rendering can break.

What it helps with

  • add a Syncfusion React theme from npm or a CDN
  • toggle dark mode while the application is running
  • change theme colors with CSS variables
  • configure Syncfusion icons and their sizes
  • enable larger touch-oriented component sizing

Example prompts for the agent

  • Set up the tailwind3 theme for my Syncfusion React buttons and add the required CSS import.
  • Add a control that toggles e-dark-mode on document.body at runtime.
  • Change the primary theme color with a CSS variable and render the e-cut icon.

How to install syncfusion-react-themes

1Skills CLI (Vercel)

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

2Manually: put the files in place

~/.claude/skills/syncfusion-react-themes/SKILL.md

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

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

Questions about syncfusion-react-themes

How do I install syncfusion-react-themes in Claude Code?

Run npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-themes -a claude-code, then check ~/.claude/skills/syncfusion-react-themes/SKILL.md.

What does syncfusion-react-themes do?

It guides Claude Code through Syncfusion React theming, including dark mode, CSS variables, icon setup, size modes, and custom theme work.

What should I check when using a CDN theme?

The CDN stylesheet version must match the installed npm package version. A mismatch can cause style and rendering issues.

Similar skills

All skills for Frontend and UI →
frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs hyperframes heygen-com Instructs coding agents on creating, validating, and rendering HTML-based videos using the HyperFrames framework and CLI. CX Codex +1 1,200,000installs hyperframes-cli heygen-com Controls HyperFrames video workflows from the CLI: audits layouts and contrast, edits timeline clips, captures snapshots, and renders locally or in cloud runtimes. CX Codex +1 1,300,000installs webapp-testing official anthropics This skill tests local web apps with Playwright, helping agents debug UI behavior, capture screenshots, and inspect browser logs. 186,758installs

From the same set57

syncfusion-react-charts This skill helps build Syncfusion charts in React, covering axes, series, data sources, styling, and interactions. Use it for dashboards and analytics views. CX Codex +1 749installs syncfusion-react-treegrid Guides AI agents through configuring Syncfusion React TreeGrid components, handling nested data binding, and column setups. CX Codex +1 746installs syncfusion-react-common This skill guides Syncfusion React setup for localization, RTL, animation, drag-and-drop, persistence, templates, and security-related component work. CX Codex +1 732installs syncfusion-react-file-manager Configures the Syncfusion React File Manager component for web apps. Guides agents through local JSON state, S3 or Azure integration, and custom toolbar controls. CX Codex +1 729installs syncfusion-react-diagram This skill helps build interactive React diagrams with Syncfusion Diagrams. Use it for flowcharts, BPMN, UML models, org charts, and related visual layouts. CX Codex +1 719installs syncfusion-react-license Walks through Syncfusion licensing in React apps: issuing a key, registering it, and clearing validation errors. Useful when your build starts warning about licenses. CX Codex +1 718installs 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 718installs syncfusion-react-chat-ui This skill helps build React chat interfaces with messages, attachments, typing states, user presence, and configurable layouts. CX Codex +1 715installs

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