Add Frontend/UI/UX/Design section with shadcn/ui
- Create dedicated frontend-ui-ux-design directory - Add component libraries reference (shadcn/ui, Radix, MUI, etc.) - Add design systems reference (Material, Carbon, Polaris) - Add CSS frameworks reference (Tailwind, Bootstrap, CSS-in-JS) - Add frontend stacks reference (React, Vue, Next.js, Svelte) - Add UI experts reference (MiniMax, GLM design agents) - Update README with prominent Frontend section - Include shadcn/ui quick start guide - Add recommended 2026 tech stack
This commit is contained in:
uroma
192
frontend-ui-ux-design/README.md
Normal file
192
frontend-ui-ux-design/README.md
Normal file
@@ -0,0 +1,192 @@
|
||||
# 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*
|
||||
Reference in New Issue
Block a user