react-project-standard

What This Skill Does

The react-project-standard skill provides a comprehensive architectural blueprint and development framework for React + TypeScript projects. It enforces industry-standard directory structures, module-based component design, and scalable state management strategies. By utilizing this skill, developers ensure that their codebases remain maintainable, modular, and consistent across team collaborations. It acts as an architectural consultant that guides the creation of features, hooks, services, and styling, ensuring that every new addition adheres to the established project hierarchy.

Installation

Run the following command in your terminal to integrate the skill into your OpenClaw environment:

clawhub install openclaw/skills/skills/bovinphang/react-project-standard

Use Cases

• Project Initialization: Establishing a robust foundation for a new React application.
• Feature Refactoring: Migrating loose files into a structured features/ directory to improve cohesion.
• Code Review & Consistency: Auditing existing components against the defined best practices for performance and directory placement.
• Team Onboarding: Providing developers with a clear roadmap of where specific logic (API, hooks, styles) should reside, reducing cognitive load for new members.

Example Prompts

• "I need to add a new User Management feature. Can you suggest a directory structure inside src/features/ and generate the initial index.ts export?"
• "How should I organize my API service layer using the services/ structure defined in the standards? Please provide a code template."
• "Review this component file. It feels bloated—can you help me split it into the recommended components/, hooks/, and api.ts structure?"

Tips & Limitations

• Adaptability: The structure is designed to be pruned for smaller projects. Do not feel compelled to use every folder if your project is simple.
• TypeScript Strictness: This skill assumes strict TypeScript configuration. Ensure your tsconfig.json is updated to support path aliases (e.g., @/components/*) to match the structural imports.
• Scope: While this provides architectural guidance, it does not replace specific library-level implementations (like Redux or TanStack Query) but rather provides the container for them. Always tailor the logic to the specific needs of your business domain.