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
2026-02-13 11:26:26 +00:00
parent b60638f0a3
commit cc60c8bdb4
7 changed files with 1431 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 | **Hooks** | 23 |
 | **MCP Integrations** | 9 |
 | **Codebases** | 1 |
-| **Total Files** | 500+ |
+| **Total Files** | 1000+ |

 ---

@@ -57,6 +57,7 @@ GLM-Tools-Skills-Agents/
 ├── mcp-configs/                         # MCP server configs
 ├── codebases/z-ai-tooling/              # Full Next.js 16 project
 ├── original-docs/                       # Source documentation
+├── frontend-ui-ux-design/       # Frontend/UI/UX resources (NEW)
 └── registries/                          # Skill registries
 ```

@@ -94,6 +95,78 @@ From obra/superpowers, ui-ux-pro-max, claude-codex-settings:

 ---

+
+---
+
+## 🎨 Frontend / UI / UX / Design
+
+**Dedicated section for all frontend development and design resources.**
+
+### Directory: \`frontend-ui-ux-design/\`
+
+| Subdirectory | Content |
+|--------------|---------|
+| **[component-libraries/](frontend-ui-ux-design/component-libraries/)** | UI component libraries (shadcn/ui, Radix, MUI) |
+| **[design-systems/](frontend-ui-ux-design/design-systems/)** | Design systems & tokens |
+| **[css-frameworks/](frontend-ui-ux-design/css-frameworks/)** | CSS frameworks (Tailwind, Bootstrap) |
+| **[frontend-stacks/](frontend-ui-ux-design/frontend-stacks/)** | Technology stacks (React, Vue, Next.js) |
+| **[ui-experts/](frontend-ui-ux-design/ui-experts/)** | AI design experts (MiniMax, GLM) |
+
+### Component Libraries
+
+**Primary: [shadcn/ui](https://ui.shadcn.com)** - Copy & paste React components with Tailwind CSS
+
+| Library | Framework | Type | URL |
+|---------|-----------|------|-----|
+| **shadcn/ui** | React | Copy-paste | https://ui.shadcn.com |
+| **Radix UI** | React | Headless | https://radix-ui.com |
+| **MUI** | React | Components | https://mui.com |
+| **Chakra UI** | React | Components | https://chakra-ui.com |
+| **Mantine** | React | Full-featured | https://mantine.dev |
+| **shadcn-vue** | Vue | Copy-paste | https://www.shadcn-vue.com |
+| **shadcn-svelte** | Svelte | Copy-paste | https://www.shadcn-svelte.com |
+
+### Recommended Stack (2026)
+
+\`\`\`
+Framework:   Next.js 15/16
+Styling:     Tailwind CSS 4
+Components:  shadcn/ui
+Language:    TypeScript
+State:       Zustand
+Data:        TanStack Query
+Forms:       React Hook Form
+Auth:        NextAuth.js
+\`\`\`
+
+### Quick Start
+
+\`\`\`bash
+npx create-next-app@latest my-app --typescript --tailwind --app
+cd my-app
+npx shadcn@latest init
+npx shadcn@latest add button card dialog form input
+\`\`\`
+
+### AI Design Experts
+
+| Expert | Platform | Use Case |
+|--------|----------|----------|
+| \`logo_generation\` | MiniMax | Logo design |
+| \`icon_generation\` | MiniMax | Icon creation |
+| \`landing_page\` | MiniMax | Landing page design |
+| \`image_generation\` | GLM | Image generation |
+| \`video_generation\` | GLM | Video creation |
+| \`ui_to_artifact\` | MCP | Screenshot to code |
+
+### Related Skills
+
+- **ui-ux-pro-max** (\`skills/external/ui-ux-pro-max/\`) - 50 styles, 97 palettes, 57 font pairings
+- **zai-tooling-reference** (\`skills/zai-tooling-reference/\`) - Next.js patterns
+- **minimax-experts** (\`skills/minimax-experts/\`) - 40 AI experts
+- **glm-skills** (\`skills/glm-skills/\`) - Multimodal AI
+
+---
 ## Agents Catalog (31)

 ### From claude-codex-settings (8)
@@ -224,6 +297,7 @@ npx skills add <skill-name>
 | 2026-02-13 | Added community repos: jat, pi-mono, picoclaw, dyad, dexter |
 | 2026-02-13 | Added 91 leaked system prompts (Anthropic, OpenAI, Google, xAI) |
 | 2026-02-13 | Added toad agent configs, JAT hooks, pi-mono prompts |
+| 2026-02-13 | Added Frontend/UI/UX/Design section (shadcn/ui, design systems, CSS frameworks, stacks) |

 ---

--- a/frontend-ui-ux-design/README.md
+++ b/frontend-ui-ux-design/README.md
@@ -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*
--- a/frontend-ui-ux-design/component-libraries/README.md
+++ b/frontend-ui-ux-design/component-libraries/README.md
@@ -0,0 +1,217 @@
+# UI Component Libraries
+
+Comprehensive collection of UI component libraries for rapid frontend development.
+
+---
+
+## 🎯 Shadcn/UI (Primary Recommendation)
+
+**URL:** https://ui.shadcn.com/
+**Stack:** React, Next.js, Tailwind CSS
+**License:** MIT
+
+### Why Shadcn/UI
+- **Copy & Paste** - Not a npm package, you own the code
+- **Radix UI Primitives** - Accessible by default
+- **Tailwind CSS** - Utility-first styling
+- **Customizable** - Full control over components
+- **Beautiful Defaults** - Modern, clean design
+
+### Installation
+```bash
+npx shadcn@latest init
+```
+
+### Available Components (50+)
+| Component | Description |
+|-----------|-------------|
+| `accordion` | Vertically stacked set of interactive headings |
+| `alert` | Displays a callout for user attention |
+| `alert-dialog` | Modal dialog that interrupts the user |
+| `aspect-ratio` | Displays content within a desired ratio |
+| `avatar` | Image element with a fallback |
+| `badge` | Displays a badge or label |
+| `breadcrumb` | Shows navigation path |
+| `button` | Triggers an action or event |
+| `calendar` | Date field component |
+| `card` | Displays content in a card format |
+| `carousel` | A carousel with motion and gestures |
+| `chart` | Area, Bar, Line charts with Recharts |
+| `checkbox` | Toggle for binary options |
+| `collapsible` | Interactive component to show/hide content |
+| `combobox` | Autocomplete input with a listbox |
+| `command` | Command menu for searching actions |
+| `context-menu` | Menu triggered by right-click |
+| `data-table` | Table with sorting, filtering, pagination |
+| `date-picker` | Date picker with range support |
+| `dialog` | Modal dialog |
+| `drawer` | A drawer that slides from edge |
+| `dropdown-menu` | Menu activated by a trigger |
+| `form` | Form building with react-hook-form |
+| `hover-card` | Card that appears on hover |
+| `input` | Text input field |
+| `input-otp` | One-time password input |
+| `label` | Label for form controls |
+| `menubar` | Horizontal menu bar |
+| `navigation-menu` | Collection of navigation links |
+| `pagination` | Navigation between pages |
+| `popover` | Floating content portal |
+| `progress` | Progress indicator |
+| `radio-group` | Set of checkable buttons |
+| `resizable` | Resizable panel groups |
+| `scroll-area` | Custom scrollbar container |
+| `select` | Displays a list of options |
+| `separator` | Visual divider |
+| `sheet` | Extends the Dialog component |
+| `sidebar` | Composable sidebar component |
+| `skeleton` | Placeholder for loading content |
+| `slider` | Input for selecting values |
+| `sonner` | Toast notifications |
+| `switch` | Toggle between states |
+| `table` | Displays data in rows and columns |
+| `tabs` | Set of layered sections |
+| `textarea` | Multi-line text input |
+| `toast` | Brief notifications |
+| `toggle` | Two-state button |
+| `toggle-group` | Group of toggle buttons |
+| `tooltip` | Popup displaying info |
+
+### Usage Example
+```bash
+# Add specific components
+npx shadcn@latest add button card dialog form input
+
+# Add all components
+npx shadcn@latest add --all
+```
+
+---
+
+## 🎨 Alternative Component Libraries
+
+### React Ecosystem
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **Radix UI** | https://radix-ui.com | Unstyled, accessible primitives (shadcn base) |
+| **MUI (Material UI)** | https://mui.com | Google Material Design components |
+| **Chakra UI** | https://chakra-ui.com | Simple, modular, accessible |
+| **Mantine** | https://mantine.dev | Full-featured React components |
+| **Ant Design** | https://ant.design | Enterprise-grade UI design |
+| **NextUI** | https://nextui.org | Beautiful, fast, modern React UI |
+| **React Aria** | https://react-spectrum.adobe.com/react-aria | Adobe accessible primitives |
+| **Headless UI** | https://headlessui.com | Unstyled UI components (Tailwind Labs) |
+| **Park UI** | https://park-ui.com | Multi-framework components |
+| **Ark UI** | https://ark-ui.com | Headless components for JS frameworks |
+
+### Vue Ecosystem
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **Radix Vue** | https://radix-vue.com | Vue port of Radix UI |
+| **PrimeVue** | https://primevue.org | Comprehensive Vue UI library |
+| **Vuetify** | https://vuetifyjs.com | Material Design for Vue |
+| **Naive UI** | https://naiveui.com | Vue 3 component library |
+| **Element Plus** | https://element-plus.org | Vue 3 UI framework |
+| **Quasar** | https://quasar.dev | Vue.js framework for all platforms |
+| **Shadcn-vue** | https://www.shadcn-vue.com | Vue port of shadcn/ui |
+
+### Svelte Ecosystem
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **Shadcn-svelte** | https://www.shadcn-svelte.com | Svelte port of shadcn/ui |
+| **Skeleton** | https://www.skeleton.dev | Svelte UI toolkit |
+| **Melt UI** | https://melt-ui.com | Svelte component library |
+| **daisyUI** | https://daisyui.com | Tailwind Components (works with Svelte) |
+
+### Angular Ecosystem
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **Angular Material** | https://material.angular.io | Material Design for Angular |
+| **PrimeNG** | https://primeng.org | Angular UI component library |
+| **NG-ZORRO** | https://ng.ant.design | Ant Design for Angular |
+
+---
+
+## 📱 Mobile Component Libraries
+
+### React Native
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **NativeBase** | https://nativebase.io | Universal component library |
+| **React Native Paper** | https://callstack.github.io/react-native-paper | Material Design for RN |
+| **Tamagui** | https://tamagui.dev | Universal UI kit |
+| **Gluestack UI** | https://gluestack.io | Universal UI components |
+| **Shadcn/ui RN** | https://github.com/mrzachnugent/react-native-shadcn-ui | RN port of shadcn |
+
+### Flutter
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **Material Design** | Built-in | Google's Material Design |
+| **Cupertino** | Built-in | iOS-style widgets |
+| **Flutter Animate** | https://pub.dev/packages/flutter_animate | Animation library |
+
+---
+
+## 🧩 CSS Component Libraries (No JS)
+
+| Library | URL | Description |
+|---------|-----|-------------|
+| **daisyUI** | https://daisyui.com | Tailwind CSS Components |
+| **Flowbite** | https://flowbite.com | Tailwind CSS components |
+| **HyperUI** | https://hyperui.dev | Free Tailwind components |
+| **Tailwind UI** | https://tailwindui.com | Official Tailwind components |
+| **Preline UI** | https://preline.co | Tailwind CSS components |
+| **Sailboat UI** | https://sailboatui.com | Tailwind CSS component library |
+| **Pines UI** | https://devdojo.com/pines | Alpine.js + Tailwind UI |
+
+---
+
+## 🎯 Selection Guide
+
+### Choose shadcn/ui when:
+- Using React/Next.js with Tailwind CSS
+- Want full code ownership
+- Need accessible components
+- Prefer copy-paste over npm packages
+- Want beautiful defaults with customization
+
+### Choose MUI when:
+- Need Material Design compliance
+- Want comprehensive out-of-the-box components
+- Building enterprise applications
+- Need theming support
+
+### Choose Chakra UI when:
+- Want simple, composable components
+- Need built-in accessibility
+- Prefer styled-system approach
+- Building accessible applications quickly
+
+### Choose Mantine when:
+- Need full-featured component library
+- Want excellent TypeScript support
+- Need hooks library included
+- Building complex applications
+
+### Choose Radix UI when:
+- Building custom design system
+- Need maximum accessibility
+- Want complete styling control
+- Creating component library
+
+---
+
+## 🔗 Related Skills
+
+- **ui-ux-pro-max** - Design intelligence for web/mobile
+- **zai-tooling-reference** - Next.js, React, Tailwind patterns
+- **frontend-developer** agent - UI implementation specialist
+
+---
+
+*Last updated: 2026-02-13*
--- a/frontend-ui-ux-design/css-frameworks/README.md
+++ b/frontend-ui-ux-design/css-frameworks/README.md
@@ -0,0 +1,284 @@
+# CSS Frameworks Reference
+
+Comprehensive guide to CSS frameworks, utilities, and styling approaches.
+
+---
+
+## 🚀 Utility-First Frameworks
+
+### Tailwind CSS (Primary Recommendation)
+
+**URL:** https://tailwindcss.com
+**Version:** 4.x (2025)
+**License:** MIT
+
+#### Why Tailwind CSS
+- **Utility-First** - Build designs directly in markup
+- **No Runtime** - Purged CSS is tiny (~10KB)
+- **Highly Customizable** - Extend everything
+- **Dark Mode** - Built-in dark mode support
+- **Responsive** - Mobile-first breakpoints
+- **JIT Compiler** - On-demand style generation
+
+#### Installation
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init -p
+```
+
+#### Configuration
+```javascript
+// tailwind.config.js
+export default {
+  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        brand: '#3b82f6',
+      },
+    },
+  },
+  plugins: [],
+}
+```
+
+#### Core Concepts
+
+| Concept | Syntax | Example |
+|---------|--------|---------|
+| **Spacing** | `{property}-{size}` | `p-4`, `mt-8`, `mx-auto` |
+| **Colors** | `{property}-{color}-{shade}` | `bg-blue-500`, `text-gray-100` |
+| **Typography** | `text-{size}`, `font-{weight}` | `text-xl`, `font-bold` |
+| **Flexbox** | `flex`, `items-{align}`, `justify-{align}` | `flex items-center justify-between` |
+| **Grid** | `grid`, `grid-cols-{n}` | `grid grid-cols-3 gap-4` |
+| **Responsive** | `{breakpoint}:{class}` | `md:flex`, `lg:grid-cols-4` |
+| **States** | `{state}:{class}` | `hover:bg-blue-600`, `focus:ring-2` |
+| **Dark Mode** | `dark:{class}` | `dark:bg-gray-900` |
+
+---
+
+### Other Utility Frameworks
+
+| Framework | URL | Description |
+|-----------|-----|-------------|
+| **UnoCSS** | https://unocss.dev | Instant on-demand CSS |
+| **Windi CSS** | https://windicss.org | Tailwind alternative (EOL) |
+| **Tachyons** | https://tachyons.io | Functional CSS |
+| **Atomic CSS** | https://acss.io | Atomized CSS |
+
+---
+
+## 🎨 Component-Based Frameworks
+
+### Bootstrap
+
+**URL:** https://getbootstrap.com
+**Version:** 5.x
+
+```bash
+npm install bootstrap
+```
+
+```html
+<button class="btn btn-primary">Primary</button>
+<div class="card">
+  <div class="card-body">Content</div>
+</div>
+```
+
+### Foundation
+
+**URL:** https://get.foundation
+**Version:** 6.x
+
+```bash
+npm install foundation-sites
+```
+
+### Bulma
+
+**URL:** https://bulma.io
+
+```bash
+npm install bulma
+```
+
+```html
+<button class="button is-primary">Primary</button>
+<div class="box">Content</div>
+```
+
+---
+
+## 🔧 CSS-in-JS Libraries
+
+### Styled Components
+
+**URL:** https://styled-components.com
+
+```bash
+npm install styled-components
+```
+
+```javascript
+import styled from 'styled-components';
+
+const Button = styled.button`
+  background: #3b82f6;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+
+  &:hover {
+    background: #2563eb;
+  }
+`;
+```
+
+### Emotion
+
+**URL:** https://emotion.sh
+
+```bash
+npm install @emotion/react @emotion/styled
+```
+
+```javascript
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+const style = css`
+  color: hotpink;
+`;
+
+const Button = styled.button`
+  background: #3b82f6;
+  padding: 0.5rem 1rem;
+`;
+```
+
+### Vanilla Extract
+
+**URL:** https://vanilla-extract.style
+
+```bash
+npm install @vanilla-extract/css
+```
+
+```typescript
+// styles.css.ts
+import { style } from '@vanilla-extract/css';
+
+export const button = style({
+  background: '#3b82f6',
+  padding: '0.5rem 1rem',
+});
+```
+
+### Stitches
+
+**URL:** https://stitches.dev
+
+```bash
+npm install @stitches/react
+```
+
+---
+
+## 🌊 CSS Reset/Normalize
+
+### Modern CSS Reset
+
+```css
+/* Josh Comeau's reset */
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img, picture, video, canvas, svg {
+  display: block;
+  max-width: 100%;
+}
+
+input, button, textarea, select {
+  font: inherit;
+}
+
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+```
+
+### Normalize.css
+
+```bash
+npm install normalize.css
+```
+
+### Preflight (Tailwind)
+
+Built into Tailwind CSS - automatically normalizes styles.
+
+---
+
+## 📊 Comparison Table
+
+| Framework | Approach | Bundle Size | Learning Curve | Customization |
+|-----------|----------|-------------|----------------|---------------|
+| **Tailwind** | Utility-first | ~10KB | Medium | Excellent |
+| **Bootstrap** | Component-based | ~150KB | Easy | Good |
+| **Styled** | CSS-in-JS | ~12KB | Medium | Excellent |
+| **Emotion** | CSS-in-JS | ~8KB | Medium | Excellent |
+| **CSS Modules** | Scoped CSS | 0 | Easy | Good |
+| **Vanilla Extract** | Zero-runtime | 0 | Medium | Excellent |
+
+---
+
+## 🎯 Selection Guide
+
+### Choose Tailwind CSS when:
+- Want rapid prototyping
+- Prefer utility-first approach
+- Need small production bundle
+- Building with React/Vue/Next.js
+- Want dark mode out of box
+
+### Choose CSS-in-JS when:
+- Building component library
+- Need dynamic styling
+- Want scoped styles
+- Using React ecosystem
+- Need theme switching
+
+### Choose Bootstrap when:
+- Need quick start
+- Want pre-built components
+- Building traditional websites
+- Team is familiar with it
+
+### Choose CSS Modules when:
+- Want scoped styles without JS
+- Building with Next.js (built-in)
+- Prefer standard CSS syntax
+- Don't need runtime theming
+
+---
+
+## 🔗 Related Skills
+
+- **ui-ux-pro-max** - Design guidelines
+- **component-libraries** - UI components
+- **zai-tooling-reference** - Tailwind + Next.js patterns
+
+---
+
+*Last updated: 2026-02-13*
--- a/frontend-ui-ux-design/design-systems/README.md
+++ b/frontend-ui-ux-design/design-systems/README.md
@@ -0,0 +1,204 @@
+# Design Systems Reference
+
+Comprehensive guide to design systems, pattern libraries, and design tokens.
+
+---
+
+## 🎨 Popular Design Systems
+
+### Enterprise Design Systems
+
+| System | Company | URL | Key Features |
+|--------|---------|-----|--------------|
+| **Material Design** | Google | https://m3.material.io | 3D effects, motion, color system |
+| **Apple Human Interface** | Apple | https://developer.apple.com/design | iOS, macOS, watchOS guidelines |
+| **Fluent Design** | Microsoft | https://fluent2.microsoft.design | Depth, light, motion, material |
+| **Carbon** | IBM | https://carbondesignsystem.com | Open source, enterprise-grade |
+| **Polaris** | Shopify | https://polaris.shopify.com | E-commerce focused |
+| **Lightning** | Salesforce | https://www.lightningdesignsystem.com | CRM components |
+| **Spectrum** | Adobe | https://spectrum.adobe.com | Creative tools design |
+| **Evergreen** | Segment | https://evergreen.segment.com | React components |
+| **Gestalt** | Pinterest | https://gestalt.pinterest.systems | Pinboard UI patterns |
+| **Primer** | GitHub | https://primer.style | Developer-focused UI |
+
+### Startup/SaaS Design Systems
+
+| System | Company | URL | Key Features |
+|--------|---------|-----|--------------|
+| **Chakra UI** | Chakra | https://chakra-ui.com | Accessible, composable |
+| **Mantine** | Mantine | https://mantine.dev | Full-featured hooks |
+| **Radix Themes** | Radix | https://radix-ui.com/themes | Accessible primitives |
+| **Circuit UI** | SumUp | https://circuit.sumup.com | Fintech focused |
+| **Seed** | Intercom | https://seed.intercom.com | Conversation UI |
+| **Canvas** | HubSpot | https://canvas.hubspot.com | Marketing tools |
+| **Base Web** | Uber | https://baseweb.design | Transportation UI |
+| **Atlas** | Atlassian | https://atlassian.design | Collaboration tools |
+
+---
+
+## 🧱 Design Tokens
+
+Design tokens are the visual design atoms of the design system.
+
+### Token Categories
+
+| Category | Examples | Purpose |
+|----------|----------|---------|
+| **Colors** | primary, secondary, success, error | Brand & semantic colors |
+| **Typography** | font-family, font-size, line-height | Text styling |
+| **Spacing** | space-xs, space-md, space-lg | Layout gaps |
+| **Sizing** | size-sm, size-md, size-lg | Component sizes |
+| **Borders** | border-radius, border-width | Edge styling |
+| **Shadows** | shadow-sm, shadow-md, shadow-lg | Elevation |
+| **Animation** | duration, easing, delay | Motion timing |
+| **Breakpoints** | sm, md, lg, xl | Responsive design |
+
+### Token Tools
+
+| Tool | URL | Description |
+|------|-----|-------------|
+| **Style Dictionary** | https://amzn.github.io/style-dictionary | Token management |
+| **Theo** | https://github.com/salesforce-ux/theo | Salesforce token tool |
+| **Diez** | https://diez.org | Design language framework |
+| **Figma Tokens** | https://www.figmatokens.com | Figma plugin |
+| **Token Transformer** | https://tokens.studio | Design token studio |
+
+---
+
+## 🎯 Design Patterns
+
+### Layout Patterns
+
+| Pattern | Use Case | Description |
+|---------|----------|-------------|
+| **Holy Grail** | General | Header, footer, sidebar, main content |
+| **F-Pattern** | Content-heavy | Eye-tracking optimized layout |
+| **Z-Pattern** | Landing pages | Visual hierarchy flow |
+| **Bento Grid** | Dashboards | Card-based modular layout |
+| **Sidebar Navigation** | Apps | Persistent side menu |
+| **Top Navigation** | Marketing sites | Horizontal nav bar |
+
+### Component Patterns
+
+| Pattern | Use Case | Description |
+|---------|----------|-------------|
+| **Card** | Content preview | Container with image, title, actions |
+| **Modal** | Focused action | Overlay dialog for interactions |
+| **Drawer** | Side content | Slide-out panel |
+| **Toast** | Notifications | Brief, auto-dismiss messages |
+| **Skeleton** | Loading states | Content placeholder |
+| **Infinite Scroll** | Long lists | Continuous content loading |
+| **Accordion** | FAQs | Expandable content sections |
+
+---
+
+## 🎨 Style Systems
+
+### Visual Styles
+
+| Style | Key Characteristics | Best For |
+|-------|---------------------|----------|
+| **Flat Design** | No shadows, minimal, clean | Modern apps |
+| **Material Design** | Paper-like, elevation, shadows | Android, enterprise |
+| **Glassmorphism** | Frosted glass, blur, transparency | Modern UI, iOS |
+| **Neumorphism** | Soft shadows, extruded | Experimental, tactile |
+| **Claymorphism** | 3D clay-like, colorful | Playful, approachable |
+| **Skeuomorphism** | Realistic textures | Traditional, familiar |
+| **Minimalism** | Clean, lots of whitespace | SaaS, professional |
+| **Brutalism** | Raw, bold, unconventional | Creative, artistic |
+
+---
+
+## 📱 Responsive Design
+
+### Breakpoints Standard
+
+| Name | Size | Use Case |
+|------|------|----------|
+| xs | 0-639px | Mobile phones |
+| sm | 640px+ | Large phones |
+| md | 768px+ | Tablets |
+| lg | 1024px+ | Laptops |
+| xl | 1280px+ | Desktops |
+| 2xl | 1536px+ | Large screens |
+
+### Mobile-First Approach
+
+```css
+/* Base styles for mobile */
+.element {
+  padding: 1rem;
+}
+
+/* Tablet and up */
+@media (min-width: 768px) {
+  .element {
+    padding: 2rem;
+  }
+}
+
+/* Desktop and up */
+@media (min-width: 1024px) {
+  .element {
+    padding: 3rem;
+  }
+}
+```
+
+---
+
+## ♿ Accessibility Guidelines
+
+### WCAG 2.1 Levels
+
+| Level | Description | Requirements |
+|-------|-------------|--------------|
+| A | Minimum | Basic accessibility |
+| AA | Standard | Most organizations |
+| AAA | Enhanced | Highest accessibility |
+
+### Key Accessibility Rules
+
+1. **Color Contrast** - 4.5:1 for normal text, 3:1 for large text
+2. **Focus States** - Visible focus indicators
+3. **Keyboard Navigation** - All features accessible via keyboard
+4. **Screen Readers** - Proper ARIA labels and roles
+5. **Alt Text** - Descriptive image alternatives
+6. **Form Labels** - Associated labels for all inputs
+7. **Motion** - Respect prefers-reduced-motion
+
+---
+
+## 🔧 Design System Tools
+
+### Documentation Tools
+
+| Tool | URL | Description |
+|------|-----|-------------|
+| **Storybook** | https://storybook.js.org | Component documentation |
+| **Docz** | https://www.docz.site | MDX-based docs |
+| **Docusaurus** | https://docusaurus.io | Documentation sites |
+| **Zeroheight** | https://zeroheight.com | Design system docs |
+| **Specify** | https://specifyapp.com | Design token platform |
+
+### Design Tools
+
+| Tool | URL | Description |
+|------|-----|-------------|
+| **Figma** | https://figma.com | Collaborative design |
+| **Sketch** | https://sketch.com | macOS design tool |
+| **Adobe XD** | https://adobe.com/products/xd | Prototyping |
+| **Framer** | https://framer.com | Interactive design |
+
+---
+
+## 🔗 Related Skills
+
+- **ui-ux-pro-max** - Complete design intelligence
+- **component-libraries** - UI component collections
+- **css-frameworks** - CSS utilities
+- **frontend-stacks** - Technology stacks
+
+---
+
+*Last updated: 2026-02-13*
--- a/frontend-ui-ux-design/frontend-stacks/README.md
+++ b/frontend-ui-ux-design/frontend-stacks/README.md
@@ -0,0 +1,279 @@
+# Frontend Technology Stacks
+
+Complete guide to frontend frameworks, meta-frameworks, and technology stacks.
+
+---
+
+## ⚛️ React Ecosystem
+
+### React 19 (Latest)
+
+**URL:** https://react.dev
+**License:** MIT
+
+#### Key Features (React 19)
+- **Server Components** - Built-in RSC support
+- **Actions** - Form handling simplified
+- **use() Hook** - Read resources in render
+- **useOptimistic** - Optimistic UI updates
+- **Document Metadata** - Built-in SEO support
+- **Asset Loading** - Suspense-aware loading
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+```
+
+### Next.js 15/16 (Meta-Framework)
+
+**URL:** https://nextjs.org
+**License:** MIT
+
+#### Key Features
+- **App Router** - File-based routing with layouts
+- **Server Components** - React Server Components
+- **Server Actions** - Form submissions & mutations
+- **Image Optimization** - Automatic image optimization
+- **API Routes** - Backend API endpoints
+- **Middleware** - Request/response interception
+
+```bash
+npx create-next-app@latest my-app --typescript --tailwind --app
+```
+
+#### Project Structure
+```
+app/
+├── layout.tsx          # Root layout
+├── page.tsx            # Home page
+├── (auth)/             # Route group
+│   ├── login/page.tsx
+│   └── register/page.tsx
+├── dashboard/
+│   ├── layout.tsx      # Nested layout
+│   └── page.tsx
+└── api/
+    └── users/route.ts  # API endpoint
+```
+
+### Remix (Meta-Framework)
+
+**URL:** https://remix.run
+
+```bash
+npx create-remix@latest my-app
+```
+
+### Vite (Build Tool)
+
+**URL:** https://vitejs.dev
+
+```bash
+npm create vite@latest my-app -- --template react-ts
+```
+
+---
+
+## 💚 Vue Ecosystem
+
+### Vue 3
+
+**URL:** https://vuejs.org
+**License:** MIT
+
+#### Key Features
+- **Composition API** - Reactive composition functions
+- **Script Setup** - Simplified component syntax
+- **Teleport** - Render DOM outside component tree
+- **Suspense** - Async component handling
+- **Better TypeScript** - Full type inference
+
+```bash
+npm create vue@latest my-app
+```
+
+### Nuxt 3 (Meta-Framework)
+
+**URL:** https://nuxt.com
+
+```bash
+npx nuxi@latest init my-app
+```
+
+#### Project Structure
+```
+app/
+├── app.vue             # Main component
+├── pages/              # File-based routing
+│   ├── index.vue
+│   └── about.vue
+├── layouts/            # Layout components
+├── components/         # Auto-imported components
+├── composables/        # Auto-imported composables
+└── server/
+    └── api/            # API routes
+```
+
+---
+
+## 🧡 Svelte Ecosystem
+
+### Svelte 5
+
+**URL:** https://svelte.dev
+**License:** MIT
+
+#### Key Features (Svelte 5)
+- **Runes** - New reactivity system ($state, $derived)
+- **Snippets** - Reusable markup blocks
+- **Better TypeScript** - Improved type support
+- **Server Components** - Svelte Server Components
+
+```bash
+npm create svelte@latest my-app
+```
+
+### SvelteKit (Meta-Framework)
+
+**URL:** https://kit.svelte.dev
+
+```bash
+npm create svelte@latest my-app
+```
+
+---
+
+## 📱 Mobile Development
+
+### React Native
+
+**URL:** https://reactnative.dev
+
+```bash
+npx create-expo-app my-app
+```
+
+### Expo (React Native Framework)
+
+**URL:** https://expo.dev
+
+```bash
+npx create-expo-app my-app --template tabs
+```
+
+### Flutter
+
+**URL:** https://flutter.dev
+**Language:** Dart
+
+```bash
+flutter create my_app
+```
+
+---
+
+## 🖥️ Desktop Development
+
+### Electron
+
+**URL:** https://electronjs.org
+
+```bash
+npm create electron-app@latest my-app
+```
+
+### Tauri
+
+**URL:** https://tauri.app
+
+```bash
+npm create tauri-app@latest
+```
+
+---
+
+## 🏗️ Full-Stack Starter Templates
+
+### T3 Stack
+
+**URL:** https://create.t3.gg
+
+**Includes:** Next.js, TypeScript, Tailwind, tRPC, Prisma, NextAuth
+
+```bash
+npm create t3-app@latest
+```
+
+### Blitz.js
+
+**URL:** https://blitzjs.com
+
+```bash
+npm create blitz-app@latest
+```
+
+### RedwoodJS
+
+**URL:** https://redwoodjs.com
+
+```bash
+npm create redwood-app@latest my-app
+```
+
+---
+
+## 📊 Stack Comparison
+
+| Stack | Type | SSR | SSG | API Routes | Best For |
+|-------|------|-----|-----|------------|----------|
+| **Next.js** | React | ✅ | ✅ | ✅ | Full-stack apps |
+| **Remix** | React | ✅ | ❌ | ✅ | Web apps |
+| **Vite + React** | React | ❌ | ✅ | ❌ | SPAs |
+| **Nuxt** | Vue | ✅ | ✅ | ✅ | Full-stack apps |
+| **SvelteKit** | Svelte | ✅ | ✅ | ✅ | Full-stack apps |
+| **Astro** | Multi | ✅ | ✅ | ✅ | Content sites |
+
+---
+
+## 🎯 Selection Guide
+
+### Choose Next.js when:
+- Building production web applications
+- Need SEO (server-side rendering)
+- Want full-stack capabilities
+- Using React ecosystem
+
+### Choose Nuxt when:
+- Prefer Vue.js
+- Building content-heavy sites
+- Need SSR/SSG
+- Want auto-imports
+
+### Choose SvelteKit when:
+- Want less boilerplate
+- Building fast, lightweight apps
+- Prefer compiled framework
+- Need simplicity
+
+### Choose Vite + React when:
+- Building SPA only
+- Don't need SSR
+- Want maximum flexibility
+- Building internal tools
+
+### Choose Astro when:
+- Building marketing sites
+- Content-focused website
+- Want zero JS by default
+- Multi-framework support
+
+---
+
+## 🔗 Related Skills
+
+- **zai-tooling-reference** - Complete Next.js 15/16 patterns
+- **component-libraries** - UI components for each stack
+- **css-frameworks** - Styling solutions
+
+---
+
+*Last updated: 2026-02-13*
--- a/frontend-ui-ux-design/ui-experts/README.md
+++ b/frontend-ui-ux-design/ui-experts/README.md
@@ -0,0 +1,180 @@
+# UI/UX & Design AI Experts
+
+AI-powered design experts from MiniMax and GLM platforms for visual creation.
+
+---
+
+## 🎨 MiniMax Design Experts
+
+### Visual Design Experts
+
+| Expert ID | Name | Specialization |
+|-----------|------|----------------|
+| `content_creation` | Content Creator | Marketing content, copywriting |
+| `logo_generation` | Logo Designer | Brand identity, logos |
+| `icon_generation` | Icon Designer | UI icons, symbols |
+| `visual_creation` | Visual Creator | Graphics, illustrations |
+| `landing_page` | Landing Page Designer | Conversion-focused pages |
+| `marketing` | Marketing Expert | Campaign materials |
+
+### Usage via MiniMax API
+
+```bash
+# Using minimax-experts skill
+# Auto-triggers on: logo, icon, visual, landing page design
+```
+
+See: `skills/minimax-experts/SKILL.md` for complete expert catalog.
+
+---
+
+## 🖼️ GLM/Z.ai Visual Skills
+
+### Image Generation
+
+| Skill | Description | Use Case |
+|-------|-------------|----------|
+| `image_generation` | Text-to-image generation | Creating visuals from descriptions |
+| `VLM` | Vision Language Model | Image understanding & analysis |
+| `vision_model` | Computer vision | Image recognition, OCR |
+
+### Video Generation
+
+| Skill | Description | Use Case |
+|-------|-------------|----------|
+| `video_generation` | Text-to-video | Creating video content |
+
+### Document Processing
+
+| Skill | Description | Use Case |
+|-------|-------------|----------|
+| `PDF_processing` | PDF analysis | Document design review |
+| `DOCX` | Word document handling | Document styling |
+| `XLSX` | Excel processing | Data visualization |
+| `PPTX` | PowerPoint handling | Presentation design |
+
+### Web & Search
+
+| Skill | Description | Use Case |
+|-------|-------------|----------|
+| `web_search` | Search the web | Research design trends |
+| `web_scraping` | Extract web content | Competitor analysis |
+
+### Speech & Audio
+
+| Skill | Description | Use Case |
+|-------|-------------|----------|
+| `speech_to_text` | ASR transcription | Accessibility |
+| `text_to_speech` | TTS synthesis | Audio content |
+
+### Usage via GLM SDK
+
+```javascript
+import { ZaiClient } from 'z-ai-web-dev-sdk';
+
+const client = new ZaiClient();
+
+// Image generation
+const image = await client.image.generate({
+  prompt: "Modern minimalist logo for tech startup",
+  size: "1024x1024"
+});
+
+// Video generation
+const video = await client.video.generate({
+  prompt: "Product demo animation",
+  duration: 30
+});
+```
+
+See: `skills/glm-skills/SKILL.md` for complete SDK reference.
+
+---
+
+## 🤖 Built-in Claude Code Agents
+
+### Frontend-Focused Agents
+
+| Agent | Description | When to Use |
+|-------|-------------|-------------|
+| `frontend-developer` | UI implementation | Building React/Vue/Angular components |
+| `ui-sketcher` | UI Blueprint Engineer | ASCII interface designs |
+| `rapid-prototyper` | MVP builder | Quick app prototyping |
+| `whimsy-injector` | Delight specialist | Adding personality to UI |
+
+### Design Workflow
+
+```
+1. ui-ux-pro-max skill     → Design system & guidelines
+2. frontend-developer      → Component implementation
+3. whimsy-injector         → Add delightful touches
+4. code-reviewer           → Quality check
+```
+
+---
+
+## 🔧 MCP Tools for Design
+
+### Image Analysis Tools
+
+| Tool | Purpose |
+|------|---------|
+| `ui_to_artifact` | Convert UI screenshot to code |
+| `analyze_image` | General image analysis |
+| `analyze_data_visualization` | Chart/graph analysis |
+
+### Usage Examples
+
+```bash
+# Convert UI screenshot to React code
+ui_to_artifact(image_source="mockup.png", output_type="code")
+
+# Analyze design patterns
+analyze_image(image_source="design.png", prompt="Describe UI patterns used")
+```
+
+---
+
+## 📚 Related Skills
+
+| Skill | Description | Location |
+|-------|-------------|----------|
+| **ui-ux-pro-max** | Complete design intelligence | `skills/external/ui-ux-pro-max/` |
+| **minimax-experts** | 40 AI experts catalog | `skills/minimax-experts/` |
+| **glm-skills** | Multimodal AI skills | `skills/glm-skills/` |
+| **zai-tooling-reference** | Next.js + frontend patterns | `skills/zai-tooling-reference/` |
+
+---
+
+## 🎯 Quick Reference
+
+### For Logo/Icon Design
+```
+→ Use MiniMax logo_generation, icon_generation experts
+→ Auto-triggers from minimax-experts skill
+```
+
+### For Landing Pages
+```
+→ Use ui-ux-pro-max for design system
+→ Use MiniMax landing_page expert
+→ Use frontend-developer agent
+```
+
+### For UI Mockup to Code
+```
+→ Use ui_to_artifact MCP tool
+→ Use ui-ux-pro-max for patterns
+→ Use frontend-developer agent
+```
+
+### For Design Analysis
+```
+→ Use analyze_image MCP tool
+→ Use VLM for understanding
+→ Use ui-ux-pro-max for guidelines
+```
+
+---
+
+*Last updated: 2026-02-13*