Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

react-web-feature-architecture

Estrellas2

Forks0

Actualizado27 de febrero de 2026, 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.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

pvidaal07

pvidaal07/LifeOS

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores de softwareOcupaciones informáticas y matemáticas·SOC 15-1252

Explorador de archivos

2 archivos

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.

Más de este repositorio

mismo repositorio

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.