Can I migrate between architectures as my team grows?

Yes, the skill defines a clear migration path (Flat to Feature-Based to FSD to Monorepo) allowing for incremental restructuring without total rewrites.

How does this help with new project initialization?

It integrates with the /init agent to detect your project needs and automatically generate a comprehensive ARCHITECTURE.md specification file.

Is this skill limited to Next.js?

While optimized for Next.js and React workflows, the architectural principles and documentation patterns are applicable to most modern frontend frameworks.

Which patterns does this skill support?

It supports four primary patterns: Flat (for prototypes), Feature-Based (for small teams), Feature-Sliced Design (FSD for medium teams), and Monorepo (for large-scale projects).

Does it enforce a specific folder structure?

While it provides strict reference guides for file placement and import boundaries, the agents are designed to adapt these patterns to your actual project context.

Next.js & React Architecture Patterns

Name: Next.js & React Architecture Patterns
Author: ByeongminLee

byByeongminLee

•

開発者ツール

Guides project structure decisions for Next.js and React applications using standardized architectural patterns.

This skill provides a comprehensive reference guide for implementing various architectural patterns in Next.js and React environments, ranging from simple flat structures to complex Feature-Sliced Design (FSD) and monorepos. It enables Claude Code to assist in initial project setup, define import boundaries, and generate consistent architecture specifications based on team size and project complexity, ensuring long-term maintainability and scalability through a spec-driven workflow.

主な機能

01Automated generation of spec/ARCHITECTURE.md via the /init agent

02Defined migration paths for scaling projects incrementally

03Standardized patterns for Flat, Feature-Based, FSD, and Monorepo structures

041 GitHub stars

05Decision logic for selecting architectures based on team size and complexity

06Clear guidance on file placement and unidirectional layer hierarchies

ユースケース

01Standardizing import boundaries and module encapsulation in a growing codebase

02Bootstrapping a new Next.js project with a scalable folder structure

03Documenting project architecture for onboarding and team alignment

主な機能

01Automated generation of spec/ARCHITECTURE.md via the /init agent

02Defined migration paths for scaling projects incrementally

03Standardized patterns for Flat, Feature-Based, FSD, and Monorepo structures

041 GitHub stars

05Decision logic for selecting architectures based on team size and complexity

06Clear guidance on file placement and unidirectional layer hierarchies

ユースケース

01Standardizing import boundaries and module encapsulation in a growing codebase

02Bootstrapping a new Next.js project with a scalable folder structure

03Documenting project architecture for onboarding and team alignment