skills.rest
fefogarcia
fefogarciaCOMMUNITY
Explore all skills by this author →
GitHub

carbon-design-system

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
One-click install
npx skills add https://github.com/fefogarcia/approved-skills --skill carbon-design-system-fefogarcia
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
amano--amano--

web-artifacts-builder

Initialize React, TypeScript, Vite, Tailwind CSS, and shadcn/ui projects and bundle them into a single HTML file.

Community
Advanced
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
try-workstry-works
95

swiss-design

Apply Swiss International Style design principles using Tailwind CSS and IBM Plex Sans.

Community
Intermediate