web-frameworks

Guide Next.js, Turborepo, and RemixIcon usage in web app development.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill web-frameworks-luan-thnh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-frameworks
Source: https://github.com/luan-thnh/hrm-auto-extension/tree/main/.opencode/skills/web-frameworks
Command: npx skills add https://github.com/luan-thnh/hrm-auto-extension --skill web-frameworks-luan-thnh

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This skill provides a structured approach for building modern full-stack web applications using Next.js, Turborepo, and RemixIcon, aligning architecture decisions and tooling.

Core Features & Use Cases

  • Next.js-based SSR/SSG/App Router patterns for scalable UIs
  • Turborepo-powered monorepo workflows with task pipelines and caching
  • RemixIcon integration for consistent iconography across apps
  • Clear guidance on monorepo structure, workspace setup, and shared UI packages
  • Use cases include building dashboards, documentation sites, marketing sites, and internal tools

Quick Start

Create a Next.js app with App Router, install RemixIcon, and bootstrap a Turborepo workspace.

Frequently Asked Questions about web-frameworks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up a Next.js monorepo with Turborepo?▼

To set up a Next.js monorepo with Turborepo, bootstrap a Turborepo workspace, configure the Next.js App Router for your applications, and establish shared UI packages across the workspace. This skill provides explicit steps for bootstrapping and deployment readiness.

What is the best way to structure a full-stack Next.js app with server components?▼

The best way to structure a full-stack Next.js app with server components is using the App Router within a Turborepo monorepo. This consolidates SSR and SSG patterns, aligning architecture decisions and tooling for scalable UIs and shared packages.

How does Turborepo caching work for Next.js applications?▼

Turborepo caching works for Next.js applications by configuring task pipelines within the monorepo workspace. This skill enforces structured project setup and caching strategies to optimize build times across multiple packages and shared UI components.

Can I use RemixIcon across multiple packages in a Turborepo monorepo?▼

Yes, you can use RemixIcon across multiple packages in a Turborepo monorepo. This skill guides unified iconography integration, ensuring consistent RemixIcon usage throughout your Next.js applications and shared workspace packages.

Do I need a monorepo to use Next.js App Router and server components effectively?▼

You do not need a monorepo to use the Next.js App Router and server components, as this skill covers single-application workflows. However, adopting a Turborepo monorepo architecture is recommended for managing shared UI packages and scaling full-stack applications.