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

0•

디자인 도구

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

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.

주요 기능

01End-to-end type safety using shared Zod schemas for API requests and responses

02Predictable global UI state management using Zustand with Immer middleware

03Sophisticated server-state management and caching via TanStack Query

04Standardized testing patterns using Vitest, React Testing Library, and MSW v2

050 GitHub stars

06Component-driven development following a strict reusable library hierarchy

사용 사례

01Optimizing data fetching and state synchronization between React frontends and Express APIs

02Architecting reusable UI components that sync seamlessly across web and mobile platforms

03Implementing complex form logic with real-time Zod validation and react-hook-form

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ugudlado/react-expo-api-template frontend-engineer

For use in Claude.ai and ChatGPT

Download Skill