skills.rest
suwandre
suwandreCOMMUNITY
Explore all skills by this author →
Website𝕏@jdogelsGitHub

project-structure

Organize React/Next.js/TypeScript projects into feature-based folder structures.

Updated Apr 26, 2026
Search Tags:#typescript#architecture#react#nextjs#project-structure#feature-based#unidirectional-flow
One-click install
npx skills add https://github.com/suwandre/my-opencode-config --skill project-structure-suwandre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-structure
Source: https://github.com/suwandre/my-opencode-config/tree/main/skills/project-structure
Command: npx skills add https://github.com/suwandre/my-opencode-config --skill project-structure-suwandre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Organizes React/Next.js/TypeScript projects by feature/domain to improve maintainability and scalability, reducing cross-cutting dependencies and simplifying onboarding.

Core Features & Use Cases

  • Feature-based structure: organize code by feature/domain (src/features, src/app) to promote isolation and clear ownership.
  • Unidirectional code flow: enforce a top-down data flow and module boundaries to reduce coupling.
  • Practical guidance: provides examples for top-level and feature-level folders, routing placement, API organization, state management, and shared utilities.
  • Use Case: When starting a new React/Next.js project or reorganizing an existing codebase, apply this structure to accelerate collaboration and maintainability.

Quick Start

Refactor your project to a feature-based structure by moving code into src/features, src/app, and shared folders as described.

Frequently Asked Questions about project-structure

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

FAQPage Schema
What is feature-based architecture in React and Next.js projects?▼

Feature-based architecture organizes React and Next.js code by domain into isolated folders like src/features and src/app, promoting clear ownership and reducing cross-cutting dependencies to improve maintainability.

How do I refactor an existing React project to a feature-based folder structure?▼

Refactor your React project by moving code into src/features, src/app, and shared utility folders, applying top-level and feature-level directory recommendations to enforce modularity and unidirectional data flow.

What is the best way to organize state management and API placement in a scalable TypeScript app?▼

The best way to organize state and APIs in a scalable TypeScript app is using a feature-based structure that specifies routing, API organization, and state management placement within isolated feature folders to enforce unidirectional data flow.

Can I use linting constraints to enforce module boundaries and unidirectional data flow in Next.js?▼

Yes, you can use linting constraints to enforce modularity and unidirectional data flow in Next.js, preventing cross-cutting dependencies and ensuring feature isolation within your project structure.

When should I avoid a feature-based folder structure for my React application?▼

You should avoid a feature-based folder structure if your React application is small with minimal cross-cutting dependencies, as the overhead of maintaining isolated feature folders may outweigh the maintainability benefits.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
KKodiacKKodiac
1

swift-composable-architecture

Implement TCA Features with State, Action, Reducer, and Store patterns.

Community
Advanced
ThomashighbaughThomashighbaugh
1

project-structure

Organize React/Next.js/TypeScript codebases into feature folders under src.

Community
Intermediate
mcj-codermcj-coder
1

scoped-colocation

Group related files by feature or domain within a single directory.

Community
Intermediate