Run any Skill in Manus with one click

react-web-feature-architecture

Stars2

Forks0

UpdatedFebruary 27, 2026 at 11:26

React web feature architecture guidelines for LifeOS. Use when creating pages, feature modules, forms, API hooks, global stores, and UI composition in frontend/src for scalable and testable structure.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

pvidaal07

pvidaal07/LifeOS

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

2 files

SKILL.md

readonly

name	react-web-feature-architecture
description	React web feature architecture guidelines for LifeOS. Use when creating pages, feature modules, forms, API hooks, global stores, and UI composition in frontend/src for scalable and testable structure.

React Web Feature Architecture

Objetivo

Organizar frontend por features para escalar sin acoplar vistas, estado y acceso a API.

REQUIRED

Estructurar por dominio/feature (auth, dashboard, studies, etc.).
Separar UI reusable (components) de lógica de feature.
Centralizar cliente HTTP en frontend/src/api.
Usar TanStack Query para estado servidor (fetch/cache/retry).
Reservar Zustand para estado cliente/global (sesión, UI).
Tipar respuestas API y normalizar errores en hooks.
Mantener páginas ligeras: composición + navegación, no reglas de negocio.

NEVER

No duplicar lógica de fetching en múltiples componentes.
No mezclar estado remoto en stores globales sin necesidad.
No acoplar componentes de UI a endpoints concretos.

Flujo recomendado

Definir contrato API del feature.
Crear api.* + hook de query/mutation.
Crear componentes presentacionales.
Componer página y cubrir estados loading/error/empty/success.

More from this repository

same repository

nestjs-best-practices

pvidaal07/LifeOS

NestJS best practices and architecture patterns for building production-ready applications. This skill should be used when writing, reviewing, or refactoring NestJS code to ensure proper patterns for modules, dependency injection, security, and performance.

2026-02-272

api-contracts

pvidaal07/LifeOS

API DTO and response contract rules for LifeOS backend/frontend compatibility. Use when adding or changing endpoints, request/response DTOs, error payloads, versioning decisions, or Swagger/OpenAPI documentation.

2026-02-272

auth-and-ownership

pvidaal07/LifeOS

Authentication and ownership enforcement rules for LifeOS multi-user isolation. Use when creating or changing auth flows, guarded endpoints, user-scoped queries, or nested resource access checks.

2026-02-272

clean-architecture-ddd

pvidaal07/LifeOS

Clean Architecture + DDD rules for this repo. Triggers: adding/refactoring code across src/domain|application|infrastructure, moving files between layers, creating ports/adapters/use-cases.

2026-02-272

docker-selfhost

pvidaal07/LifeOS

Docker Compose self-hosting conventions for LifeOS development and production. Use when editing compose files, environment variables, service networking, persistent volumes, health checks, or deployment workflows.

2026-02-272

docs

pvidaal07/LifeOS

Repository documentation conventions for LifeOS. Use when creating or updating README, docs/*, architecture notes, API behavior notes, or implementation decisions that must remain clear for future contributors and agents.

2026-02-272

name	react-web-feature-architecture
description	React web feature architecture guidelines for LifeOS. Use when creating pages, feature modules, forms, API hooks, global stores, and UI composition in frontend/src for scalable and testable structure.

React Web Feature Architecture

Objetivo

Organizar frontend por features para escalar sin acoplar vistas, estado y acceso a API.

REQUIRED

Estructurar por dominio/feature (auth, dashboard, studies, etc.).
Separar UI reusable (components) de lógica de feature.
Centralizar cliente HTTP en frontend/src/api.
Usar TanStack Query para estado servidor (fetch/cache/retry).
Reservar Zustand para estado cliente/global (sesión, UI).
Tipar respuestas API y normalizar errores en hooks.
Mantener páginas ligeras: composición + navegación, no reglas de negocio.

NEVER

No duplicar lógica de fetching en múltiples componentes.
No mezclar estado remoto en stores globales sin necesidad.
No acoplar componentes de UI a endpoints concretos.

Flujo recomendado

Definir contrato API del feature.
Crear api.* + hook de query/mutation.
Crear componentes presentacionales.
Componer página y cubrir estados loading/error/empty/success.