skills.rest
quanganh208
quanganh208COMMUNITY
Explore all skills by this author →
GitHub

ck:web-frameworks

Build Next.js App Router and Turborepo monorepos with caching and optimization.

1|Updated Mar 6, 2026
Search Tags:#react#next.js#monorepo#turborepo#isr#server-components#remixicon
One-click install
npx skills add https://github.com/quanganh208/cookmate --skill ck-web-frameworks-quanganh208
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:web-frameworks
Source: https://github.com/quanganh208/cookmate/tree/main/.opencode/skills/web-frameworks
Command: npx skills add https://github.com/quanganh208/cookmate --skill ck-web-frameworks-quanganh208

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Modern React applications and monorepos require many moving parts — app router patterns, server components, SSR/ISR caching, build pipelines, shared UI packages, and iconography — and setting these up correctly for performance, consistency, and CI/CD is time consuming and error prone. This Skill consolidates best practices, patterns, and automation to reduce manual configuration, avoid common pitfalls, and deliver production-ready Next.js + Turborepo projects faster.

Core Features & Use Cases

  • Next.js App Router & Server Components: Guidance on layouts, routing conventions, dynamic/static rendering choices, loading and error boundaries, and data fetching patterns.
  • Caching & Data Strategies: Recommendations for fetch caching, ISR, tag-based revalidation, revalidate values, and route-level cache controls.
  • Turborepo Monorepo Patterns: Monorepo structure, turbo.json pipelines, task dependencies, outputs configuration, local and remote caching strategies, and CI integration examples.
  • Optimization: Image and font optimization, Script component strategies, bundle analysis, dynamic imports, and PPR considerations.
  • RemixIcon Integration: Webfont, React/Vue packages, accessibility tips, and performance recommendations for icon usage.
  • Utilities & Automation: Python scripts to scaffold Next.js projects and migrate existing monorepos to Turborepo, plus test and CI examples for real projects.
  • Use Case: Create a multi-app monorepo with a shared UI library, a customer-facing Next.js app, a docs site, and a CI pipeline with remote caching to speed team builds.

Quick Start

Initialize a TypeScript Next.js App Router monorepo with Turborepo, install RemixIcon, and generate a CI-ready turbo.json and package.json updates using the provided initialization and migration scripts.

Frequently Asked Questions about ck:web-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Next.js monorepo with Turborepo for multiple applications?▼

To set up a Next.js monorepo with Turborepo, use provided initialization scripts to scaffold a TypeScript project, generate a CI-ready turbo.json with pipeline configurations, and update package.json files for multi-package workspaces.

How does fetch caching and ISR revalidation work in the Next.js App Router?▼

Fetch caching and ISR revalidation in the Next.js App Router use tag-based revalidation and route-level cache controls to manage static regeneration. This Skill provides recommendations for setting revalidate values and optimizing dynamic versus static rendering choices.

Can I migrate an existing React monorepo to Turborepo without breaking current build pipelines?▼

You can migrate an existing monorepo to Turborepo using the included migration scripts. These scripts help transition your project structure to Turborepo-managed workspaces, configuring task dependencies, outputs, and local caching without breaking existing build pipelines.

What's the best way to optimize bundle size and images in a Next.js full-stack application?▼

The best way to optimize bundle size and images in a Next.js application involves using dynamic imports, the Script component strategy, and built-in image and font optimization. This Skill provides guidance on bundle analysis and Partial Prerendering considerations.

Does this approach support integrating RemixIcon into a React Server Components architecture?▼

Yes, RemixIcon integration is supported within a React Server Components architecture. The Skill provides guidance on using RemixIcon webfonts and React packages, alongside accessibility tips and performance recommendations for icon usage in server-rendered applications.

Why use Turborepo remote caching for Next.js monorepos instead of local builds?▼

Turborepo remote caching for Next.js monorepos speeds up team builds by storing task outputs across CI environments. It reduces redundant computations by reusing cached build artifacts, whereas local builds only cache outputs on a single machine.

Related Skills

Explore More Software Engineering Skills→
bug-opsbug-ops
11

init-project

Initialize Rust project directories, rules, and knowledge base files.

Community
Intermediate
rafaelcallejarafaelcalleja
2

web-frameworks

Scaffold Next.js App Router projects with Turborepo and RemixIcon.

Community
Advanced
donggyun112donggyun112
3

frontend-developer

Develop React and TypeScript user interfaces using the Redpanda UI Registry.

Community
Intermediate
ethanolivertroyethanolivertroy
11

autoresearch-finalize

Create independent Git branches from grouped changesets and validate them.

Community
Advanced