·carbon-design-system
{}

carbon-design-system

✓
fefogarcia/approved-skillsGitHub: fefogarcia/approved-skillsSource: fefogarcia/approved-skills

Build UIs using IBM's Carbon Design System. Use when the user requests Carbon-styled interfaces, IBM-style dashboards, enterprise UIs following Carbon conventions, or explicitly mentions Carbon, IBM design, or @carbon/react. Covers component usage, design tokens (color, typography, spacing, motion), theming (White, Gray 10, Gray 90, Gray 100), grid layout, and accessibility. Supports both artifact/HTML output (CDN-based) and full React project output (@carbon/react). Triggers include "Carbon", "IBM design system", "enterprise dashboard", "@carbon/react", "carbon components", or requests for IBM-style professional interfaces.

fefogarcia·carbon·design·system
3Installs·0Trend·@fefogarcia

Installation

GitHub: fefogarcia/approved-skills
$npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system

How to Install carbon-design-system

Quickly install carbon-design-system AI skill to your development environment via command line

  1. Open Terminal: Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.)
  2. Run Installation Command: Copy and run this command: npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system
  3. Verify Installation: Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Source: fefogarcia/approved-skills.

SKILL.md

View raw

Build UIs conforming to IBM's Carbon Design System v11. Carbon provides a token-based, accessible, enterprise-grade component library.

Apply Carbon classes to HTML elements. See references/html-classes.md.

@carbon/react is not in Claude's default artifact environment. For React artifacts, load the CDN CSS above and apply Carbon class names to standard HTML/JSX elements. The visual output is identical.

Build UIs using IBM's Carbon Design System. Use when the user requests Carbon-styled interfaces, IBM-style dashboards, enterprise UIs following Carbon conventions, or explicitly mentions Carbon, IBM design, or @carbon/react. Covers component usage, design tokens (color, typography, spacing, motion), theming (White, Gray 10, Gray 90, Gray 100), grid layout, and accessibility. Supports both artifact/HTML output (CDN-based) and full React project output (@carbon/react). Triggers include "Carbon", "IBM design system", "enterprise dashboard", "@carbon/react", "carbon components", or requests for IBM-style professional interfaces. Source: fefogarcia/approved-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

Install command
npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system
Source
fefogarcia/approved-skills
Category
{}Data Analysis
Verified
✓
First Seen
2026-02-26
Updated
2026-03-11
URL
https://www.learn-skills.dev/en/skills/fefogarcia/approved-skills/carbon-design-system

Browse more skills from fefogarcia/approved-skills

Quick answers

What is carbon-design-system?

Build UIs using IBM's Carbon Design System. Use when the user requests Carbon-styled interfaces, IBM-style dashboards, enterprise UIs following Carbon conventions, or explicitly mentions Carbon, IBM design, or @carbon/react. Covers component usage, design tokens (color, typography, spacing, motion), theming (White, Gray 10, Gray 90, Gray 100), grid layout, and accessibility. Supports both artifact/HTML output (CDN-based) and full React project output (@carbon/react). Triggers include "Carbon", "IBM design system", "enterprise dashboard", "@carbon/react", "carbon components", or requests for IBM-style professional interfaces. Source: fefogarcia/approved-skills.

How do I install carbon-design-system?

Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code, Cursor, or OpenClaw

Where is the source repository?

https://github.com/fefogarcia/approved-skills

Details

Category
{}Data Analysis
Source
skills.sh
First Seen
2026-02-26

Related Skills

tremor-design-system
3 Installs
ux-researcher-designer
3 Installs