skills.rest
hidonguyen
hidonguyenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ck:web-frameworks

Scaffold Next.js monorepos with App Router, Turborepo, and RemixIcon.

Updated Apr 2, 2026
Search Tags:#monorepo#nextjs#ci-cd#turborepo#app-router#server-components#remixicon
One-click install
npx skills add https://github.com/hidonguyen/trade-ops --skill ck-web-frameworks-hidonguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ck:web-frameworks
Source: https://github.com/hidonguyen/trade-ops/tree/main/.opencode/skills/web-frameworks
Command: npx skills add https://github.com/hidonguyen/trade-ops --skill ck-web-frameworks-hidonguyen

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Eliminates manual, error-prone setup and configuration for modern React web applications by providing a tested, opinionated scaffold and best-practice references for Next.js (App Router), Turborepo monorepos, and icon integration so teams can ship faster and avoid common platform pitfalls.

Core Features & Use Cases

  • Scaffolding & Bootstrapping: Automated guidance and scripts to initialize Next.js projects with App Router, TypeScript, Tailwind, and recommended configs.
  • Monorepo & Build Optimization: Turborepo patterns, pipeline examples, cache strategies, and CI examples to speed up builds and share packages across apps.
  • Server Rendering & Data Patterns: Clear references for RSC, SSR, ISR, caching, data fetching, and error/loading boundaries to implement robust production pages.
  • UI Consistency: RemixIcon integration and shared UI package patterns for consistent iconography and component reuse.
  • Use Case: Quickly create a multi-app monorepo with a shared UI library and a production-ready Turbo pipeline that builds only changed packages and uses remote caching in CI.

Quick Start

Use the ck:web-frameworks skill to scaffold a Next.js app with App Router, set up a Turborepo monorepo, and integrate RemixIcon for shared UI components.

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 and App Router?▼

To set up a Next.js monorepo, use the scaffold to initialize App Router, TypeScript, and Tailwind, then apply Turborepo pipeline configurations and remote caching to share packages across apps.

What is the best way to structure server components and data fetching in Next.js App Router?▼

The best way to structure server components is using provided references for RSC, SSR, and ISR patterns, implementing clear data fetching, caching strategies, and error boundaries for production pages.

How do I configure CI/CD pipelines for a Turborepo monorepo?▼

Configure CI/CD pipelines for a Turborepo monorepo by applying the included pipeline examples and cache strategies, ensuring the CI builds only changed packages and uses remote caching.

Can I use RemixIcon in a shared UI package within a Next.js monorepo?▼

Yes, you can use RemixIcon in a shared UI package by applying the provided UI consistency patterns, which integrate iconography and component reuse across your Next.js monorepo applications.

Does this scaffold support both single-app Next.js projects and multi-app monorepos?▼

Yes, the scaffold supports both single-app Next.js projects and multi-app Turborepo monorepos, applying automated guidance and scripts to initialize production-ready App Router configurations.

Related Skills

Explore More Software Engineering Skills→
Young-ZYoung-Z
8

x-ipe-task-based-dev-environment

Initializes a development environment by selecting a Python or Node.js tech stack and scaffolding a standard project structure.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

turborepo-caching

Configure Turborepo local and remote caching with turbo.json templates.

Official
Intermediate
tenequmtenequm
32

styling-with-tailwind

Apply Tailwind CSS utility classes and shadcn/ui patterns to style React interfaces.

Community
Intermediate
ggombeeggombee
13

react-spa

Create React Single Page Applications with Vite or Create React App.

Community
Intermediate