web-frameworks_skill

This skill helps you build and optimize modern full-stack web apps using Next.js, Turborepo, and RemixIcon for efficient monorepos and scalable UI.

Python

2

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill mamba-mental/agent-skill-manager --skill web-frameworks

SKILL.md9.2 KB

Overview

This skill bundles modern tools for building full-stack React applications using Next.js (App Router, Server Components, SSR/SSG/ISR), Turborepo for monorepo management and caching, and RemixIcon for consistent SVG iconography. It focuses on fast iteration, scalable monorepo patterns, and production-ready rendering and caching strategies. Use it to standardize app structure, performance optimizations, and shared UI libraries across multiple projects.

How this skill works

The skill provides recipes and utilities to scaffold Next.js apps (App Router and Server Components), integrate RemixIcon fonts or SVG components, and configure Turborepo pipelines for parallel builds and remote caching. It includes patterns for shared packages (ui, types, config), optimized data fetching (revalidate, streaming), and CI/CD examples to run targeted or full builds. Python helper scripts automate project initialization and monorepo migration.

When to use it

Starting a new full-stack React app that needs SSR, SSG, or streaming server components
Creating a monorepo with multiple apps and shared component libraries
Improving build times using caching, parallel pipelines, and remote cache
Standardizing iconography across projects with RemixIcon (webfont or SVG)
Migrating an existing multi-package repo to a Turborepo pipeline

Best practices

Default to Server Components; mark client components explicitly to minimize client bundle size
Structure repo with clear apps/ and packages/ separation and define outputs for caching
Use Image and font optimization in Next.js and set explicit revalidation policies
Enable remote caching in Turborepo for team speedups and configure task dependencies (^build)
Use RemixIcon webfonts for many icons and SVG components for isolated icons; provide aria-labels

Example use cases

Single-app SaaS product using Next.js App Router and RemixIcon for UI elements
Monorepo with customer web, admin dashboard, and a shared UI package using Turborepo
Static-generated blog with hourly revalidation and image/font optimizations
CI pipeline that runs lint, test, and turbo build with remote caching for faster PR feedback
Migrating legacy multi-repo UI components into a shared packages/ui with RemixIcon components

FAQ

Use webfonts when you need many icons across the app for smaller bundle overhead; use SVG components for single or interactive icons where props like size and color are required.

How do I speed up CI builds in a monorepo?

Configure Turborepo outputs and enable remote caching so unchanged packages reuse previous build artifacts; run targeted tasks with filters to avoid rebuilding unrelated packages.