# Frontend / UI / UX / Design

Complete resource hub for frontend development, user interface design, user experience, and visual design.

---

## 📁 Directory Structure

```
frontend-ui-ux-design/
├── README.md                    # This file - Index & Quick Start
├── component-libraries/         # UI component libraries (shadcn/ui, etc.)
├── design-systems/              # Design systems & tokens
├── css-frameworks/              # CSS frameworks (Tailwind, etc.)
├── frontend-stacks/             # Technology stacks (React, Vue, etc.)
├── ui-experts/                  # AI design experts (MiniMax, GLM)
└── visual-tools/                # Visual generation tools
```

---

## 🎯 Quick Navigation

| Category | Description | Key Resources |
|----------|-------------|---------------|
| **[Component Libraries](./component-libraries/)** | UI components | shadcn/ui, Radix, MUI, Chakra |
| **[Design Systems](./design-systems/)** | Design patterns | Material, Carbon, Polaris |
| **[CSS Frameworks](./css-frameworks/)** | Styling solutions | Tailwind, Bootstrap, CSS-in-JS |
| **[Frontend Stacks](./frontend-stacks/)** | Technology choices | React, Vue, Next.js, Svelte |
| **[UI Experts](./ui-experts/)** | AI design agents | MiniMax, GLM, MCP tools |

---

## 🚀 Quick Start Guides

### Building a New Project

```
1. Choose Stack        → frontend-stacks/
2. Choose CSS          → css-frameworks/ (Tailwind recommended)
3. Choose Components   → component-libraries/ (shadcn/ui recommended)
4. Apply Design System → design-systems/
5. Use AI for Help     → ui-experts/
```

### Recommended Stack (2026)

| Layer | Technology | Why |
|-------|------------|-----|
| **Framework** | Next.js 15/16 | Full-stack, SSR, App Router |
| **Styling** | Tailwind CSS 4 | Utility-first, tiny bundle |
| **Components** | shadcn/ui | Copy-paste, accessible |
| **Language** | TypeScript | Type safety |
| **State** | Zustand | Simple, performant |
| **Data** | TanStack Query | Server state |
| **Forms** | React Hook Form | Performant forms |
| **Auth** | NextAuth.js | Authentication |

### Quick Setup Command

```bash
npx create-next-app@latest my-app --typescript --tailwind --app --eslint
cd my-app
npx shadcn@latest init
npx shadcn@latest add button card dialog form input
```

---

## 🎨 Design Intelligence

### UI/UX Pro Max Skill

Our comprehensive design skill provides:

- **50+ Design Styles** - Glassmorphism, Neumorphism, etc.
- **97 Color Palettes** - Curated color combinations
- **57 Font Pairings** - Typography combinations
- **99 UX Guidelines** - Accessibility, performance
- **25 Chart Types** - Data visualization
- **9 Tech Stacks** - React, Vue, Svelte, Flutter, etc.

```bash
# Usage in Claude Code
# Auto-triggers on: design, build, create, implement UI/UX
```

Location: `skills/external/ui-ux-pro-max/SKILL.md`

---

## 🤖 AI-Powered Design

### Visual Generation

| Task | Tool | Access |
|------|------|--------|
| **Logo Design** | MiniMax logo_generation | `minimax-experts` skill |
| **Icon Creation** | MiniMax icon_generation | `minimax-experts` skill |
| **Image Generation** | GLM image_generation | `glm-skills` skill |
| **Video Creation** | GLM video_generation | `glm-skills` skill |
| **UI to Code** | ui_to_artifact MCP | Built-in tool |

### Screenshot to Code

```bash
# Convert UI mockup to React code
ui_to_artifact(
  image_source="mockup.png",
  output_type="code",
  prompt="Generate React + Tailwind code"
)
```

---

## 📊 Component Libraries Comparison

| Library | Framework | Approach | Accessibility | Bundle |
|---------|-----------|----------|---------------|--------|
| **shadcn/ui** | React | Copy-paste | ✅ Radix | ~10KB |
| **Radix UI** | React | Headless | ✅ Excellent | ~20KB |
| **MUI** | React | Component | ✅ Good | ~300KB |
| **Chakra** | React | Component | ✅ Good | ~200KB |
| **Mantine** | React | Component | ✅ Good | ~250KB |
| **Radix Vue** | Vue | Headless | ✅ Excellent | ~20KB |
| **PrimeVue** | Vue | Component | ✅ Good | ~300KB |
| **shadcn-svelte** | Svelte | Copy-paste | ✅ Radix | ~10KB |

---

## 🎯 When to Use What

### For Landing Pages
```
Stack: Next.js + Tailwind + shadcn/ui
Design: ui-ux-pro-max (use --design-system flag)
AI Help: MiniMax landing_page expert
```

### For Dashboards
```
Stack: Next.js + Tailwind + shadcn/ui + Recharts
Design: ui-ux-pro-max (bento grid style)
Components: data-table, chart, sidebar
```

### For Mobile Apps
```
Stack: React Native + Tamagui OR Flutter
Design: Platform guidelines (iOS/Android)
Components: Platform-specific libraries
```

### For E-commerce
```
Stack: Next.js + Tailwind + shadcn/ui + Stripe
Design: Clean, trustworthy, fast checkout
Components: product cards, cart, checkout form
```

---

## 🔗 Related Resources

### In This Repository
- `skills/external/ui-ux-pro-max/` - Design intelligence skill
- `skills/zai-tooling-reference/` - Next.js patterns
- `skills/minimax-experts/` - AI expert catalog
- `skills/glm-skills/` - Multimodal AI skills
- `codebases/z-ai-tooling/` - Full Next.js project example

### External Resources
- [shadcn/ui](https://ui.shadcn.com) - Component library
- [Tailwind CSS](https://tailwindcss.com) - CSS framework
- [Next.js](https://nextjs.org) - React framework
- [Radix UI](https://radix-ui.com) - Accessible primitives

---

## 📝 Contributing

To add new design resources:

1. Create files in appropriate subdirectory
2. Follow existing README format
3. Include practical examples
4. Link to related skills

---

*Last updated: 2026-02-13*