react-design
CommunityStandardize React module structure.
Software Engineering#architecture#frontend#react#best-practices#module#design-guide#folder-structure
AuthorTing-s515
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill defines a standardized React module architecture to reduce ambiguity and accelerate project setup across teams.
Core Features & Use Cases
- Provides a default folder scheme for modules: src/app/{ModuleName}/ with components/, hooks/, services/, context/, utils/, and types/ to ensure consistency and scalability.
- Documents responsibilities per layer and recommended examples to speed up onboarding and collaboration.
- Serves as a reference for AI-assisted generation of React module designs and for validating new projects against the standard.
Quick Start
Create a new React module following the specified folder structure and naming conventions.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: react-design Download link: https://github.com/Ting-s515/skills/archive/main.zip#react-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.