skills.rest
abhilash-nandkumar
abhilash-nandkumarCOMMUNITY
Explore all skills by this author →
GitHub

project-structure

Organize React/Next.js/TypeScript code into feature-based src/features modules.

Updated Nov 8, 2022
Search Tags:#typescript#architecture#react#maintainability#next.js#project-structure#feature-based
One-click install
npx skills add https://github.com/abhilash-nandkumar/dot_config --skill project-structure-abhilash-nandkumar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: project-structure
Source: https://github.com/abhilash-nandkumar/dot_config/tree/main/opencode/skills/project-structure
Command: npx skills add https://github.com/abhilash-nandkumar/dot_config --skill project-structure-abhilash-nandkumar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Organizes code by feature/domain to improve maintainability, scalability, and collaboration in React/Next.js/TypeScript projects by reducing coupling and enabling independent feature teams.

Core Features & Use Cases

  • Feature-based module layout under src/features, with dedicated api, components, hooks, stores, and types per feature.
  • Enforces unidirectional code flow: shared → features → app, preventing cross-feature imports and encouraging composability.
  • Useful for new projects and major refactors, providing a repeatable template for organizing routing, data access, and UI components.

Quick Start

Apply a feature-based layout from the start and migrate existing files into the corresponding feature folders.

Frequently Asked Questions about project-structure

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

FAQPage Schema
What is a feature-based project structure for React and Next.js?▼

A feature-based project structure organizes code by domain under src/features, with dedicated api, components, hooks, stores, and types per feature. This reduces coupling and improves maintainability in scalable TypeScript applications.

How do I organize a scalable TypeScript project to prevent cross-feature imports?▼

Organize a scalable TypeScript project by enforcing unidirectional code flow: shared → features → app. This layout prevents cross-feature imports and encourages composability by keeping feature modules isolated.

When should I refactor my React app to a feature-based architecture?▼

Refactor to a feature-based architecture during major re-architecting or when enabling independent feature teams. It provides clear boundaries and a repeatable template for organizing routing, data access, and UI components.

Can I apply a feature-based layout to an existing Next.js application?▼

Yes, you can apply a feature-based layout to existing Next.js applications. Migrate current files into corresponding feature folders under src/features to establish clear domain boundaries and unidirectional code flow.

What is the best way to structure routing and data access in a scalable Next.js app?▼

The best way to structure routing and data access is using a feature-based layout that separates app routes, APIs, and components. This enforces unidirectional code flow from shared utilities to feature modules.

Related Skills

Explore More Software Engineering Skills→
haidonglethqbhaidonglethqb

ck:web-frameworks

Scaffold and configure Next.js App Router apps with Turborepo monorepos.

Community
Advanced
pproencapproenca
193

feature-arch

Organize React applications using feature-based architecture principles.

Community
Advanced
vultisigvultisig
19

React Query Patterns

Implement React Query hooks for data fetching and state management.

Official
Intermediate
BarryrnBarryrn

architect

Plan and document software architecture decisions with a structured decision framework.

Community
Basic