valec3 Frontend Architecture Feature Based
When to use this skill
- Starting a new React/frontend project
- Refactoring a monolithic structure
- Organizing code by business features
- Implementing domain-driven design in frontend
Workflow
- Identify business features/domains
- Create feature folders with clear boundaries
- Colocate related code (components, hooks, tests, styles)
- Define public API for each feature
- Avoid cross-feature dependencies
Instructions
Folder Structure
src/
├── features/
│ ├── auth/
│ │ ├── components/
│ │ │ ├── LoginForm.tsx
│ │ │ └── RegisterForm.tsx
│ │ ├── hooks/
│ │ │ └── useAuth.ts
│ │ ├── api/
│ │ │ └── authApi.ts
│ │ ├── types/
│ │ │ └── auth.types.ts
│ │ └── index.ts # Public API
│ ├── products/
│ │ ├── components/
│ │ ├── hooks/
│ │ └── index.ts
│ └── cart/
├── shared/
│ ├── components/ # Shared UI
│ ├── hooks/
│ └── utils/
└── app/
├── App.tsx
└── routes.tsx
Key Principles
1. Feature Colocation Keep all code related to a feature together:
// features/products/index.ts (Public API)
export { ProductList } from './components/ProductList';
export { useProducts } from './hooks/useProducts';
export type { Product } from './types/product.types';
2. Import Rules
- Features can import from
shared/ - Features CANNOT import from other features
- Use the public API (index.ts) only
3. Shared Code
Only extract to shared/ when:
- Used by 3+ features
- Truly generic (not business logic)
Resources
- Check existing skills for patterns