Does this skill support TanStack Query (React Query)?

Yes, it provides optimized configurations for QueryClient, custom hooks for data fetching, and mutation patterns including optimistic updates.

Is this compatible with Next.js?

Yes, the patterns provided are designed for modern frontend environments, including Next.js (App and Pages router) and Vite-based React apps.

Can I use this for global error handling?

Absolutely. It includes patterns for custom ApiError classes, standardized fetch wrappers, and React Error Boundary components to handle failures gracefully.

How does this skill ensure type safety?

It utilizes Zod to validate API responses at runtime and infer TypeScript types, ensuring your data matches your expectations at both compile-time and runtime.

Frontend API Integration Expert

Name: Frontend API Integration Expert
Author: Genuineh

byGenuineh

0•

API開発

Streamlines the creation of type-safe API layers with robust error handling and efficient state management using modern tools like Zod and TanStack Query.

This skill provides a comprehensive framework for managing frontend data fetching and state synchronization. It guides Claude in implementing type-safe requests via Zod and ts-rest, setting up standardized global error handling strategies, and optimizing application performance with TanStack Query. It is an essential companion for developers building complex React applications that require reliable data fetching, optimistic UI updates, and maintainable API interaction patterns.

主な機能

01Type-safe request validation using Zod schemas

02Standardized global error handling and UI Error Boundaries

03Contract-driven development with ts-rest integration

04Advanced React Query patterns for caching and prefetching

05Optimistic update logic for seamless user experiences

060 GitHub stars

ユースケース

01Implementing complex mutation logic with optimistic UI updates in a dashboard

02Refactoring legacy fetch calls to include type validation and error handling

03Building a robust data-fetching layer for a new React or Next.js project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add genuineh/fus frontend-api-integration

For use in Claude.ai and ChatGPT

主な機能

01Type-safe request validation using Zod schemas

02Standardized global error handling and UI Error Boundaries

03Contract-driven development with ts-rest integration

04Advanced React Query patterns for caching and prefetching

05Optimistic update logic for seamless user experiences

060 GitHub stars

ユースケース

01Implementing complex mutation logic with optimistic UI updates in a dashboard

02Refactoring legacy fetch calls to include type validation and error handling

03Building a robust data-fetching layer for a new React or Next.js project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add genuineh/fus frontend-api-integration

For use in Claude.ai and ChatGPT