Skill: Design System Library

Category: Implementation Skill

---

Purpose

Help select and implement design systems. For up-to-date library documentation, use Context7.

---

How to Use

"Build a login form with Material UI" use context7
"Create dashboard with Ant Design" use context7
"Style with Tailwind" use context7

Context7 fetches current, version-specific documentation automatically.

---

Design System Selection

systems[10]{system,best_for,platform}:
  Material UI (MUI),Google ecosystem + enterprise,React/Next.js
  Ant Design,Data-heavy enterprise apps,React/Vue
  Tailwind CSS,Utility-first flexibility,All frameworks
  shadcn/ui,Modern React + full control,React/Next.js
  Chakra UI,Accessible + great DX,React/Next.js
  NativeWind,Tailwind for mobile,React Native
  Bootstrap,Quick prototyping,All frameworks
  Mantine,Full-featured + dark mode,React/Next.js
  Radix UI,Headless primitives,React
  Headless UI,Tailwind Labs headless,React/Vue

---

Auto-Detection

Detect from package.json:

detection[8]{package,system}:
  @mui/material,Material UI
  antd,Ant Design
  tailwindcss,Tailwind CSS
  @chakra-ui/react,Chakra UI
  nativewind,NativeWind
  @radix-ui/*,Radix UI
  @headlessui/react,Headless UI
  @mantine/core,Mantine

---

Quick Selection

Use Case	Recommendation
Enterprise	Ant Design, MUI, Mantine
Modern Web	Tailwind + shadcn/ui
Mobile (RN)	NativeWind
Prototyping	Bootstrap, Tailwind

---

For implementation details: Add "use context7" to fetch current library docs.