agentsclimarketplace
Sign in

React design mean

Skill endorphin-ai/claude-code-teams/mean-team/.claude/skills/react-design-mean

React frontend architecture for MEAN stack apps. Use when designing component trees, page layouts, routing strategies, state management, and UI patterns for React applications.From its SKILL.md

Install
npx -y skills add endorphin-ai/claude-code-teams --skill react-design-mean

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.8 KB, 557 tokens by cl100k_base, as published. Nobody here has run it

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.

What ships with it: 6 files

10.6 KB alongside SKILL.md

workflows/

Keep looking

Skills are one crate of 326,736. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.