What tech stack does this skill prefer?

It is optimized for React 19, Vite, TanStack (Router, Query, Form, Table), Zustand, and testing with Vitest and Playwright.

How does this skill differ from the ui-designer skill?

While the ui-designer skill focuses on visuals, Tailwind CSS, and accessibility, this skill handles business logic, state management, and core system architecture.

Why use the Gateway Pattern in frontend development?

The Gateway Pattern abstracts external resources (like APIs) behind interfaces, allowing you to use 'Fake' implementations for fast, reliable unit testing without a live backend.

Is this skill based on Clean Architecture?

No, it specifically uses a 'simplified pragmatic' architecture that removes the complexity of Clean Architecture layers in favor of direct, feature-based organization.

Frontend Architecture Engineer

Name: Frontend Architecture Engineer
Author: marcioaltoe

bymarcioaltoe

•

Developer Tools

Implements scalable, testable frontend architectures using React 19, TanStack, and Zustand with a focus on pragmatic design patterns.

About

This skill empowers Claude to act as a senior frontend architect, specializing in a simplified, feature-based approach that avoids the over-engineering often found in heavy architectural frameworks. It provides structured patterns for React 19 applications, leveraging the TanStack ecosystem for routing and data fetching, Zustand for framework-agnostic state management, and the Gateway Pattern for decoupled, testable external service communication. It is ideal for developers building production-grade web applications who prioritize maintainability and rapid feature iteration without sacrificing architectural integrity or testability.

Key Features

Modern React 19 patterns including the use() hook and advanced orchestration
Context API-based dependency injection for seamless unit testing with fakes
Gateway Pattern implementation to decouple business logic from HTTP infrastructure
7 GitHub stars
Feature-based project organization for high code modularity and isolation
Pragmatic state management orchestration using Zustand and TanStack Query

Use Cases

Refactoring complex component logic into framework-agnostic, testable Zustand stores
Bootstrapping a new React 19 project with a production-ready, scalable folder structure
Implementing robust HTTP communication layers with mockable gateway interfaces

About

Key Features

Modern React 19 patterns including the use() hook and advanced orchestration
Context API-based dependency injection for seamless unit testing with fakes
Gateway Pattern implementation to decouple business logic from HTTP infrastructure
7 GitHub stars
Feature-based project organization for high code modularity and isolation
Pragmatic state management orchestration using Zustand and TanStack Query

Use Cases

Refactoring complex component logic into framework-agnostic, testable Zustand stores
Bootstrapping a new React 19 project with a production-ready, scalable folder structure
Implementing robust HTTP communication layers with mockable gateway interfaces