From antigravity-awesome-skills
Provides production-ready patterns for frontend API integration: race condition handling, request cancellation (AbortController), retry strategies, error normalization, and stale-data prevention. Best for React or related frameworks.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antigravity-awesome-skills:frontend-api-integration-patternsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill provides production-ready patterns for integrating frontend applications with backend APIs.
This skill provides production-ready patterns for integrating frontend applications with backend APIs.
Most frontend issues are not caused by APIs being difficult to call, but by incorrect handling of asynchronous behavior—leading to race conditions, stale data, duplicated requests, and poor user experience.
This skill focuses on correctness, resilience, and user experience, not just making API calls work.
/predict, /recommend)Centralize API logic and normalize errors.
export class ApiError extends Error {
constructor(message, status, payload = null) {
super(message);
this.name = "ApiError";
this.status = status;
this.payload = payload;
}
}
export const apiClient = async (url, options = {}) => {
const res = await fetch(url, {
headers: { "Content-Type": "application/json" },
...options,
});
if (!res.ok) {
let payload = null;
try {
payload = await res.json();
} catch (_) {}
throw new ApiError(
payload?.message || "Request failed",
res.status,
payload
);
}
// handle empty responses safely (e.g. 204 No Content)
if (res.status === 204) return null;
const text = await res.text();
return text ? JSON.parse(text) : null;
};
Prevent stale responses from overwriting fresh data.
useEffect(() => {
let cancelled = false;
const load = async () => {
try {
setLoading(true);
setError(null);
const result = await getUser();
if (!cancelled) setData(result);
} catch (err) {
if (!cancelled) setError(err.message);
} finally {
if (!cancelled) setLoading(false);
}
};
load();
return () => {
cancelled = true;
};
}, []);
Use a cancellation flag for non-fetch async logic. For network requests, prefer AbortController.
Cancel in-flight requests to avoid memory leaks and stale updates.
useEffect(() => {
const controller = new AbortController();
const load = async () => {
try {
const data = await getUser({ signal: controller.signal });
setData(data);
} catch (err) {
if (err.name === "AbortError") return;
setError(err.message);
}
};
load();
return () => controller.abort();
}, [userId]);
Retry only transient failures (5xx or network errors).
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
const fetchWithBackoff = async (fn, retries = 3, delay = 300) => {
try {
return await fn();
} catch (err) {
const isAbort = err.name === "AbortError";
const isHttpError = typeof err.status === "number";
const isRetryable = !isAbort && (!isHttpError || err.status >= 500);
if (retries <= 0 || !isRetryable) throw err;
const nextDelay = delay * 2 + Math.random() * 100;
await sleep(nextDelay);
return fetchWithBackoff(fn, retries - 1, nextDelay);
}
};
Avoid excessive API calls (e.g., search inputs).
const useDebounce = (value, delay = 400) => {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const t = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(t);
}, [value, delay]);
return debounced;
};
Prevent duplicate API calls across components.
const inFlight = new Map();
export const dedupedFetch = (key, fn) => {
if (inFlight.has(key)) return inFlight.get(key);
const promise = fn().finally(() => inFlight.delete(key));
inFlight.set(key, promise);
return promise;
};
const controllerRef = useRef(null);
const handlePredict = async (input) => {
controllerRef.current?.abort();
controllerRef.current = new AbortController();
try {
const result = await fetchWithBackoff(() =>
apiClient("/predict", {
method: "POST",
body: JSON.stringify({ text: input }),
signal: controllerRef.current.signal,
})
);
setOutput(result);
} catch (err) {
if (err.name === "AbortError") return;
setError(err.message);
}
};
const debouncedQuery = useDebounce(query, 400);
useEffect(() => {
if (!debouncedQuery) return;
const controller = new AbortController();
searchAPI(debouncedQuery, { signal: controller.signal })
.then(setResults)
.catch((err) => {
if (err.name !== "AbortError") {
setError("Search failed. Please try again.");
}
});
return () => controller.abort();
}, [debouncedQuery]);
const deleteItem = async (id) => {
const previous = items;
setItems((curr) => curr.filter((item) => item.id !== id));
try {
await apiClient(`/items/${id}`, { method: "DELETE" });
} catch (err) {
setItems(previous);
setError("Delete failed. Please try again.");
}
};
Problem: UI shows stale data Solution: Use cancellation or guard against outdated responses
Problem: Too many API calls on input Solution: Use debouncing + cancellation
Problem: Duplicate requests from multiple components Solution: Use request deduplication
Problem: Server overload during retry Solution: Use exponential backoff
Problem: State updates after component unmount Solution: Use AbortController cleanup
npx claudepluginhub sickn33/antigravity-awesome-skills --plugin antigravity-bundle-aas-mobile-app-builderProvides production-ready patterns for integrating frontend apps with backend APIs, handling race conditions, request cancellation, retries, error normalization, and UI state management.
Integrates backend APIs with frontend apps using type-safe patterns: tRPC for E2E type safety, OpenAPI codegen (openapi-typescript, orval), TanStack Query/SWR for data fetching, optimistic updates, error handling.
Guides frontend-to-backend API integration: typed clients (REST/tRPC/OpenAPI), auth refresh, error mapping, upload flows, SSE/WebSocket/polling, and CORS behavior.