Web Frameworks

Name: Web Frameworks
Author: jackspace

jackspace/claudeskillz

38 installs
16 repo stars
Updated November 20, 2025
jackspace/claudeskillz

Build modern full-stack React apps with Next.js, manage monorepos with Turborepo, and add icons with RemixIcon.

About

This skill combines Next.js, Turborepo, and RemixIcon for building modern full-stack web applications. A developer uses it for App Router/SSR/SSG apps, monorepo task pipelines and caching, and adding a 3100+ icon library.

Next.js App Router, Server Components, SSR/SSG/ISR patterns
Turborepo monorepo task pipelines with remote caching

Web Frameworks by the numbers

38 all-time installs (skills.sh)
Ranked #1,390 of 2,244 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 2, 2026 (Skillselion catalog sync)

npx skills add https://github.com/jackspace/claudeskillz --skill web-frameworks

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/jackspace/claudeskillz/web-frameworks.svg)](https://skillselion.com/skills/jackspace/claudeskillz/web-frameworks)

Installs	38
repo stars	★ 16
Last updated	November 20, 2025
Repository	jackspace/claudeskillz ↗

What it does

Build modern full-stack React apps with Next.js, manage monorepos with Turborepo, and add icons with RemixIcon.

Files

SKILL.mdMarkdownGitHub ↗

Web Frameworks Skill Group

Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.

Overview

This skill group combines three powerful tools for web development:

Next.js - React framework with SSR, SSG, RSC, and optimization features Turborepo - High-performance monorepo build system for JavaScript/TypeScript RemixIcon - Icon library with 3,100+ outlined and filled style icons

When to Use This Skill Group

Building new full-stack web applications with modern React
Setting up monorepos with multiple apps and shared packages
Implementing server-side rendering and static generation
Optimizing build performance with intelligent caching
Creating consistent UI with professional iconography
Managing workspace dependencies across multiple projects
Deploying production-ready applications with proper optimization

Stack Selection Guide

Single Application: Next.js + RemixIcon

Use when building a standalone application:

E-commerce sites
Marketing websites
SaaS applications
Documentation sites
Blogs and content platforms

Setup:

npx create-next-app@latest my-app
cd my-app
npm install remixicon

Monorepo: Next.js + Turborepo + RemixIcon

Use when building multiple applications with shared code:

Microfrontends
Multi-tenant platforms
Internal tools with shared component library
Multiple apps (web, admin, mobile-web) sharing logic
Design system with documentation site

Setup:

npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages

Framework Features Comparison

Feature	Next.js	Turborepo	RemixIcon
Primary Use	Web framework	Build system	UI icons
Best For	SSR/SSG apps	Monorepos	Consistent iconography
Performance	Built-in optimization	Caching & parallel tasks	Lightweight fonts/SVG
TypeScript	Full support	Full support	Type definitions available

Quick Start

Next.js Application

# Create new project
npx create-next-app@latest my-app
cd my-app

# Install RemixIcon
npm install remixicon

# Import in layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Start development
npm run dev

Turborepo Monorepo

# Create monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/web/          - Next.js application
# apps/docs/         - Documentation site
# packages/ui/       - Shared components with RemixIcon
# packages/config/   - Shared configs
# turbo.json         - Pipeline configuration

# Run all apps
npm run dev

# Build all packages
npm run build

RemixIcon Integration

// Webfont (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// React component
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />

Reference Navigation

Next.js References:

App Router Architecture - Routing, layouts, pages, parallel routes
Server Components - RSC patterns, client vs server, streaming
Data Fetching - fetch API, caching, revalidation, loading states
Optimization - Images, fonts, scripts, bundle analysis, PPR

Turborepo References:

Setup & Configuration - Installation, workspace config, package structure
Task Pipelines - Dependencies, parallel execution, task ordering
Caching Strategies - Local cache, remote cache, cache invalidation

RemixIcon References:

Integration Guide - Installation, usage, customization, accessibility

Common Patterns & Workflows

Pattern 1: Full-Stack Monorepo

my-monorepo/
├── apps/
│   ├── web/              # Customer-facing Next.js app
│   ├── admin/            # Admin dashboard Next.js app
│   └── docs/             # Documentation site
├── packages/
│   ├── ui/               # Shared UI with RemixIcon
│   ├── api-client/       # API client library
│   ├── config/           # ESLint, TypeScript configs
│   └── types/            # Shared TypeScript types
└── turbo.json            # Build pipeline

turbo.json:

{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}

Pattern 2: Shared Component Library

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react"

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  )
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button"
import { RiHomeLine } from "@remixicon/react"

export default function Page() {
  return <Button icon={<RiHomeLine />}>Home</Button>
}

Pattern 3: Optimized Data Fetching

// app/posts/[slug]/page.tsx
import { notFound } from 'next/navigation'

// Static generation at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// Revalidate every hour
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }
  })
  if (!res.ok) return null
  return res.json()
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) notFound()

  return <article>{post.content}</article>
}

Pattern 4: Monorepo CI/CD Pipeline

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

Utility Scripts

Python utilities in scripts/ directory:

nextjs-init.py - Initialize Next.js project with best practices turborepo-migrate.py - Convert existing monorepo to Turborepo

Usage examples:

# Initialize new Next.js app with TypeScript and recommended setup
python scripts/nextjs-init.py --name my-app --typescript --app-router

# Migrate existing monorepo to Turborepo with dry-run
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

# Run tests
cd scripts/tests
pytest

Best Practices

Next.js:

Default to Server Components, use Client Components only when needed
Implement proper loading and error states
Use Image component for automatic optimization
Set proper metadata for SEO
Leverage caching strategies (force-cache, revalidate, no-store)

Turborepo:

Structure monorepo with clear separation (apps/, packages/)
Define task dependencies correctly (^build for topological)
Configure outputs for proper caching
Enable remote caching for team collaboration
Use filters to run tasks on changed packages only

RemixIcon:

Use line style for minimal interfaces, fill for emphasis
Maintain 24x24 grid alignment for crisp rendering
Provide aria-labels for accessibility
Use currentColor for flexible theming
Prefer webfonts for multiple icons, SVG for single icons

Resources

Next.js: https://nextjs.org/docs/llms.txt
Turborepo: https://turbo.build/repo/docs
RemixIcon: https://remixicon.com

Implementation Checklist

Building with this stack:

[ ] Create project structure (single app or monorepo)
[ ] Configure TypeScript and ESLint
[ ] Set up Next.js with App Router
[ ] Configure Turborepo pipeline (if monorepo)
[ ] Install and configure RemixIcon
[ ] Implement routing and layouts
[ ] Add loading and error states
[ ] Configure image and font optimization
[ ] Set up data fetching patterns
[ ] Configure caching strategies
[ ] Add API routes as needed
[ ] Implement shared component library (if monorepo)
[ ] Configure remote caching (if monorepo)
[ ] Set up CI/CD pipeline
[ ] Configure deployment platform

{
  "description": "Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.",
  "metadata": {
    "license": "MIT",
    "version": "1.0.0"
  },
  "references": {
    "files": [
      "references/nextjs-app-router.md",
      "references/nextjs-data-fetching.md",
      "references/nextjs-optimization.md",
      "references/nextjs-server-components.md",
      "references/remix-icon-integration.md",
      "references/turborepo-caching.md",
      "references/turborepo-pipelines.md",
      "references/turborepo-setup.md"
    ]
  },
  "content": "Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.\r\n\r\n\r\n### Single Application: Next.js + RemixIcon\r\n\r\nUse when building a standalone application:\r\n- E-commerce sites\r\n- Marketing websites\r\n- SaaS applications\r\n- Documentation sites\r\n- Blogs and content platforms\r\n\r\n**Setup:**\r\n```bash\r\nnpx create-next-app@latest my-app\r\ncd my-app\r\nnpm install remixicon\r\n```\r\n\r\n### Monorepo: Next.js + Turborepo + RemixIcon\r\n\r\nUse when building multiple applications with shared code:\r\n- Microfrontends\r\n- Multi-tenant platforms\r\n- Internal tools with shared component library\r\n- Multiple apps (web, admin, mobile-web) sharing logic\r\n- Design system with documentation site\r\n\r\n**Setup:**\r\n```bash\r\nnpx create-turbo@latest my-monorepo\r\n\r\n### Next.js Application\r\n\r\n```bash\r\nnpx create-next-app@latest my-app\r\ncd my-app\r\n\r\nnpm install remixicon\r\n\r\nimport 'remixicon/fonts/remixicon.css'\r\n\r\nnpm run dev\r\n```\r\n\r\n### Turborepo Monorepo\r\n\r\n```bash\r\nnpx create-turbo@latest my-monorepo\r\ncd my-monorepo\r\n\r\n\r\nnpm run dev\r\n\r\n\r\n### Pattern 1: Full-Stack Monorepo\r\n\r\n```\r\nmy-monorepo/\r\n├── apps/\r\n│   ├── web/              # Customer-facing Next.js app\r\n│   ├── admin/            # Admin dashboard Next.js app\r\n│   └── docs/             # Documentation site\r\n├── packages/\r\n│   ├── ui/               # Shared UI with RemixIcon\r\n│   ├── api-client/       # API client library\r\n│   ├── config/           # ESLint, TypeScript configs\r\n│   └── types/            # Shared TypeScript types\r\n└── turbo.json            # Build pipeline\r\n```\r\n\r\n**turbo.json:**\r\n```json\r\n{\r\n  \"$schema\": \"https://turbo.build/schema.json\",\r\n  \"pipeline\": {\r\n    \"build\": {\r\n      \"dependsOn\": [\"^build\"],\r\n      \"outputs\": [\".next/**\", \"!.next/cache/**\", \"dist/**\"]\r\n    },\r\n    \"dev\": {\r\n      \"cache\": false,\r\n      \"persistent\": true\r\n    },\r\n    \"lint\": {},\r\n    \"test\": {\r\n      \"dependsOn\": [\"build\"]\r\n    }\r\n  }\r\n}\r\n```\r\n\r\n### Pattern 2: Shared Component Library\r\n\r\n```tsx\r\n// packages/ui/src/button.tsx\r\nimport { RiLoader4Line } from \"@remixicon/react\"\r\n\r\nexport function Button({ children, loading, icon }) {\r\n  return (\r\n    <button>\r\n      {loading ? <RiLoader4Line className=\"animate-spin\" /> : icon}\r\n      {children}\r\n    </button>\r\n  )\r\n}\r\n\r\n// apps/web/app/page.tsx\r\nimport { Button } from \"@repo/ui/button\"\r\nimport { RiHomeLine } from \"@remixicon/react\"\r\n\r\nexport default function Page() {\r\n  return <Button icon={<RiHomeLine />}>Home</Button>\r\n}\r\n```\r\n\r\n### Pattern 3: Optimized Data Fetching\r\n\r\n```tsx\r\n// app/posts/[slug]/page.tsx\r\nimport { notFound } from 'next/navigation'\r\n\r\n// Static generation at build time\r\nexport async function generateStaticParams() {\r\n  const posts = await getPosts()\r\n  return posts.map(post => ({ slug: post.slug }))\r\n}\r\n\r\n// Revalidate every hour\r\nasync function getPost(slug: string) {\r\n  const res = await fetch(`https://api.example.com/posts/${slug}`, {\r\n    next: { revalidate: 3600 }\r\n  })\r\n  if (!res.ok) return null\r\n  return res.json()\r\n}\r\n\r\nexport default async function Post({ params }: { params: { slug: string } }) {\r\n  const post = await getPost(params.slug)\r\n  if (!post) notFound()\r\n\r\n  return <article>{post.content}</article>\r\n}\r\n```\r\n\r\n### Pattern 4: Monorepo CI/CD Pipeline\r\n\r\n```yaml\r\n\r\nPython utilities in `scripts/` directory:\r\n\r\n**nextjs-init.py** - Initialize Next.js project with best practices\r\n**turborepo-migrate.py** - Convert existing monorepo to Turborepo\r\n\r\nUsage examples:\r\n```bash\r\npython scripts/nextjs-init.py --name my-app --typescript --app-router\r\n\r\npython scripts/turborepo-migrate.py --path ./my-monorepo --dry-run",
  "name": "web-frameworks",
  "id": "web-frameworks_mrgoonie",
  "sections": {
    "Quick Start": "npm run build\r\n```\r\n\r\n### RemixIcon Integration\r\n\r\n```tsx\r\n// Webfont (HTML/CSS)\r\n<i className=\"ri-home-line\"></i>\r\n<i className=\"ri-search-fill ri-2x\"></i>\r\n\r\n// React component\r\nimport { RiHomeLine, RiSearchFill } from \"@remixicon/react\"\r\n<RiHomeLine size={24} />\r\n<RiSearchFill size={32} color=\"blue\" />\r\n```",
    "Reference Navigation": "**Next.js References:**\r\n- [App Router Architecture](./references/nextjs-app-router.md) - Routing, layouts, pages, parallel routes\r\n- [Server Components](./references/nextjs-server-components.md) - RSC patterns, client vs server, streaming\r\n- [Data Fetching](./references/nextjs-data-fetching.md) - fetch API, caching, revalidation, loading states\r\n- [Optimization](./references/nextjs-optimization.md) - Images, fonts, scripts, bundle analysis, PPR\r\n\r\n**Turborepo References:**\r\n- [Setup & Configuration](./references/turborepo-setup.md) - Installation, workspace config, package structure\r\n- [Task Pipelines](./references/turborepo-pipelines.md) - Dependencies, parallel execution, task ordering\r\n- [Caching Strategies](./references/turborepo-caching.md) - Local cache, remote cache, cache invalidation\r\n\r\n**RemixIcon References:**\r\n- [Integration Guide](./references/remix-icon-integration.md) - Installation, usage, customization, accessibility",
    "Best Practices": "**Next.js:**\r\n- Default to Server Components, use Client Components only when needed\r\n- Implement proper loading and error states\r\n- Use Image component for automatic optimization\r\n- Set proper metadata for SEO\r\n- Leverage caching strategies (force-cache, revalidate, no-store)\r\n\r\n**Turborepo:**\r\n- Structure monorepo with clear separation (apps/, packages/)\r\n- Define task dependencies correctly (^build for topological)\r\n- Configure outputs for proper caching\r\n- Enable remote caching for team collaboration\r\n- Use filters to run tasks on changed packages only\r\n\r\n**RemixIcon:**\r\n- Use line style for minimal interfaces, fill for emphasis\r\n- Maintain 24x24 grid alignment for crisp rendering\r\n- Provide aria-labels for accessibility\r\n- Use currentColor for flexible theming\r\n- Prefer webfonts for multiple icons, SVG for single icons",
    "Implementation Checklist": "Building with this stack:\r\n\r\n- [ ] Create project structure (single app or monorepo)\r\n- [ ] Configure TypeScript and ESLint\r\n- [ ] Set up Next.js with App Router\r\n- [ ] Configure Turborepo pipeline (if monorepo)\r\n- [ ] Install and configure RemixIcon\r\n- [ ] Implement routing and layouts\r\n- [ ] Add loading and error states\r\n- [ ] Configure image and font optimization\r\n- [ ] Set up data fetching patterns\r\n- [ ] Configure caching strategies\r\n- [ ] Add API routes as needed\r\n- [ ] Implement shared component library (if monorepo)\r\n- [ ] Configure remote caching (if monorepo)\r\n- [ ] Set up CI/CD pipeline\r\n- [ ] Configure deployment platform",
    "Overview": "This skill group combines three powerful tools for web development:\r\n\r\n**Next.js** - React framework with SSR, SSG, RSC, and optimization features\r\n**Turborepo** - High-performance monorepo build system for JavaScript/TypeScript\r\n**RemixIcon** - Icon library with 3,100+ outlined and filled style icons",
    "Stack Selection Guide": "```\r\n\r\n### Framework Features Comparison\r\n\r\n| Feature | Next.js | Turborepo | RemixIcon |\r\n|---------|---------|-----------|-----------|\r\n| Primary Use | Web framework | Build system | UI icons |\r\n| Best For | SSR/SSG apps | Monorepos | Consistent iconography |\r\n| Performance | Built-in optimization | Caching & parallel tasks | Lightweight fonts/SVG |\r\n| TypeScript | Full support | Full support | Type definitions available |",
    "Common Patterns & Workflows": "name: CI\r\non: [push, pull_request]\r\n\r\njobs:\r\n  build:\r\n    runs-on: ubuntu-latest\r\n    steps:\r\n      - uses: actions/checkout@v4\r\n      - uses: actions/setup-node@v4\r\n        with:\r\n          node-version: 18\r\n      - run: npm install\r\n      - run: npx turbo run build test lint\r\n        env:\r\n          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}\r\n          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}\r\n```",
    "When to Use This Skill Group": "- Building new full-stack web applications with modern React\r\n- Setting up monorepos with multiple apps and shared packages\r\n- Implementing server-side rendering and static generation\r\n- Optimizing build performance with intelligent caching\r\n- Creating consistent UI with professional iconography\r\n- Managing workspace dependencies across multiple projects\r\n- Deploying production-ready applications with proper optimization",
    "Resources": "- Next.js: https://nextjs.org/docs/llms.txt\r\n- Turborepo: https://turbo.build/repo/docs\r\n- RemixIcon: https://remixicon.com",
    "Utility Scripts": "cd scripts/tests\r\npytest\r\n```"
  }
}

---
name: web-frameworks
description: Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.
license: MIT
version: 1.0.0
---

# Web Frameworks Skill Group

Comprehensive guide for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon.

## Overview

This skill group combines three powerful tools for web development:

**Next.js** - React framework with SSR, SSG, RSC, and optimization features
**Turborepo** - High-performance monorepo build system for JavaScript/TypeScript
**RemixIcon** - Icon library with 3,100+ outlined and filled style icons

## When to Use This Skill Group

- Building new full-stack web applications with modern React
- Setting up monorepos with multiple apps and shared packages
- Implementing server-side rendering and static generation
- Optimizing build performance with intelligent caching
- Creating consistent UI with professional iconography
- Managing workspace dependencies across multiple projects
- Deploying production-ready applications with proper optimization

## Stack Selection Guide

### Single Application: Next.js + RemixIcon

Use when building a standalone application:
- E-commerce sites
- Marketing websites
- SaaS applications
- Documentation sites
- Blogs and content platforms

**Setup:**
```bash
npx create-next-app@latest my-app
cd my-app
npm install remixicon
```

### Monorepo: Next.js + Turborepo + RemixIcon

Use when building multiple applications with shared code:
- Microfrontends
- Multi-tenant platforms
- Internal tools with shared component library
- Multiple apps (web, admin, mobile-web) sharing logic
- Design system with documentation site

**Setup:**
```bash
npx create-turbo@latest my-monorepo
# Then configure Next.js apps in apps/ directory
# Install remixicon in shared UI packages
```

### Framework Features Comparison

| Feature | Next.js | Turborepo | RemixIcon |
|---------|---------|-----------|-----------|
| Primary Use | Web framework | Build system | UI icons |
| Best For | SSR/SSG apps | Monorepos | Consistent iconography |
| Performance | Built-in optimization | Caching & parallel tasks | Lightweight fonts/SVG |
| TypeScript | Full support | Full support | Type definitions available |

## Quick Start

### Next.js Application

```bash
# Create new project
npx create-next-app@latest my-app
cd my-app

# Install RemixIcon
npm install remixicon

# Import in layout
# app/layout.tsx
import 'remixicon/fonts/remixicon.css'

# Start development
npm run dev
```

### Turborepo Monorepo

```bash
# Create monorepo
npx create-turbo@latest my-monorepo
cd my-monorepo

# Structure:
# apps/web/          - Next.js application
# apps/docs/         - Documentation site
# packages/ui/       - Shared components with RemixIcon
# packages/config/   - Shared configs
# turbo.json         - Pipeline configuration

# Run all apps
npm run dev

# Build all packages
npm run build
```

### RemixIcon Integration

```tsx
// Webfont (HTML/CSS)
<i className="ri-home-line"></i>
<i className="ri-search-fill ri-2x"></i>

// React component
import { RiHomeLine, RiSearchFill } from "@remixicon/react"
<RiHomeLine size={24} />
<RiSearchFill size={32} color="blue" />
```

## Reference Navigation

**Next.js References:**
- [App Router Architecture](./references/nextjs-app-router.md) - Routing, layouts, pages, parallel routes
- [Server Components](./references/nextjs-server-components.md) - RSC patterns, client vs server, streaming
- [Data Fetching](./references/nextjs-data-fetching.md) - fetch API, caching, revalidation, loading states
- [Optimization](./references/nextjs-optimization.md) - Images, fonts, scripts, bundle analysis, PPR

**Turborepo References:**
- [Setup & Configuration](./references/turborepo-setup.md) - Installation, workspace config, package structure
- [Task Pipelines](./references/turborepo-pipelines.md) - Dependencies, parallel execution, task ordering
- [Caching Strategies](./references/turborepo-caching.md) - Local cache, remote cache, cache invalidation

**RemixIcon References:**
- [Integration Guide](./references/remix-icon-integration.md) - Installation, usage, customization, accessibility

## Common Patterns & Workflows

### Pattern 1: Full-Stack Monorepo

```
my-monorepo/
├── apps/
│   ├── web/              # Customer-facing Next.js app
│   ├── admin/            # Admin dashboard Next.js app
│   └── docs/             # Documentation site
├── packages/
│   ├── ui/               # Shared UI with RemixIcon
│   ├── api-client/       # API client library
│   ├── config/           # ESLint, TypeScript configs
│   └── types/            # Shared TypeScript types
└── turbo.json            # Build pipeline
```

**turbo.json:**
```json
{
  "$schema": "https://turbo.build/schema.json",
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**", "dist/**"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    },
    "lint": {},
    "test": {
      "dependsOn": ["build"]
    }
  }
}
```

### Pattern 2: Shared Component Library

```tsx
// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react"

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  )
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button"
import { RiHomeLine } from "@remixicon/react"

export default function Page() {
  return <Button icon={<RiHomeLine />}>Home</Button>
}
```

### Pattern 3: Optimized Data Fetching

```tsx
// app/posts/[slug]/page.tsx
import { notFound } from 'next/navigation'

// Static generation at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// Revalidate every hour
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }
  })
  if (!res.ok) return null
  return res.json()
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) notFound()

  return <article>{post.content}</article>
}
```

### Pattern 4: Monorepo CI/CD Pipeline

```yaml
# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
```

## Utility Scripts

Python utilities in `scripts/` directory:

**nextjs-init.py** - Initialize Next.js project with best practices
**turborepo-migrate.py** - Convert existing monorepo to Turborepo

Usage examples:
```bash
# Initialize new Next.js app with TypeScript and recommended setup
python scripts/nextjs-init.py --name my-app --typescript --app-router

# Migrate existing monorepo to Turborepo with dry-run
python scripts/turborepo-migrate.py --path ./my-monorepo --dry-run

# Run tests
cd scripts/tests
pytest
```

## Best Practices

**Next.js:**
- Default to Server Components, use Client Components only when needed
- Implement proper loading and error states
- Use Image component for automatic optimization
- Set proper metadata for SEO
- Leverage caching strategies (force-cache, revalidate, no-store)

**Turborepo:**
- Structure monorepo with clear separation (apps/, packages/)
- Define task dependencies correctly (^build for topological)
- Configure outputs for proper caching
- Enable remote caching for team collaboration
- Use filters to run tasks on changed packages only

**RemixIcon:**
- Use line style for minimal interfaces, fill for emphasis
- Maintain 24x24 grid alignment for crisp rendering
- Provide aria-labels for accessibility
- Use currentColor for flexible theming
- Prefer webfonts for multiple icons, SVG for single icons

## Resources

- Next.js: https://nextjs.org/docs/llms.txt
- Turborepo: https://turbo.build/repo/docs
- RemixIcon: https://remixicon.com

## Implementation Checklist

Building with this stack:

- [ ] Create project structure (single app or monorepo)
- [ ] Configure TypeScript and ESLint
- [ ] Set up Next.js with App Router
- [ ] Configure Turborepo pipeline (if monorepo)
- [ ] Install and configure RemixIcon
- [ ] Implement routing and layouts
- [ ] Add loading and error states
- [ ] Configure image and font optimization
- [ ] Set up data fetching patterns
- [ ] Configure caching strategies
- [ ] Add API routes as needed
- [ ] Implement shared component library (if monorepo)
- [ ] Configure remote caching (if monorepo)
- [ ] Set up CI/CD pipeline
- [ ] Configure deployment platform