·carbon-design-system
{}

carbon-design-system

dodatech/approved-skillsGitHub: dodatech/approved-skillsSource: dodatech/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.

cached·dodatech·carbon·design·system
0Installs·0Trend·@dodatech

Installation

GitHub: dodatech/approved-skills
$npx skills add https://github.com/dodatech/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/dodatech/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: dodatech/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: dodatech/approved-skills.

Facts (cite-ready)

Stable fields and commands for AI/search citations.

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

Browse more skills from dodatech/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: dodatech/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/dodatech/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/dodatech/approved-skills

Details

Category
{}Data Analysis
Source
user
First Seen
2026-02-25

Related Skills

playwright-local
27 Installs
tremor-design-system
15 Installs
fluent2-design-system
7 Installs
design-consistency-auditor
5 Installs
copy-editing
4 Installs
deep-debug
4 Installs