react-feature-frontend

Name: react-feature-frontend
Availability: InStock
Author: Kauanphbbb

Define feature-based frontend architecture with React Query and Zustand separation.

Updated Aug 27, 2026

Search Tags:#typescript #architecture #frontend #react #monorepo #zustand #react-query

Ready to run

npx skills add https://github.com/Kauanphbbb/my-schedule --skill react-feature-frontend

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-feature-frontend
Source: https://github.com/Kauanphbbb/my-schedule/tree/main/skills/react-feature-frontend
Command: npx skills add https://github.com/Kauanphbbb/my-schedule --skill react-feature-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a standardized blueprint for implementing feature-based frontend code in the my-schedule project, ensuring consistent structure, tooling, and exports across teams.

Core Features & Use Cases

Feature-based folders under src/features that map 1:1 to domain concepts
Centralized service wrappers for API calls
React Query and Zustand integration patterns
Clear export surface via index.ts in feature folders

Quick Start

Create a new frontend feature following the 1:1 domain mapping and export only what other features need via index.ts.

Frequently Asked Questions about react-feature-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I structure a React feature folder to separate server state and UI state?▼

Standardize React feature architecture by mapping domain concepts 1:1 to folders under src/features, isolating UI state in Zustand, managing server state via React Query, and exposing a dedicated service layer.

What is the best way to organize frontend code in a React monorepo with TypeScript?▼

Organize a React monorepo by enforcing a feature-based folder layout with strict typing, dedicated service wrappers for API calls, and explicit export surfaces through index.ts files for cross-feature consumption.

How do I isolate feature-specific state when using Zustand and React Query together?▼

Isolate feature state by creating dedicated Zustand stores for UI state and using React Query for server state, wrapping API interactions in a centralized service layer within each feature folder.

Does a feature-based React architecture work with strict TypeScript typing?▼

Feature-based React architecture supports strict TypeScript typing by defining typed data contracts for server responses and enforcing explicit export surfaces to maintain type safety across monorepo packages.

How do I expose React feature components to other features in a monorepo?▼

Expose React feature components by defining an explicit export surface using index.ts files within each feature folder, ensuring only necessary hooks, components, and types are available to other features.

When should I avoid using a feature-based folder structure in React?▼

Avoid feature-based folder structures in React for small, non-domain-driven applications where the overhead of isolated stores, service wrappers, and explicit export surfaces outweighs the architectural benefits.