meta-structure

Standardize TypeScript/React project layouts with directory and file placement rules.

1|Updated Sep 12, 2025

Search Tags:#typescript #react #structure #code-architecture #project-organization #file-placement #component-layout

Ready to run

npx skills add https://github.com/JimmyTranDev/dotfiles --skill meta-structure

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: meta-structure
Source: https://github.com/JimmyTranDev/dotfiles/tree/main/src/opencode/skills/meta-structure
Command: npx skills add https://github.com/JimmyTranDev/dotfiles --skill meta-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often confront tangled and inconsistent project structures in TypeScript/React apps, making onboarding, collaboration, and maintenance time-consuming and error-prone.

Core Features & Use Cases

Standardized directory layout for core app concerns (app, components, hooks, services, stores, schemas, config, assets, styles)
Clear file placement rules that guide where each artifact lives (pages/routes, components, hooks, utilities)
Guidance for feature-based or layered organization to improve scalability and readability

Quick Start

Create or adopt a standardized TS/React project skeleton following the described layout and naming conventions, then structure your code accordingly.

Frequently Asked Questions about meta-structure

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

FAQPage Schema

What is the best way to structure a scalable TypeScript and React project?▼

To organize a React application, follow a standardized directory layout that separates core concerns such as components, hooks, services, and routing. This prevents tangled file placement and ensures consistent project organization across team members.

How do I organize TypeScript React components, hooks, and services in a team project?▼

Standardizing TypeScript React project structure solves disorganized layouts by enforcing placement rules for components, hooks, and services. This reduces onboarding time and maintenance errors by providing a consistent, predictable directory structure for all artifacts.

When do I need a standardized file placement convention for my React app?▼

Feature-based organization groups code by specific application capabilities rather than technical role. This approach works well for large TypeScript React projects because it improves scalability and readability by keeping related components, hooks, and services together.

What is the difference between feature-based and layered organization in TypeScript React apps?▼

For solo apps, standardizing TypeScript React project structure provides clear file placement rules for components, hooks, and routing. This prevents layout inconsistencies from accumulating as the application grows, ensuring the codebase remains readable and maintainable.

Can I use a standardized project structure for solo TypeScript React apps?▼

Without standardized file placement rules, TypeScript React projects develop tangled and inconsistent layouts. This disorganization makes onboarding new team members time-consuming and causes collaboration and code maintenance to become highly error-prone.

Why does inconsistent code architecture cause maintenance issues in React?▼

To implement this structure, create a TypeScript React project skeleton and adopt the described directory layout and naming conventions. Then, structure your code accordingly by placing pages, components, hooks, and utilities in their designated directories.