web-frameworks

Q: How do I install web-frameworks?

Run npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-frameworks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-frameworks/ (personal) or .claude/skills/web-frameworks/ (project).

by mrgoonieFrontend & Design

Build modern full-stack web applications with Next.js (App Router, Server Components, RSC, PPR, SSR, SSG, ISR), Turborepo (monorepo management, task pipelines, remote caching, parallel execution), and RemixIcon (3100+ SVG icons in outlined/filled styles). Use when creating React applications, implementing server-side rendering, setting up monorepos with multiple packages, optimizing build performance and caching strategies, adding icon libraries, managing shared dependencies, or working with TypeScript full-stack projects.

Installs: 372
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-frameworks

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads web-frameworks automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

Reference Navigation

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

Pattern 1: Full-Stack Monorepo

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

turbo.json:

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

Pattern 2: Shared Component Library

// packages/ui/src/button.tsx
import { RiLoader4Line } from "@remixicon/react"

export function Button({ children, loading, icon }) {
  return (
    <button>
      {loading ? <RiLoader4Line className="animate-spin" /> : icon}
      {children}
    </button>
  )
}

// apps/web/app/page.tsx
import { Button } from "@repo/ui/button"
import { RiHomeLine } from "@remixicon/react"

export default function Page() {
  return <Button icon={<RiHomeLine />}>Home</Button>
}

Pattern 3: Optimized Data Fetching

// app/posts/[slug]/page.tsx
import { notFound } from 'next/navigation'

// Static generation at build time
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map(post => ({ slug: post.slug }))
}

// Revalidate every hour
async function getPost(slug: string) {
  const res = await fetch(`https://api.example.com/posts/${slug}`, {
    next: { revalidate: 3600 }
  })
  if (!res.ok) return null
  return res.json()
}

export default async function Post({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)
  if (!post) notFound()

  return <article>{post.content}</article>
}

Pattern 4: Monorepo CI/CD Pipeline

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 18
      - run: npm install
      - run: npx turbo run build test lint
        env:
          TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
          TURBO_TEAM: ${{ secrets.TURBO_TEAM }}

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://turbo.build/repo/docs
RemixIcon: https://remixicon.com

Implementation Checklist

Building with this stack:

FAQ

What does the web-frameworks skill do?

How do I install web-frameworks?

Run npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-frameworks in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-frameworks/ (personal) or .claude/skills/web-frameworks/ (project).

Which AI agents can use web-frameworks?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is web-frameworks safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains web-frameworks?

It is published by mrgoonie in mrgoonie/claudekit-skills. It has 372 recorded installs.

More from mrgoonie/claudekit-skills

View all →

backend-development

mrgoonie/claudekit-skills

Build robust backend systems with modern technologies (Node.js, Python, Go, Rust), frameworks (NestJS, FastAPI, Django), databases (PostgreSQL, MongoDB, Redis), APIs (REST, GraphQL, gRPC), authentication (OAuth 2.1, JWT), testing strategies, security best practices (OWASP Top 10), performance optimization, scalability patterns (microservices, caching, sharding), DevOps practices (Docker, Kubernetes, CI/CD), and monitoring. Use when designing APIs, implementing authentication, optimizing database queries, setting up CI/CD pipelines, handling security vulnerabilities, building microservices, or developing production-ready backend systems.

Backend & APIs2.3K installs

sequential-thinking

mrgoonie/claudekit-skills

Use when complex problems require systematic step-by-step reasoning with ability to revise thoughts, branch into alternative approaches, or dynamically adjust scope. Ideal for multi-stage analysis, design planning, problem decomposition, or tasks with initially unclear scope.

Code Quality & Workflow1.8K installs

threejs

mrgoonie/claudekit-skills

Build 3D web apps with Three.js (WebGL/WebGPU). Use for 3D scenes, animations, custom shaders, PBR materials, VR/XR experiences, games, data visualizations, product configurators.

Media & Creative1.2K installs

devops

mrgoonie/claudekit-skills

Deploy to Cloudflare (Workers, R2, D1), Docker, GCP (Cloud Run, GKE), Kubernetes (kubectl, Helm). Use for serverless, containers, CI/CD, GitOps, security audit.

DevOps & Cloud987 installs

chrome-devtools

mrgoonie/claudekit-skills

Browser automation, debugging, and performance analysis using Puppeteer CLI scripts. Use for automating browsers, taking screenshots, analyzing performance, monitoring network traffic, web scraping, form automation, and JavaScript debugging.

Code Quality & Workflow737 installs

aesthetic

mrgoonie/claudekit-skills

Create aesthetically beautiful interfaces following proven design principles. Use when building UI/UX, analyzing designs from inspiration sites, generating design images with ai-multimodal, implementing visual hierarchy and color theory, adding micro-interactions, or creating design documentation. Includes workflows for capturing and analyzing inspiration screenshots with chrome-devtools and ai-multimodal, iterative design image generation until aesthetic standards are met, and comprehensive design system guidance covering BEAUTIFUL (aesthetic principles), RIGHT (functionality/accessibility), SATISFYING (micro-interactions), and PEAK (storytelling) stages. Integrates with chrome-devtools, ai-multimodal, media-processing, ui-styling, and web-frameworks skills.

Frontend & Design714 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs

web-frameworks

Install

Install

Describe the task

Review the result

SKILL.md

Web Frameworks Skill Group

Overview

When to Use This Skill Group

Stack Selection Guide

Single Application: Next.js + RemixIcon

Monorepo: Next.js + Turborepo + RemixIcon

Framework Features Comparison

Quick Start

Next.js Application

Turborepo Monorepo

RemixIcon Integration

Reference Navigation

Common Patterns & Workflows

Pattern 1: Full-Stack Monorepo

Pattern 2: Shared Component Library

Pattern 3: Optimized Data Fetching

Pattern 4: Monorepo CI/CD Pipeline

Utility Scripts

Best Practices

Resources

Implementation Checklist

FAQ

More from mrgoonie/claudekit-skills

Popular frontend & design skills