carbon-design-system

Name: carbon-design-system
Availability: InStock
Author: fefogarcia

Develop user interfaces with IBM's Carbon Design System v11.

1|Updated Feb 10, 2026

Search Tags:#react #design system #ui development #carbon design #ibm design #html css

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: carbon-design-system
Source: https://github.com/fefogarcia/approved-skills/tree/main/skills/carbon-design-system
Command: npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system-fefogarcia

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of user interfaces that adhere to IBM's Carbon Design System, ensuring consistency, accessibility, and an enterprise-grade look and feel.

Core Features & Use Cases

Component Implementation: Provides guidance on using Carbon's pre-built HTML classes and React components.
Design Token Application: Details on typography, color themes, spacing, and motion tokens for consistent styling.
Layout and Grid System: Instructions for implementing the Carbon 2x grid system for responsive layouts.
Use Case: Develop a new internal dashboard application for a financial services platform, ensuring it aligns with IBM's enterprise design standards and provides a professional, accessible user experience.

Quick Start

Use the carbon-design-system skill to generate an HTML structure for a primary button with the text 'Submit'.

Frequently Asked Questions about carbon-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a React UI with IBM's Carbon Design System?▼

To build a React UI with IBM's Carbon Design System, you use the @carbon/react package to implement components, design tokens, and grid layouts following enterprise accessibility standards.

Can I use Carbon Design System components with just HTML and CSS?▼

Yes, you can use Carbon Design System components with HTML and CSS by referencing the CDN-based stylesheet, allowing you to generate Carbon-styled interfaces without a full React setup.

What are design tokens in IBM Carbon and how do I apply them?▼

Design tokens in IBM Carbon are predefined variables for typography, color themes, spacing, and motion that you apply to ensure consistent styling across enterprise user interfaces.

Does the Carbon Design System support responsive grid layouts?▼

Yes, the Carbon Design System supports responsive layouts through its 2x grid system, which provides structured columns and breakpoints for building adaptive enterprise web applications.

What is the best way to ensure accessibility when developing enterprise UIs?▼

The best way to ensure accessibility in enterprise UIs is to adhere to the Carbon Design System's pre-built components and accessibility best practices, which provide compliant keyboard navigation and screen reader support.

Do I need React to use the Carbon Design System for enterprise UI development?▼

No, you do not need React for enterprise UI development with the Carbon Design System because it supports both full React project development with @carbon/react and standalone HTML artifact generation using CDN-based CSS.