frontend-engineer

Set up feature-based React architecture with Zustand and TanStack tooling.

14|1|Updated Oct 23, 2025

Search Tags:#architecture #frontend #tanstack #zustand #gateway-pattern

Ready to run

npx skills add https://github.com/marcioaltoe/claude-craftkit --skill frontend-engineer-marcioaltoe

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-engineer
Source: https://github.com/marcioaltoe/claude-craftkit/tree/main/plugins/architecture-design/skills/frontend-engineer
Command: npx skills add https://github.com/marcioaltoe/claude-craftkit --skill frontend-engineer-marcioaltoe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill guides frontend architecture focusing on feature-based modules, gateway injection, and Zustand state management.

Core Features & Use Cases

Feature Modules: Organize by business feature.
Gateway Pattern: Interface + HTTP + Fake for testability.
State Management: Integrate Zustand and TanStack tooling.

Quick Start

Outline a minimal feature module with a state store and a gateway.

Frequently Asked Questions about frontend-engineer

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

FAQPage Schema

How do I structure a React application using feature-based modules?▼

Feature-based modules organize your React codebase by business domain rather than by file type. Each feature contains its own pages, state management, gateways, and tests, improving scalability and maintainability. This approach works well with TanStack Router and Zustand for managing state within feature boundaries.

What is the gateway pattern and why use it in frontend architecture?▼

The gateway pattern separates HTTP communication, business logic, and testability by combining an interface, HTTP implementation, and fake implementation. This decoupling lets you test components without real API calls, swap backends easily, and maintain clean separation of concerns across your React application.

How do I integrate Zustand with TanStack Router and TanStack Query?▼

Zustand stores handle local feature state while TanStack Query manages server state and caching. TanStack Router handles navigation. Together they create a cohesive state management layer: Zustand for UI state, Query for async data, and Router for navigation logic, reducing complexity in React components.

Can I use the gateway pattern with Context API for dependency injection?▼

Yes, the gateway pattern pairs naturally with Context API. Wrap your feature module with a Context provider that injects gateway instances. Components consume the context to access gateways without direct imports, enabling flexible testing and runtime gateway substitution.

What testing setup works best with feature-based React architecture?▼

Vitest, React Testing Library, and Playwright form the testing stack for feature modules. Vitest handles unit tests, React Testing Library tests component behavior, and Playwright tests end-to-end workflows. The gateway pattern's fake implementations enable isolated unit testing without external dependencies.

How do I optimize performance across TanStack ecosystem tools?▼

Use TanStack Query's built-in caching and request deduplication to prevent redundant API calls. Pair with Zustand for granular state updates that minimize component re-renders. TanStack Router's code splitting and lazy loading further reduce bundle size and improve load times.