sec-multi-monorepo-add-nextjs

Bootstrap domain-scoped frontend monorepos with Next.js, Expo, and pnpm workspaces.

Updated Mar 28, 2026

Search Tags:#ui #frontend #scaffold #monorepo #nextjs #workspaces #expo

Ready to run

npx skills add https://github.com/diegolirio/ai-showcase-skills --skill sec-multi-monorepo-add-nextjs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sec-multi-monorepo-add-nextjs
Source: https://github.com/diegolirio/ai-showcase-skills/tree/main/skills/sec-multi-monorepo-add-nextjs
Command: npx skills add https://github.com/diegolirio/ai-showcase-skills --skill sec-multi-monorepo-add-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffolds or extends a frontend monorepo with Next.js web apps, Expo mobile apps, shared domain UI packages, and a root-level shared-front package. Use when the user asks to create or extend a frontend structure for one or more projects, including templates like {{project-name}}-web, {{project-name}}-mobile, and {{project-name}}-ui, regardless of backend language or stack.

Core Features & Use Cases

Scaffolds Next.js web apps, Expo mobile apps, and shared UI packages within a domain folder, keeping frontend code decoupled from backend technologies.
Enforces a consistent monorepo layout: {project-name}-web, {project-name}-mobile, {project-name}-ui, and a root shared-front for cross-project sharing.
Supports multiple domain projects within a repo and uses pnpm workspaces for efficient dependency management.

Quick Start

Run sec-multi-monorepo-add-nextjs <project-name> inside the repository to scaffold the frontend monorepo structure for that domain.

Frequently Asked Questions about sec-multi-monorepo-add-nextjs

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

FAQPage Schema

How do I scaffold a frontend monorepo with Next.js and Expo?▼

Scaffolding a frontend monorepo creates domain-scoped folders for Next.js web apps, Expo mobile apps, and shared UI packages using pnpm workspaces. It enforces a consistent layout with {project-name}-web, {project-name}-mobile, and {project-name}-ui directories.

What's the best way to share UI components across web and mobile apps in a monorepo?▼

Sharing UI components across web and mobile apps is handled by creating a shared {project-name}-ui package and a root shared-front layer within the pnpm workspaces structure. This keeps frontend code decoupled from backend technologies.

Does this monorepo scaffold work with existing repositories or only new projects?▼

This monorepo scaffold works with both new projects and existing repositories that require a consistent multi-project frontend layout. It can extend an existing repo by adding domain-scoped folders without dictating backend technologies.

Can I manage multiple domain projects within a single pnpm workspaces monorepo?▼

Managing multiple domain projects within a single pnpm workspaces monorepo is supported by scaffolding separate domain folders for each project. Each domain gets its own web, mobile, and UI structure alongside the root shared-front package.

How do I structure a monorepo to keep frontend code decoupled from the backend?▼

Structuring a monorepo to keep frontend code decoupled from the backend involves implementing a domain-scoped layout with separate web, mobile, and UI folders under a root shared-front package. This approach manages frontend dependencies independently of the backend stack.

When do I need a domain-scoped folder structure for my frontend apps?▼

A domain-scoped folder structure is needed when starting new projects or extending existing repos that require a consistent multi-project frontend layout. It organizes Next.js and Expo apps into distinct domains using pnpm workspaces.