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

syncfusion-react-appbar — Claude Code skill: what it does, install

This skill helps build React navigation and action bars with AppBar. Use it for top, bottom, sticky, or responsive headers with controls and sidebars.

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

What syncfusion-react-appbar does

The skill guides an agent through building AppBar layouts for the top or bottom of a React interface. It covers navigation controls, buttons, menus, icons, titles, sidebars, and content that shifts with the available width. Spacers and separators help arrange or group controls.

It describes Light, Dark, Primary, and Inherit color modes, plus Regular, Prominent, and Dense sizing. The material also covers sticky positioning, RTL, custom CSS classes, ARIA attributes, keyboard navigation, and links with Menu, Button, DropDownButton, Sidebar, and TreeView.

The examples import @syncfusion/ej2-react-navigations and @syncfusion/ej2-react-buttons, so those packages need to be available before the app is built. Accessibility guidance refers to WCAG 2.2 and Section 508.

What it helps with

  • build a branded header with navigation controls
  • arrange actions in a responsive toolbar
  • keep an AppBar visible while the page scrolls
  • separate toolbar groups with spacing and dividers
  • connect a header to a sidebar and TreeView

Example prompts for the agent

  • Build a top AppBar with a menu button, app title, and sign-in action.
  • Create a dark dense toolbar with editing icons and a visual separator.
  • Add a sticky bottom AppBar with Save and Cancel actions.

How to install syncfusion-react-appbar

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

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

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

Questions about syncfusion-react-appbar

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

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

What does syncfusion-react-appbar do?

It guides React AppBar work for navigation and action areas. The skill covers placement, sizing, colors, controls, sidebars, and accessibility details.

Which AppBar modes are covered?

Color options include Light, Dark, Primary, and Inherit; size options include Regular, Prominent, and Dense. The bar can sit at the top or bottom and stay fixed during scrolling.

Similar skills

All skills for Frontend and UI →
react-native-architecture Seth Hobson A skill for Claude Code, Codex and Cursor that hands your agent project layout, navigation, native modules and offline sync patterns for React Native on Expo. CX Codex 15,087installs react-navigation callstackincubator Reference files for React Navigation 7 UI patterns: stacks, tabs, sheets, drawers, headers, safe areas. Useful when screens and modals have to sit inside a navigator. CX Codex +1 4,800installs gsap-react greensock This skill guides GSAP animation work in React and Next.js, including scoped selectors, cleanup, and client-only execution. CX Codex +1 66,900installs stitch::react-components official google-labs-code Turns Stitch designs into modular Vite and React components. Can also sync existing components with updated Stitch designs. CX Codex +1 50,400installs 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 react-spring-physics freshtechbro A skill for physics-based React animation with React Spring and Popmotion. Useful for gestures, inertia and transitions you can interrupt mid-motion. CX Codex +1 2,400installs

From the same set57

syncfusion-react-buttons Provides implementation guides for Syncfusion React button components. Helps code assistants wire up styled buttons, toggle actions, and grouped selections. CX Codex +1 675installs syncfusion-react-inputs A skill covering Syncfusion input components for React: file uploads, numeric fields, OTP, signatures and sliders. Useful when a form is built on ej2-react-inputs. CX Codex +1 672installs syncfusion-react-dropdowns Implementation guide for Syncfusion React dropdown components. Helps coding assistants configure AutoComplete, remote data sources, and custom filters. CX Codex +1 668installs 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 663installs 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 661installs syncfusion-react-notifications A skill covering Syncfusion's React notification components: Toast, Badge, Message, Skeleton and Spinner. Useful when you need status indicators without digging through docs. CX Codex +1 659installs syncfusion-react-heatmap Walks the agent through building a React heatmap with axes, legend and tooltips. Handy when a matrix of values needs colour. CX Codex +1 658installs syncfusion-react-breadcrumb A skill that walks your coding agent through building and configuring the Syncfusion Breadcrumb component in React: routes, icons, overflow. Useful when you need a navigation trail without digging through docs. CX Codex +1 658installs

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