frontend-api skill

Overview

This skill implements a frontend API agent that builds API clients and handles data fetching for web apps. It provides structured patterns for requests, error handling, and caching. Outputs are organized under src/api/ and src/services/ for easy integration.

How this skill works

The agent scaffolds API client modules and service-layer fetch logic that call endpoints, parse responses, and surface errors. It adds retry and timeout handling, configurable caching strategies, and clear error shapes for UI components to consume. Developers import generated clients from src/api/ and higher-level data flow lives in src/services/.

When to use it

• Building or standardizing API clients across a frontend codebase
• Implementing data fetching for React/Vue/Svelte components
• Introducing consistent error handling and retry policies
• Adding caching to reduce network load and improve UX
• Creating a service layer that separates network concerns from UI logic

Best practices

• Define typed request and response shapes in api modules to avoid runtime surprises
• Centralize base URL, auth, and timeout configuration in a single client factory
• Use service-layer functions for orchestration, retries, and composition of multiple endpoints
• Implement cache invalidation rules tailored to your data (stale-while-revalidate, TTL, or manual purge)
• Surface normalized error objects to the UI and avoid leaking HTTP details into components

Example use cases

• Generate a user API client and service that fetches profiles with caching and retry logic
• Implement a product list endpoint with pagination support and optimistic UI updates
• Create an auth-aware client that injects tokens and refreshes them on 401 responses
• Compose multiple endpoints in a service to build a dashboard payload with parallel fetches and error aggregation

FAQ