← ClaudeAtlas

api-integrationlisted

Wire the app to a backend API — data fetching, caching, error handling, loading states. Use when connecting to an endpoint, adding a fetch layer, or fixing API error and loading behaviour. React-query detail lives in tanstack-react-query-patterns.
ajyadav013/claude-kit · ★ 12 · API & Backend · score 75
Install: claude install-skill ajyadav013/claude-kit
Integrate API for: $ARGUMENTS. ## Steps 1. **Identify the API**: Determine the endpoint(s), HTTP method(s), request/response shapes, and authentication requirements for $ARGUMENTS. 2. **Define types**: Create typed interfaces for request and response payloads. Co-locate types with the API client module according to the project's conventions. ```typescript // TypeScript example export interface GetItemsParams { page: number; limit: number; status?: 'open' | 'resolved' | 'escalated'; } export interface ItemResponse { data: Item[]; total: number; page: number; } ``` ```python # Python example (Pydantic) from pydantic import BaseModel class GetItemsParams(BaseModel): page: int limit: int status: str | None = None class ItemResponse(BaseModel): data: list[Item] total: int page: int ``` 3. **Create API client functions**: Place in the project's designated API layer as pure async functions. Use the project's HTTP client. ```typescript // TypeScript example import { httpClient } from '@/lib/httpClient'; import type { GetItemsParams, ItemResponse } from './types/items'; export async function getItems(params: GetItemsParams): Promise<ItemResponse> { const { data } = await httpClient.get<ItemResponse>('/items', { params }); return data; } export async function resolveItem(id: string, resolution: string): Promise<void> { await http