feature-based-structure
CommunityOrganize client code by feature for scalable apps
System Documentation
What problem does it solve?
This skill reduces the complexity of organizing large frontend projects by grouping all code related to a feature in a single place, improving maintainability, readability, and onboarding.
Core Features & Use Cases
- Feature-based organization: All code related to a feature lives under src/client/features/{name}/, including stores, hooks, components, and types.
- Public API and exports: Each feature has an index.ts exposing its public API, encouraging imports from the feature root.
- Scalable teamwork: Teams can work in parallel on different features without conflicts.
- Use cases: For example migrating an existing monolithic frontend into feature modules; adding a new feature like settings; reorganizing a large repo.
Quick Start
Use the feature-based structure to organize your client code as described above. Create the directory src/client/features/{name}/ and add store.ts, hooks.ts, types.ts, index.ts. Ensure each feature exports are centralized in its index.ts and import code from the feature root instead of internal files. E.g., a new feature named payments would live at src/client/features/payments/.
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: feature-based-structure Download link: https://github.com/gileck/app-template-ai/archive/main.zip#feature-based-structure 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.