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
279
frontend-ui-ux-design/frontend-stacks/README.md
Normal file
279
frontend-ui-ux-design/frontend-stacks/README.md
Normal file
@@ -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*
|
||||
Reference in New Issue
Block a user