GLM-Tools-Skills-Agents/frontend-ui-ux-design

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	UI components	shadcn/ui, Radix, MUI, Chakra
Design Systems	Design patterns	Material, Carbon, Polaris
CSS Frameworks	Styling solutions	Tailwind, Bootstrap, CSS-in-JS
Frontend Stacks	Technology choices	React, Vue, Next.js, Svelte
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

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.

# 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

# 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 - Component library
• Tailwind CSS - CSS framework
• Next.js - React framework
• Radix UI - 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