Can this skill help with API integration?

Yes, it uses a custom service layer that leverages shared Zod schemas from the monorepo to ensure frontend and backend types stay perfectly in sync.

What testing practices does it enforce?

It prioritizes unit tests for logic, followed by MSW integration tests for API interactions, using Vitest and React Testing Library as the primary toolset.

How does it handle state management differently than standard React?

It implements a specific decision tree: TanStack Query for server-side data (caching) and Zustand with Immer for complex local UI state, reducing boilerplate and improving performance.

Which frontend frameworks are supported by this skill?

This skill is specifically optimized for React 18, TypeScript, and Expo for mobile, focusing on modern patterns like functional components and hooks.

Template Frontend Architect

Name: Template Frontend Architect
Author: ugudlado

byugudlado

Design Tools

Implements type-safe frontend components and state management patterns using React, TanStack Query, and Zustand within a monorepo architecture.

About

This skill equips Claude with specialized knowledge of the Template Project's frontend ecosystem, enabling the creation of robust, type-safe web and mobile interfaces. It provides deep expertise in React 18 patterns, server-state caching with TanStack Query, and immutable client-state management using Zustand and Immer. By leveraging shared Zod schemas and a centralized component library, this skill ensures architectural consistency, streamlines API integration, and enforces best practices for testing and form validation across TypeScript monorepos.

Key Features

End-to-end type safety using shared Zod schemas for API requests and responses
Predictable global UI state management using Zustand with Immer middleware
Sophisticated server-state management and caching via TanStack Query
Standardized testing patterns using Vitest, React Testing Library, and MSW v2
0 GitHub stars
Component-driven development following a strict reusable library hierarchy

Use Cases

Optimizing data fetching and state synchronization between React frontends and Express APIs
Architecting reusable UI components that sync seamlessly across web and mobile platforms
Implementing complex form logic with real-time Zod validation and react-hook-form

About

Key Features

End-to-end type safety using shared Zod schemas for API requests and responses
Predictable global UI state management using Zustand with Immer middleware
Sophisticated server-state management and caching via TanStack Query
Standardized testing patterns using Vitest, React Testing Library, and MSW v2
0 GitHub stars
Component-driven development following a strict reusable library hierarchy

Use Cases

Optimizing data fetching and state synchronization between React frontends and Express APIs
Architecting reusable UI components that sync seamlessly across web and mobile platforms
Implementing complex form logic with real-time Zod validation and react-hook-form