Build apps with popular design systems - Material UI, Ant Design, Tailwind, shadcn/ui, Chakra UI, NativeWind
Inherits all available tools
Additional assets for this skill
This skill inherits all available tools. When active, it can use any tool Claude has access to.
ant-design.mdbootstrap.mdchakra-ui.mdheadless-ui.mdmantine.mdmaterial-ui.mdnativewind.mdradix-ui.mdshadcn-ui.mdtailwind-css.mdname: design-system-library description: "Build apps with popular design systems - Material UI, Ant Design, Tailwind, shadcn/ui, Chakra UI, NativeWind" autoInvoke: true priority: high triggers:
Category: Implementation Skill Used By: ui-designer, web-reactjs, web-vuejs, web-nextjs, mobile-react-native, web-angular Version: 1.0.0
Enable AI agents to build web and mobile applications using popular design systems and component libraries. Provides patterns, best practices, and implementation guides for each system.
| File | Design System | Platform | Description |
|---|---|---|---|
material-ui.md | Material UI (MUI) | React, Next.js | Google Material Design 3 |
ant-design.md | Ant Design | React, Vue | Enterprise-grade UI library |
tailwind-css.md | Tailwind CSS | All frameworks | Utility-first CSS framework |
shadcn-ui.md | shadcn/ui | React, Next.js | Radix + Tailwind components |
chakra-ui.md | Chakra UI | React, Next.js | Accessible component library |
nativewind.md | NativeWind | React Native | Tailwind for React Native |
bootstrap.md | Bootstrap | All frameworks | Classic CSS framework |
mantine.md | Mantine | React, Next.js | Full-featured component library |
radix-ui.md | Radix UI | React | Headless primitives |
headless-ui.md | Headless UI | React, Vue | Tailwind Labs headless components |
When user requests a UI feature, detect the design system from:
Package.json dependencies:
"@mui/material": "^5.x", // Material UI
"antd": "^5.x", // Ant Design
"tailwindcss": "^3.x", // Tailwind CSS
"@chakra-ui/react": "^2.x", // Chakra UI
"nativewind": "^4.x", // NativeWind
"@radix-ui/react-*": "*", // Radix UI
"@headlessui/react": "^2.x", // Headless UI
"bootstrap": "^5.x", // Bootstrap
"@mantine/core": "^7.x" // Mantine
Config files:
tailwind.config.js → Tailwind CSScomponents.json → shadcn/uinativewind.config.js → NativeWindImport patterns in existing code:
from '@mui/' → Material UIfrom 'antd' → Ant Designfrom '@chakra-ui/' → Chakra UI1. Detect design system (auto or user-specified)
2. Load relevant sub-skill file
3. Apply patterns and conventions
4. Generate code following design system's best practices
Load this skill when user mentions:
User: "Build a login form using Material UI"
→ Load material-ui.md → Follow MUI patterns
User: "Create a dashboard with Ant Design"
→ Load ant-design.md → Use ProComponents
User: "Style this component with Tailwind"
→ Load tailwind-css.md → Apply utility classes
User: "I want to use shadcn for this Next.js project"
→ Load shadcn-ui.md → Generate components
User: "Make this React Native app look modern"
→ Detect or ask → Load nativewind.md or react-native-paper.md
Load sub-skills as needed for detailed implementation guidance.