skills.rest
PersieDaCoder
PersieDaCoderCOMMUNITY
Explore all skills by this author →
GitHub

carbon-design-system

Reference Carbon Design System React components, design tokens, and UI patterns.

Updated Mar 10, 2025
Search Tags:#design system#component library#frontend development#react ui#carbon design#ibm design
One-click install
npx skills add https://github.com/PersieDaCoder/dotfiles --skill carbon-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: carbon-design-system
Source: https://github.com/PersieDaCoder/dotfiles/tree/main/carbon-design-system
Command: npx skills add https://github.com/PersieDaCoder/dotfiles --skill carbon-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and reference for utilizing the Carbon Design System in React applications, simplifying the process of building consistent, accessible, and high-quality user interfaces.

Core Features & Use Cases

  • Component Reference: Detailed information on all Carbon React components, including usage, props, and best practices.
  • Design Tokens: A complete guide to Carbon's design tokens for consistent theming and styling.
  • Patterns & Best Practices: Guidance on common UI patterns and adherence to Carbon's design principles.
  • Use Case: A developer needs to implement a data table with sorting and filtering. They can quickly find the DataTable component in the reference, see its props, and get code examples for implementation.

Quick Start

Install the Carbon Design System React components using npm.

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 React UIs with IBM's Carbon Design System?▼

Carbon Design System provides a comprehensive reference for React components, design tokens, and accessibility guidelines, simplifying the process of building consistent, high-quality user interfaces according to IBM's standards.

How do I implement a data table with sorting using Carbon Design System components?▼

You can build a sortable data table by referencing the DataTable component in the Carbon Design System, which offers detailed props, usage guidelines, and code examples for common patterns like filtering and sorting.

Can I use Carbon Design System tokens for consistent theming in frontend development?▼

Yes, the Carbon Design System includes a complete guide to design tokens, enabling developers to maintain consistent theming and styling across React applications according to IBM's design standards.

Does the Carbon Design System React component library include accessibility guidelines?▼

Yes, the Carbon Design System reference includes accessibility guidelines and best practices, ensuring that the React components you implement are accessible and adhere to IBM's design principles.

What is the best way to find usage and props for React UI components in Carbon Design?▼

The Carbon Design System reference provides detailed information on all React components, including their specific usage, props, and best practices, allowing developers to quickly find implementation details for UI development.

Related Skills

Explore More Software Engineering Skills→
findinfinitelabsfindinfinitelabs

react-typescript-frontend

Build a type-safe Chuukese React frontend with Mantine UI v8 and Vite.

Community
Intermediate
fefogarciafefogarcia
1

carbon-design-system

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

Community
Intermediate
VidyaBodepudiVidyaBodepudi
2

frontend-ui-engineering

Review web components for accessibility, responsiveness, and performance.

Community
Advanced
DeltaFoundry850DeltaFoundry850

tailwind-css

Automate token-driven Tailwind CSS styling for Next.js 16 and React 19 apps.

Community
Advanced