api-client
Centralized TypeScript API client with typed namespaces, automatic token refresh with request deduplication, TanStack Query integration, and consistent error handling.
npx skills add majiayu000/claude-skill-registry --skill api-client --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.
# TypeScript API Client Centralized API client with typed namespaces, automatic token refresh, and TanStack Query integration. ## When to Use This Skill - Building frontend applications that call backend APIs - Need type safety on requests and responses - Want automatic token refresh without duplicated logic - Using TanStack Query for caching and state management ## Core Concepts The pattern provides: - Typed namespaces (auth, users, billing, etc.) - Automatic token refresh with request deduplication - TanStack Query integration for caching - Consistent error handling with custom error class Architecture: ``` Component → useQuery/useMutation → API Client → Fetch ↓ 401? → Refresh → Retry ``` ## Implementation ### TypeScript ```typescript // lib/api/types.ts export class APIClientError extends Error { constructor( message: string, public code: string, public statusCode: number, public details?: Record<string, unknown> ) { super(message); this.name = 'APIClientError'; } } export interface TokenPair { accessToken: string; refreshToken: string; expiresAt: string; } // lib/api/client.ts interface RequestOptions { method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE'; body?: Record<string,
- When to Use This Skill
- Core Concepts
- Implementation
- TypeScript
- TanStack Query Integration
- Usage Examples
- Component Usage
- Best Practices
- Common Mistakes
- Related Patterns
What does the api-client skill do?
Centralized TypeScript API client with typed namespaces, automatic token refresh with request deduplication, TanStack Query integration, and consistent error handling.
How do I install it?
Run `npx skills add majiayu000/claude-skill-registry --skill api-client --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.