carbon-react

Name: carbon-react
Author: sage

github.com/sageDevelopment316222 installsUpdated today

About carbon-react

carbon-react is a reference skill for selecting and using Carbon components in React projects. It guides users to component APIs, relevant examples, setup docs, and migration advice, with checks for imports, props, and deprecated APIs.

Key features

01Component selection guidance
02Source-derived API details
03Curated component examples
04Setup, routing, and styling docs
05Deprecation and migration guidance

Use cases

01Finding a suitable Carbon component
02Checking component imports and props
03Integrating components with routing
04Handling deprecated APIs

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sage/carbon --skill carbon-react

After installing, type/carbon-reactin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

components/

accordion-group.md

accordion.md

action-popover-divider.md

action-popover-item.md

action-popover-menu-button.md

action-popover-menu.md

action-popover.md

adaptive-sidebar.md

advanced-color-picker.md

alert.md

anchor-navigation-item.md

anchor-navigation.md

anchor-section-divider.md

badge.md

batch-selection.md

box.md

breadcrumbs.md

button-bar.md

button-minor.md

button-next.md

button-toggle-group.md

button-toggle.md

button.md

carbon-provider.md

card-column.md

card-footer.md

card-row.md

card.md

checkbox-group.md

checkbox.md

Details

From the project README

Carbon Component Catalog

Use index.md to select a component, then open its file and only the relevant linked examples.

Component files combine authored selection guidance with source-derived API details. Curated components link to selected examples and omit playgrounds; others retain generated Storybook examples.

Load references only when needed:

references/docs/usage.md: package setup and basic use.
references/docs/installation.md: installation and configuration.
references/docs/recommended-practices.md: project-wide conventions.
references/docs/usage-with-routing.md: routing integration.
references/docs/extending-styles-using-styled-components.md: style extension.
references/docs/colors.md: colours and tokens.
references/docs/i18n.md: translation.
references/docs/deprecation-migration.md: deprecation migration.

Before finishing, confirm that imports and props match the component file and that deprecated APIs are either avoided or handled using the migration guidance.

Comments

Markdown supported

Details

Author: sage
Repository: sage/carbon
Category: Development
Installs: 222
GitHub stars: 316

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.