GLM-Tools-Skills-Agents/frontend-ui-ux-design/frontend-stacks/README.md

# 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*