api-client
Use when setting up API clients - TanStack Query, Axios, JWT token management, error handling, or response parsing. NOT when plain fetch calls, non-API data handling, or unrelated UI logic.
npx skills add majiayu000/claude-skill-registry --skill api-client-aiskillstore-marketplace --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Provides an API client workflow for setting up API clients with TanStack Query, Axios, JWT token management via interceptors, global error handling with toasts, and type-safe response parsing using Zod. It also includes patterns for pagination, optimistic updates, and offline/abort support.
How it works
- Sets up TanStack Query configuration in a dedicated file, including default staleTime, gcTime, retry with exponential backoff, and a wrapped app provider.
- Creates an Axios-based API client with a baseURL and timeout, and attaches a request interceptor to insert a JWT from the auth store into Authorization headers.
- Configures a response interceptor to handle 401 by triggering a token refresh; on refresh failure, redirects to the login flow.
- Exposes generic API helpers (useApi and useApiMutation) that perform GET/POST requests via the apiClient and optionally validate responses with an optional Zod schema, surfacing errors through a global error handler.
- Implements a global error handler that maps common HTTP statuses to toasts and displays error messages from responses or defaults.
- Provides typed data definitions and Zod schemas (e.g., StudentSchema, AttendanceSchema) and a PaginatedResponse schema to validate and parse responses.
- Includes hooks for data fetching (useStudents), mutations (useUpdateStudent, useDeleteStudent) with invalidations and success messages, and an infinite query pattern for paginated lists.
- Adds optimistic updates for UI responsiveness and rollback on error, as well as offline detection and AbortController support for cancelable requests.
When to use it
- Triggered when user requests API setup, data fetching, JWT token handling, error handling, response parsing, and pagination flows as described in the trigger set (e.g., "Setup API client", "Fetch student data", "Attach JWT token", "Paginated list").
What it can touch
- Interceptors and Axios instance in lib/apiClient.ts
- TanStack Query setup in lib/queryClient.ts
- Error handling via lib/errorHandler.ts
- API hooks in hooks/useApi.ts
- Type definitions in lib/api/types.ts
- Feature hooks like hooks/useStudents.ts and related attendance hooks (implied by sections)
Caveats
- The implementation relies on an auth-store for JWT retrieval and token refresh logic (no token source or refresh mechanism defined beyond the provided snippet).
- Token refresh flow assumes a refresh function available from the auth store and a redirect path on failure.
- Some sections reference project-specific UI tooling (toasts via sonner) and environment variables for API URLs.
- The review summarizes concrete code structure and behavior as described in the provided skill contents; actual file paths and exact file contents are not re-listed here.
# API Client Skill ## Overview Expert guidance for API client implementation using TanStack Query/Axios, including JWT token attachment via interceptors, global error handling with toasts, type-safe response parsing with Zod, and offline detection for robust data fetching. ## When This Skill Applies This skill triggers when users request: - **API Setup**: "Setup API client", "Configure TanStack Query", "Axios instance" - **Data Fetching**: "Fetch student data", "Get attendance", "API calls" - **JWT/Token**: "Attach JWT token", "Bearer token headers", "Token refresh" - **Error Handling**: "API error toast", "Handle 401", "Retry failed requests" - **Response Parsing**: "Type-safe responses", "Zod validation", "Parse API data" - **Pagination**: "Paginated list", "Infinite query", "Load more data" ## Core Rules ### 1. Setup: TanStack Query Configuration ```typescript // lib/queryClient.ts import { QueryClient } from '@tanstack/react-query'; export const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 5 * 60 * 1000, // 5 minutes gcTime: 10 * 60 * 1000, // 10 minutes retry: 3, retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), }, mutations: {
- Overview
- When This Skill Applies
- Core Rules
- 1. Setup: TanStack Query Configuration
- 2. JWT: Interceptors Auto-Attach
- 3. Errors: Global Handler
- 4. Parsing: Typed Responses, Optimistic Updates
- Output Requirements
- Code Files
- Integration Requirements
- Documentation
- Workflow
- Quality Checklist
- Common Patterns
For production
What does the api-client skill do?
Use when setting up API clients - TanStack Query, Axios, JWT token management, error handling, or response parsing. NOT when plain fetch calls, non-API data handling, or unrelated UI logic.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill api-client-aiskillstore-marketplace --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From majiayu000/claude-skill-registry, a repository with 534 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.