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.

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

01Modern React 19 patterns including the use() hook and advanced orchestration

02Context API-based dependency injection for seamless unit testing with fakes

03Gateway Pattern implementation to decouple business logic from HTTP infrastructure

047 GitHub stars

05Feature-based project organization for high code modularity and isolation

06Pragmatic state management orchestration using Zustand and TanStack Query

Use Cases

01Refactoring complex component logic into framework-agnostic, testable Zustand stores

02Bootstrapping a new React 19 project with a production-ready, scalable folder structure

03Implementing robust HTTP communication layers with mockable gateway interfaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add marcioaltoe/claude-craftkit frontend-engineer

For use in Claude.ai and ChatGPT

Download Skill