| name | react-design-mean |
| description | React frontend architecture for MEAN stack apps. Use when designing component trees, page layouts, routing strategies, state management, and UI patterns for React applications. |
React Design Mean
Purpose
Design React frontend architectures for MEAN stack applications. Produce component hierarchies, page layouts, routing plans, state management strategies, and UI patterns that frontend developers implement directly.
Key Patterns
Component Architecture (Atomic Design)
- Atoms: Button, Input, Spinner, Badge
- Molecules: SearchBar, FormField, NavLink
- Organisms: Navbar, UserCard, PostList, CommentForm
- Templates: DashboardLayout, PublicLayout
- Pages: HomePage, LoginPage, DashboardPage
Folder Structure
- src/components/common/ — Reusable atoms + molecules
- src/components/layout/ — Layout components (Navbar, Sidebar, Footer, PageWrapper)
- src/components/features/ — Feature-specific organisms
- src/pages/ — One per route
- src/hooks/ — Custom hooks (useAuth, useFetch, useForm)
- src/context/ — React Context providers
- src/services/ — API client and service layer
- src/utils/ — Utility functions
- src/constants/ — App-wide constants
Routing Strategy (React Router v6)
- Public routes wrapped in PublicLayout (Navbar + Footer)
- Protected routes wrapped in ProtectedRoute + DashboardLayout
- Nested layouts using Outlet
- 404 catch-all route
State Management Strategy
- Local state: useState for component-specific state
- Context API: useContext for global lightweight state (auth, theme)
- Server state: Custom useFetch hook for API data (caching, loading, error)
- URL state: useSearchParams for filters, pagination, search
Auth Pattern
- AuthContext provides: user, login(), logout(), isAuthenticated
- ProtectedRoute checks auth and redirects to /login
- API interceptor attaches JWT token to every request
- Token refresh handled transparently in interceptor
Conventions
- Functional components only — no class components
- File naming: PascalCase for components, camelCase for hooks/utils
- One component per file, co-locate styles and tests
- Custom hooks prefix with "use"
- Pages are thin — compose feature components, don't contain business logic
- Loading states: every async operation shows a spinner/skeleton
- Error states: every data fetch has error UI with retry option
- Empty states: every list has an empty state message
- Responsive design: mobile-first approach
Knowledge Strategy
- Patterns to capture: Component hierarchies that scaled well, routing patterns, state management decisions
- Examples to collect: Page layouts, auth flow implementations, reusable hook patterns
- Update permission: Agents may freely add/update files in
references/. Changes to SKILL.md or scripts/ require user approval.
