t1k:web:core:frameworks

Field	Value
Module	`core`
Version	`1.7.0`
Effort	`high`
Tools	—

Keywords: App Router, caching, monorepo, Next.js, React, RSC, SSR, Turborepo, web

How to invoke

/t1k:web:core:frameworks
[framework] [feature]

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" />

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

Full patterns and workflows (CI/CD, auth, API, state management): see references/patterns-and-workflows.md.

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://turborepo.dev/docs
RemixIcon: https://remixicon.com

Implementation Checklist

Full implementation checklist: see references/implementation-checklist.md.

Gotchas

Next.js App Router and Pages Router cannot coexist cleanly post-15 — pin one per repo.
SvelteKit +page.server.ts ↔ +page.ts confusion — server-only is .server.ts; client-shared is .ts. Mixing leaks server data to bundle.
Remix loader runs at navigation; clientLoader runs at hydration — both running on initial nav doubles your DB hit if not gated.
Vite SSR mode and CSR mode have different module resolution — top-level imports that work in dev silently break in build.