skills.rest
JewelsHovan
JewelsHovanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

component-organization

Organize React TypeScript codebases into barrel-exported src/ directory structures.

Updated Nov 1, 2025
One-click install
npx skills add https://github.com/JewelsHovan/pain-plus-site --skill component-organization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-organization
Source: https://github.com/JewelsHovan/pain-plus-site/tree/main/frontend/.claude/skills/component-organization
Command: npx skills add https://github.com/JewelsHovan/pain-plus-site --skill component-organization

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining a scalable React TypeScript codebase becomes unwieldy without a consistent structure. This Skill provides a standardized layout that promotes reuse, clean separation of concerns, and predictable imports across UI bases, composed components, and routing.

Core Features & Use Cases

  • Standard Directory Layout: Enforces src/ with components/ui, components/shared, pages, layouts, and optional assets/references/scripts.
  • Barrel Exports Policy: Encourages index.ts barrels to simplify imports and enable safe refactors.
  • Guided Component Organization: Distinguishes base UI components (ui), composed components (shared), and page-level routing (pages).
  • Use Case: You are adding a new button component used by multiple features; place it under components/ui and export via barrel; then reuse across pages.

Quick Start

Follow the component-organization guide to lay out your src/ folders and create barrel exports. Start by creating an index.ts barrel in each directory, add base and composed components under the correct folders, and use the recommended naming conventions.

Frequently Asked Questions about component-organization

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

FAQPage Schema
How do I structure a React TypeScript project for scalability?▼

Organize a React TypeScript codebase using a standardized src/ layout containing components/ui, components/shared, pages, and layouts. This enforces clean separation of concerns, predictable imports, and modularization across UI bases and routing.

What are barrel exports and how do they clean up React imports?▼

Barrel exports use index.ts files within directories to re-export modules, simplifying React imports. They enable clean import statements and safe refactors by providing a single, predictable entry point for your components and pages.

Where should I place shared versus base UI components in React?▼

Place base UI components under components/ui and composed components under components/shared. This distinction separates foundational visual elements from higher-level composed components to enforce reusability and maintainable refactors.

What is the best way to organize React pages and layouts directories?▼

Organize React pages and layouts by placing page-level routing components in the pages directory and structural wrappers in layouts. Both use index.ts barrel exports to standardize routing architecture and simplify imports.

Can I include assets and scripts in my React src directory structure?▼

Yes, the standardized src/ layout optionally includes directories for assets, references, and scripts alongside components, pages, and layouts. This keeps all related project files organized within a single predictable root structure.

Related Skills

KILWA73KILWA73

boilerplate-architect

Scaffold standard directory layouts and TypeScript configs for repositories.

Community
Intermediate
adrian729adrian729

frontend-bundle-size

Analyze React and Next.js import graphs to reduce bundle size.

Community
Intermediate
guichefferguicheffer
3

imports-exports

Enforce ESLint rules for TypeScript import ordering and named exports.

Community
Intermediate
theodrosyimertheodrosyimer

react-patterns

Separate UI from business logic in React apps with components, hooks, and DI.

Community
Intermediate