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

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

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

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

npx create-remix@latest my-app

Vite (Build Tool)

URL: https://vitejs.dev

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

npm create vue@latest my-app

Nuxt 3 (Meta-Framework)

URL: https://nuxt.com

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

npm create svelte@latest my-app

SvelteKit (Meta-Framework)

URL: https://kit.svelte.dev

npm create svelte@latest my-app

---

📱 Mobile Development

React Native

URL: https://reactnative.dev

npx create-expo-app my-app

Expo (React Native Framework)

URL: https://expo.dev

npx create-expo-app my-app --template tabs

Flutter

URL: https://flutter.dev Language: Dart

flutter create my_app

---

🖥️ Desktop Development

Electron

URL: https://electronjs.org

npm create electron-app@latest my-app

Tauri

URL: https://tauri.app

npm create tauri-app@latest

---

🏗️ Full-Stack Starter Templates

T3 Stack

URL: https://create.t3.gg

Includes: Next.js, TypeScript, Tailwind, tRPC, Prisma, NextAuth

npm create t3-app@latest

Blitz.js

URL: https://blitzjs.com

npm create blitz-app@latest

RedwoodJS

URL: https://redwoodjs.com

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