ck:web-frameworks

Build and optimize Next.js and Turborepo web application workflows.

Updated May 10, 2026
One-click install
npx skills add https://github.com/dthuy62/kollet-app --skill ck-web-frameworks-dthuy62
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ck:web-frameworks
Source: https://github.com/dthuy62/kollet-app/tree/main/.opencode/skills/web-frameworks
Command: npx skills add https://github.com/dthuy62/kollet-app --skill ck-web-frameworks-dthuy62

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pytest, pytest-cov, pytest-mock, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you design, build, and optimize modern web applications without reinventing framework architecture, monorepo setup, or performance patterns. It reduces the time spent deciding how to structure pages, share code, and tune rendering and caching behavior in production-ready React projects.

Core Features & Use Cases

  • Next.js Architecture Guidance: Choose between App Router patterns, server components, client components, routing layouts, data fetching, and optimization strategies.
  • Turborepo Monorepo Workflows: Set up workspace structure, task pipelines, caching rules, and shared packages for multi-app repositories.
  • Icon and UI Integration: Add consistent RemixIcon usage across web interfaces with accessible, scalable patterns.
  • Practical Use Cases: Build a marketing site with server rendering, migrate an existing workspace to Turborepo, or scaffold a new Next.js app with recommended defaults and config files.

Quick Start

Ask the assistant to help you scaffold, migrate, or optimize a Next.js or Turborepo project using the provided framework patterns and 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 Turborepo monorepo with Next.js App Router?

Setting up a Turborepo monorepo with Next.js App Router involves configuring workspace structure, task pipelines, and caching rules for shared packages across multi-app repositories. This Skill provides scaffolding scripts and framework patterns to automate workspace configuration and routing layouts.

What's the best way to structure server components and data fetching in Next.js?

Structuring server components and data fetching in Next.js requires choosing App Router patterns and optimization strategies. This Skill guides framework selection between server and client components, routing layouts, and performance tuning for production-ready React projects.

How do I configure Turborepo task pipelines and caching rules?

Configuring Turborepo task pipelines and caching rules requires defining workspace structure and task dependencies for multi-app repositories. This Skill provides monorepo pipeline configuration patterns and deterministic project scaffolding scripts.

Can I use RemixIcon with React server components?

Yes, you can use RemixIcon with React server components by following accessible, scalable UI integration patterns. This Skill provides icon integration guidance for consistent RemixIcon usage across web interfaces within Next.js applications.

How do I migrate an existing workspace to Turborepo?

Migrating an existing workspace to Turborepo involves setting up workspace structure, task pipelines, and caching rules for shared packages. This Skill provides deterministic migration scripts and framework patterns to transition your repository.