frontend-axios

Create an Axios client with interceptors for authenticated API requests.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-axios
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-axios
Source: https://github.com/Kwondongkyun/claude-code-settings/tree/main/skills/frontend-axios
Command: npx skills add https://github.com/Kwondongkyun/claude-code-settings --skill frontend-axios

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a centralized, ready-to-use Axios client setup for API communication in frontend apps, including interceptors for auth and error handling, plus a consistent pattern for API functions in features.

Core Features & Use Cases

  • Axios instance with baseURL, timeout, and JSON headers to standardize all requests.
  • Request & response interceptors for SSR guards, token injection, and automatic refresh token flow.
  • API function patterns in features/* to organize domain-specific calls and predictable naming.
  • Three-tier error handling across interceptors, API calls, and UI feedback to ensure robust UX.

Quick Start

Configure the Axios instance and import the generated API functions to start making authenticated requests with automatic token refresh.

Frequently Asked Questions about frontend-axios

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Axios interceptors for automatic token refresh in a frontend app?

Axios interceptors handle automatic token refresh by intercepting failed authenticated requests and executing the refresh token flow before retrying. This client provides centralized token injection and uniform error handling across all features.

What is a three-tier error handling strategy for API calls?

A three-tier error handling strategy manages API failures across interceptors, individual API calls, and UI feedback layers. This approach ensures robust UX by catching errors globally, handling them locally in features, and displaying consistent user notifications.

How do I configure a centralized Axios instance with baseURL and timeout for SPA projects?

Configuring a centralized Axios instance requires setting a baseURL, timeout, and JSON headers to standardize all HTTP requests. This environment-aware client ensures consistent configuration and API communication across SPA features.

Does this Axios client setup support environment-aware baseURL configuration?

Yes, the Axios client setup supports environment-aware baseURL configuration. It applies an environment-aware HTTP client pattern that dynamically adjusts the request endpoint based on the current deployment environment of the frontend application.

What is the best way to organize domain-specific API functions in frontend features?

The best way to organize domain-specific API functions is using a consistent pattern within feature directories. This approach groups related API calls together with predictable naming conventions, ensuring maintainable and uniform request handling across the frontend.

Why do I need request interceptors for SSR guards in frontend API communication?

Request interceptors provide SSR guards to prevent improper server-side request execution without valid authentication context. They ensure token injection happens correctly and consistently before requests leave the client, securing API communication.