module-organisation

Organize React/TypeScript codebases into responsibility-based directories with per-tool subdirectories.

5|Updated Apr 1, 2026

Search Tags:#architecture #react #tools #services #code-organization #code-structure #module-organisation

Ready to run

npx skills add https://github.com/TechyMT/claude-code-superpowers --skill module-organisation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: module-organisation
Source: https://github.com/TechyMT/claude-code-superpowers/tree/main/skills/module-organisation
Command: npx skills add https://github.com/TechyMT/claude-code-superpowers --skill module-organisation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Organizes a codebase so responsibilities (capabilities, commands, services, app state, hooks, utilities, and components) are separated and discoverable, preventing business logic from leaking into UI and avoiding implicit state coupling.

Core Features & Use Cases

Clear layer boundaries: tools/ for capabilities, commands/ for user-facing commands, services/ for orchestration and external APIs, state/ for the single AppState, hooks/ for subscriptions, utils/ for pure functions, and components/ for TUI rendering.
Per-tool subdirectories and file-extension signals: each tool gets its own namespace and .tsx vs .ts signals rendering concerns.
Use Case: Add a new file-operation capability or trace why a UI action touches disk by following the directory conventions to find the tool, service, and state selectors involved.

Quick Start

Create a new capability by adding src/tools/[Name]Tool/[Name]Tool.tsx, export it as a named constant, and register it in src/tools.ts.

Frequently Asked Questions about module-organisation

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

FAQPage Schema

How do I organize React code by responsibility instead of feature?▼

To organize React code by responsibility, separate capabilities, commands, services, application state, hooks, components, and utilities into distinct directories to prevent business logic from leaking into the UI.

Why does business logic leak into my React terminal application components?▼

Business logic leaks into components when a codebase lacks clear layer boundaries. Separating tools, commands, services, state, hooks, and components into distinct directories isolates rendering concerns from orchestration logic.

How do I add a new tool capability to a TypeScript React codebase?▼

To add a new tool capability, create a file like src/tools/[Name]Tool/[Name]Tool.tsx, export it as a named constant, and register it in src/tools.ts to maintain per-tool subdirectories.

Should I use .ts or .tsx file extensions when organizing React code structure?▼

Use .tsx file extensions to signal rendering concerns and .ts for non-rendering logic. This distinction helps separate capabilities, services, and pure utility functions from TUI components.

Can I trace why a UI action touches disk in a React application?▼

Yes, you can trace UI behavior by following directory conventions for tools, services, and state selectors. This structure isolates external system integrations and allows you to trace disk operations explicitly.

What is the best way to manage AppState in a TypeScript React codebase?▼

The best way to manage AppState is to maintain a single AppState source within a dedicated state/ directory. This prevents implicit state coupling and avoids logic leakage into UI components.