Stats
Actions
Tags
From carbon-design-system
IBM Carbon `@carbon/icons` and framework wrappers (`@carbon/icons-react`, `@carbon/icons-vue`) guidance. Use for picking, importing, and applying actionable UI icons — Add, Trash, Search, Settings, ChevronDown, Edit — including icon-only IconButton accessibility (aria-label, target size), sizing (16/20/24px), tree-shakable import paths, and v10→v11 import path changes. Skip for storytelling/illustration assets (carbon-pictograms) or non-Carbon icon libraries (lucide, heroicons, feather).
How this skill is triggered — by the user, by Claude, or both
Slash command
/carbon-design-system:carbon-iconsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use this skill for Carbon icon selection and implementation.
Use this skill for Carbon icon selection and implementation.
references/source-index.md to locate official icon usage and code guidance.references/.carbon-react when using @carbon/icons-react inside React components.carbon-pictograms when the visual asset is illustrative storytelling rather than an icon.references/source-index.md; it maps official icon pages to exact canonical MDX paths.usage.mdx for icon selection, semantics, sizing, and accessibility guidance.code.mdx for package and implementation details.rg -n search command shown in the index.Use this skill for:
@carbon/icons asset usage.@carbon/icons-react usage.Do not use this skill for broader component behavior unless the issue is icon-specific, and do not use it for pictogram storytelling guidance.
references/source-index.md: source files and notes for Carbon icon and pictogram guidance.references/: topic-first Carbon references, organized as <topic>/guidelines/ and <topic>/specs/.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub leesum-in/carbon-design-system-skills --plugin carbon-design-system