Jeden Skill in Manus ausführen
mit einem Klick

Jeden Skill in Manus mit einem Klick ausführen

react-web-feature-architecture

Sterne2

Forks0

Aktualisiert27. Februar 2026 um 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

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

In Manus ausführen

Quelle

pvidaal07

pvidaal07/LifeOS

GitHub-Repository öffnen Creator-Repositorys ansehen

Download

In Manus ausführen

Verwandte BerufeSOC

Basierend auf der SOC-Berufsklassifikation

SoftwareentwicklerInformatik- und Mathematikberufe·SOC 15-1252

Datei-Explorer

2 Dateien

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.

Mehr aus diesem Repository

gleiches 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.