antigravity-claudekit/skills/ck-web-frameworks/SKILL.md

name, description

name	description
ck-web-frameworks	Build with Next.js App Router, RSC, SSR, ISR, and Turborepo monorepos. Use for React apps, server rendering, build optimization, caching strategies, shared component libraries, monorepo setup.

ck-web-frameworks

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

When to Use

• 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
• Managing workspace dependencies across multiple projects
• Deploying production-ready applications

Don't Use When

• Pure component-level React patterns — use ck-frontend-development
• Backend API design — use ck-backend-development
• Simple single-page static site with no SSR needs

Stack Selection Guide

Single Application: Next.js

Use for standalone applications:

• E-commerce sites, marketing websites, SaaS applications
• Documentation sites, blogs, content platforms

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

Monorepo: Next.js + Turborepo

Use when building multiple applications with shared code:

• Microfrontends, multi-tenant platforms
• Multiple apps (web, admin, mobile-web) sharing logic
• Design system with documentation site

npx create-turbo@latest my-monorepo

Monorepo Structure

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

Next.js Best Practices

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

Rendering Modes:

• SSR: fetch(url) — fresh data per request
• SSG: generateStaticParams() — build-time generation
• ISR: { next: { revalidate: 3600 } } — stale-while-revalidate

Turborepo Best Practices

• Structure 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

turbo.json pipeline:

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

RemixIcon Usage

// Webfont (HTML)
<i className="ri-home-line"></i>

// React component
import { RiHomeLine } from "@remixicon/react"
<RiHomeLine size={24} />

Guidelines:

• Use line style for minimal interfaces, fill for emphasis
• Provide aria-label for accessibility
• Use currentColor for flexible theming
• Prefer webfonts for multiple icons; SVG for single icons

CI/CD Pipeline

jobs:
  build:
    steps:
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

Implementation Checklist

• Project structure (single app or monorepo)
• TypeScript and ESLint configured
• Next.js with App Router
• Turborepo pipeline (if monorepo)
• RemixIcon installed and configured
• Routing and layouts implemented
• Loading and error states added
• Image and font optimization configured
• Data fetching patterns established
• Caching strategies configured
• Remote caching enabled (if monorepo)
• CI/CD pipeline configured