web-frameworks_skill

This skill helps you build modern React apps with Next.js, Turborepo, and RemixIcon, optimizing monorepos, SSR/SSG, and shared UI components.

Python

0

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 jjuidev/jss --skill web-frameworks

SKILL.md8.8 KB

Overview

This skill teaches how to build modern React applications using Next.js (App Router, Server Components, SSR/ISR) together with Turborepo for scalable monorepos and RemixIcon for UI icons. It covers project structure, build optimization, caching strategies, and shared package workflows. Practical Python utilities are included to initialize projects and migrate monorepos.

How this skill works

The skill inspects and prescribes patterns for Next.js app architecture (App Router, RSC, data fetching and caching) and shows how to arrange apps and packages inside a Turborepo pipeline for fast incremental builds. It includes integration guidance for RemixIcon (webfont and React components) and provides utility scripts to scaffold projects or migrate existing repositories. CI/CD and caching configurations are included to speed builds and ensure reproducible deployments.

When to use it

Starting a single Next.js app that needs SSR, RSC, or static generation
Managing multiple apps and shared libraries in a monorepo with Turborepo
Optimizing build times and enabling remote/local caching for teams
Creating a consistent, accessible icon system across apps using RemixIcon
Migrating an existing repository into a Turborepo-managed monorepo

Best practices

Default to Server Components and opt into Client Components only when necessary
Structure monorepos with clear apps/ and packages/ separation and explicit task deps
Configure turbo.json outputs and enable remote caching for team performance
Use Next.js image/font optimizations and set revalidation policies (force-cache/revalidate)
Prefer webfont usage for many icons and SVG components for single/icon-heavy interactive elements
Provide aria-labels and use currentColor to keep icons themeable and accessible

Example use cases

A SaaS product with customer-facing web app, admin dashboard, and a shared design system in a monorepo
An e-commerce storefront using SSR for SEO, ISR for frequently updated products, and Turborepo to speed CI builds
Documentation site plus component library where RemixIcon is consumed from a packages/ui shared package
Migrating multiple loosely related repositories into a single Turborepo with configured caching and CI pipelines
Rapid prototyping of marketing pages with Next.js App Router and reusable UI components from a shared package

FAQ

No. Turborepo adds build orchestration and caching that scale well for many apps and shared packages, but small projects can remain separate if the overhead isn't justified.

When should I use Server Components vs Client Components?

Default to Server Components for data fetching, SEO, and smaller client bundles. Use Client Components when you need browser-only APIs, state, or interactivity.