diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json index 5cd0a82c..5f43df3b 100644 --- a/.claude-plugin/plugin.json +++ b/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "10.5.0", - "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,417 supported skills.", + "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,418 supported skills.", "author": { "name": "sickn33 and contributors", "url": "https://github.com/sickn33/antigravity-awesome-skills" diff --git a/CATALOG.md b/CATALOG.md index 5a5bf712..a95ec98a 100644 --- a/CATALOG.md +++ b/CATALOG.md @@ -2,7 +2,7 @@ Generated at: 2026-02-08T00:00:00.000Z -Total skills: 1433 +Total skills: 1434 ## architecture (95) @@ -469,7 +469,7 @@ Total skills: 1433 | `yes-md` | 6-layer AI governance: safety gates, evidence-based debugging, anti-slack detection, and machine-enforced hooks. Makes AI safe, thorough, and honest. | yes, md | yes, md, layer, ai, governance, safety, gates, evidence, debugging, anti, slack, detection | | `youtube-automation` | Automate YouTube tasks via Rube MCP (Composio): upload videos, manage playlists, search content, get analytics, and handle comments. Always search tools firs... | youtube | youtube, automation, automate, tasks, via, rube, mcp, composio, upload, videos, playlists, search | -## development (206) +## development (207) | Skill | Description | Tags | Triggers | | --- | --- | --- | --- | @@ -566,6 +566,7 @@ Total skills: 1433 | `fp-ts-errors` | Handle errors as values using fp-ts Either and TaskEither for cleaner, more predictable TypeScript code. Use when implementing error handling patterns with f... | fp, ts, errors | fp, ts, errors, handle, values, either, taskeither, cleaner, predictable, typescript, code, implementing | | `fp-ts-pragmatic` | A practical, jargon-free guide to fp-ts functional programming - the 80/20 approach that gets results without the academic overhead. Use when writing TypeScr... | fp, ts, pragmatic | fp, ts, pragmatic, practical, jargon, free, functional, programming, 80, 20, approach, gets | | `fp-types-ref` | Quick reference for fp-ts types. Use when user asks which type to use, needs Option/Either/Task decision help, or wants fp-ts imports. | fp-ts, typescript, quick-reference, option, either, task | fp-ts, typescript, quick-reference, option, either, task, fp, types, ref, quick, reference, ts | +| `frontend-api-integration-patterns` | Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies,... | frontend, api-integration, javascript, react, async | frontend, api-integration, javascript, react, async, api, integration, integrating, applications, backend, apis, including | | `frontend-design` | You are a frontend designer-engineer, not a layout generator. | frontend | frontend, designer, engineer, layout, generator | | `frontend-developer` | Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. | frontend | frontend, developer, react, components, responsive, layouts, handle, client, side, state, masters, 19 | | `frontend-mobile-development-component-scaffold` | You are a React component architecture expert specializing in scaffolding production-ready, accessible, and performant components. Generate complete componen... | frontend, mobile, component | frontend, mobile, component, development, scaffold, react, architecture, specializing, scaffolding, accessible, performant, components | diff --git a/README.md b/README.md index fd7f6474..50e00832 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,13 @@ - -# 🌌 Antigravity Awesome Skills: 1,433+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More + +# 🌌 Antigravity Awesome Skills: 1,434+ Agentic Skills for Claude Code, Gemini CLI, Cursor, Copilot & More -> **Installable GitHub library of 1,433+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** +> **Installable GitHub library of 1,434+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants.** Antigravity Awesome Skills is an installable GitHub library and npm installer for reusable `SKILL.md` playbooks. It is designed for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, Kiro, OpenCode, GitHub Copilot, and other AI coding assistants that benefit from structured operating instructions. Instead of collecting one-off prompt snippets, this repository gives you a searchable, installable catalog of skills, bundles, workflows, plugin-safe distributions, and practical docs that help agents perform recurring tasks with better context, stronger constraints, and clearer outputs. You can use this repo to install a broad multi-tool skill library, start from role-based bundles, or jump into workflow-driven execution for planning, coding, debugging, testing, security review, infrastructure, product work, and growth tasks. The root README is intentionally a high-signal landing page: understand what the project is, install it quickly, choose the right tool path, and then follow deeper docs only when you need them. -**Start here:** [Star the repo](https://github.com/sickn33/antigravity-awesome-skills/stargazers) · [Install in 1 minute](#installation) · [Choose your tool](#choose-your-tool) · [Best skills by tool](#best-skills-by-tool) · [📚 Browse 1,433+ Skills](#browse-1433-skills) · [Bundles](docs/users/bundles.md) · [Workflows](docs/users/workflows.md) · [Plugins for Claude Code and Codex](docs/users/plugins.md) +**Start here:** [Star the repo](https://github.com/sickn33/antigravity-awesome-skills/stargazers) · [Install in 1 minute](#installation) · [Choose your tool](#choose-your-tool) · [Best skills by tool](#best-skills-by-tool) · [📚 Browse 1,434+ Skills](#browse-1434-skills) · [Bundles](docs/users/bundles.md) · [Workflows](docs/users/workflows.md) · [Plugins for Claude Code and Codex](docs/users/plugins.md) [![GitHub stars](https://img.shields.io/badge/⭐%2034%2C000%2B%20Stars-gold?style=for-the-badge)](https://github.com/sickn33/antigravity-awesome-skills/stargazers) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) @@ -28,7 +28,7 @@ You can use this repo to install a broad multi-tool skill library, start from ro - **Installable, not just inspirational**: use `npx antigravity-awesome-skills` to put skills where your tool expects them. - **Built for major agent workflows**: Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, Kiro, OpenCode, Copilot, and more. -- **Broad coverage with real utility**: 1,433+ skills across development, testing, security, infrastructure, product, and marketing. +- **Broad coverage with real utility**: 1,434+ skills across development, testing, security, infrastructure, product, and marketing. - **Faster onboarding**: bundles and workflows reduce the time from "I found this repo" to "I used my first skill". - **Useful whether you want breadth or curation**: browse the full catalog, start with top bundles, or compare alternatives before installing. @@ -127,7 +127,7 @@ Start with [Bundles](docs/users/bundles.md) for role-based recommendations, [Wor ## Best Skills By Tool -If you want a faster answer than "browse all 1,433+ skills", start with a tool-specific guide: +If you want a faster answer than "browse all 1,434+ skills", start with a tool-specific guide: - **[Claude Code skills](docs/users/claude-code-skills.md)**: install paths, starter skills, prompt examples, and plugin marketplace flow. - **[Cursor skills](docs/users/cursor-skills.md)**: best starter skills for `.cursor/skills/`, UI-heavy work, and pair-programming flows. @@ -183,7 +183,7 @@ If Antigravity starts hitting context limits with too many active skills, the ac If you use OpenCode or another `.agents/skills` host, prefer a reduced install up front instead of copying the full library into a context-sensitive runtime. The installer now supports `--risk`, `--category`, and `--tags` so you can keep the installed set narrow. -## Browse 1,433+ Skills +## Browse 1,434+ Skills Use the root repo as a landing page, then jump into the deeper surface that matches your intent. @@ -574,6 +574,9 @@ We officially thank the following contributors for their help in making this rep - [@justmiroslav](https://github.com/justmiroslav) - [@1bcMax](https://github.com/1bcMax) - [@xiaolai](https://github.com/xiaolai) +- [@avij1109](https://github.com/avij1109) +- [@mark1ian](https://github.com/mark1ian) +- [@voidborne-d](https://github.com/voidborne-d) ## Star History diff --git a/apps/web-app/public/sitemap.xml b/apps/web-app/public/sitemap.xml index 9647ffab..69b92622 100644 --- a/apps/web-app/public/sitemap.xml +++ b/apps/web-app/public/sitemap.xml @@ -12,6 +12,12 @@ weekly 0.7 + + http://localhost/skill/frontend-api-integration-patterns + 2026-04-24 + weekly + 0.7 + http://localhost/skill/skyvern-browser-automation 2026-04-24 @@ -240,10 +246,4 @@ weekly 0.7 - - http://localhost/skill/ui-component - 2026-04-24 - weekly - 0.7 - diff --git a/apps/web-app/public/skills.json.backup b/apps/web-app/public/skills.json.backup index c972bd8d..a03d8104 100644 --- a/apps/web-app/public/skills.json.backup +++ b/apps/web-app/public/skills.json.backup @@ -13097,6 +13097,28 @@ "reasons": [] } }, + { + "id": "frontend-api-integration-patterns", + "path": "skills/frontend-api-integration-patterns", + "category": "frontend", + "name": "frontend-api-integration-patterns", + "description": "Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-23", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "frontend-design", "path": "skills/frontend-design", diff --git a/data/aliases.json b/data/aliases.json index 10a9bed3..16a389eb 100644 --- a/data/aliases.json +++ b/data/aliases.json @@ -67,6 +67,7 @@ "framework-migration-migrate": "framework-migration-code-migrate", "framework-migration-upgrade": "framework-migration-deps-upgrade", "framework-migration-modernize": "framework-migration-legacy-modernize", + "frontend-api-patterns": "frontend-api-integration-patterns", "frontend-mobile-scaffold": "frontend-mobile-development-component-scaffold", "frontend-mobile-scan": "frontend-mobile-security-xss-scan", "full-stack-feature": "full-stack-orchestration-full-stack-feature", diff --git a/data/bundles.json b/data/bundles.json index 68d4df44..cb4abadc 100644 --- a/data/bundles.json +++ b/data/bundles.json @@ -170,6 +170,7 @@ "fp-ts-pragmatic", "fp-ts-react", "fp-types-ref", + "frontend-api-integration-patterns", "frontend-design", "frontend-dev-guidelines", "frontend-developer", diff --git a/data/catalog.json b/data/catalog.json index 444bceab..04ae94ec 100644 --- a/data/catalog.json +++ b/data/catalog.json @@ -1,6 +1,6 @@ { "generatedAt": "2026-02-08T00:00:00.000Z", - "total": 1433, + "total": 1434, "skills": [ { "id": "00-andruia-consultant", @@ -14512,6 +14512,34 @@ ], "path": "skills/freshservice-automation/SKILL.md" }, + { + "id": "frontend-api-integration-patterns", + "name": "frontend-api-integration-patterns", + "description": "Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.", + "category": "development", + "tags": [ + "frontend", + "api-integration", + "javascript", + "react", + "async" + ], + "triggers": [ + "frontend", + "api-integration", + "javascript", + "react", + "async", + "api", + "integration", + "integrating", + "applications", + "backend", + "apis", + "including" + ], + "path": "skills/frontend-api-integration-patterns/SKILL.md" + }, { "id": "frontend-design", "name": "frontend-design", diff --git a/data/plugin-compatibility.json b/data/plugin-compatibility.json index dea5c40a..dcf804e7 100644 --- a/data/plugin-compatibility.json +++ b/data/plugin-compatibility.json @@ -11212,6 +11212,25 @@ }, "runtime_files": [] }, + { + "id": "frontend-api-integration-patterns", + "path": "skills/frontend-api-integration-patterns", + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [], + "blocked_reasons": { + "codex": [], + "claude": [] + }, + "runtime_files": [] + }, { "id": "frontend-design", "path": "skills/frontend-design", @@ -27401,10 +27420,10 @@ } ], "summary": { - "total_skills": 1433, + "total_skills": 1434, "supported": { - "codex": 1402, - "claude": 1417 + "codex": 1403, + "claude": 1418 }, "blocked": { "codex": 31, diff --git a/docs/integrations/jetski-cortex.md b/docs/integrations/jetski-cortex.md index 4f5730c1..3fab76a5 100644 --- a/docs/integrations/jetski-cortex.md +++ b/docs/integrations/jetski-cortex.md @@ -1,9 +1,9 @@ --- title: Jetski/Cortex + Gemini Integration Guide -description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.433+ skills." +description: "Use antigravity-awesome-skills with Jetski/Cortex without hitting context-window overflow with 1.434+ skills." --- -# Jetski/Cortex + Gemini: safe integration with 1,1.433+ skills +# Jetski/Cortex + Gemini: safe integration with 1,1.434+ skills This guide shows how to integrate the `antigravity-awesome-skills` repository with an agent based on **Jetski/Cortex + Gemini** (or similar frameworks) **without exceeding the model context window**. @@ -23,7 +23,7 @@ Never do: - concatenate all `SKILL.md` content into a single system prompt; - re-inject the entire library for **every** request. -With over 1,1.433 skills, this approach fills the context window before user messages are even added, causing truncation. +With over 1,1.434 skills, this approach fills the context window before user messages are even added, causing truncation. --- diff --git a/docs/integrations/jetski-gemini-loader/README.md b/docs/integrations/jetski-gemini-loader/README.md index de630829..4f843589 100644 --- a/docs/integrations/jetski-gemini-loader/README.md +++ b/docs/integrations/jetski-gemini-loader/README.md @@ -20,7 +20,7 @@ This example shows one way to integrate **antigravity-awesome-skills** with a Je - How to enforce a **maximum number of skills per turn** via `maxSkillsPerTurn`. - How to choose whether to **truncate or error** when too many skills are requested via `overflowBehavior`. -This pattern avoids context overflow when you have 1,433+ skills installed. +This pattern avoids context overflow when you have 1,434+ skills installed. --- diff --git a/docs/maintainers/repo-growth-seo.md b/docs/maintainers/repo-growth-seo.md index c8af89cc..1230a677 100644 --- a/docs/maintainers/repo-growth-seo.md +++ b/docs/maintainers/repo-growth-seo.md @@ -6,7 +6,7 @@ This document keeps the repository's GitHub-facing discovery copy aligned with t Preferred positioning: -> Installable GitHub library of 1,433+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. +> Installable GitHub library of 1,434+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and other AI coding assistants. Key framing: @@ -20,7 +20,7 @@ Key framing: Preferred description: -> Installable GitHub library of 1,433+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. +> Installable GitHub library of 1,434+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections. Preferred homepage: @@ -28,7 +28,7 @@ Preferred homepage: Preferred social preview: -- use a clean preview image that says `1,433+ Agentic Skills`; +- use a clean preview image that says `1,434+ Agentic Skills`; - mention Claude Code, Cursor, Codex CLI, and Gemini CLI; - avoid dense text and tiny logos that disappear in social cards. diff --git a/docs/maintainers/skills-update-guide.md b/docs/maintainers/skills-update-guide.md index 90b30c90..79ee0afc 100644 --- a/docs/maintainers/skills-update-guide.md +++ b/docs/maintainers/skills-update-guide.md @@ -69,7 +69,7 @@ For manual updates, you need: The update process refreshes: - Skills index (`skills_index.json`) - Web app skills data (`apps\web-app\public\skills.json`) -- All 1,433+ skills from the skills directory +- All 1,434+ skills from the skills directory ## When to Update diff --git a/docs/users/bundles.md b/docs/users/bundles.md index d2b6b5df..079114c9 100644 --- a/docs/users/bundles.md +++ b/docs/users/bundles.md @@ -673,4 +673,4 @@ Found a skill that should be in a bundle? Or want to create a new bundle? [Open --- -_Last updated: March 2026 | Total Skills: 1,433+ | Total Bundles: 37_ +_Last updated: March 2026 | Total Skills: 1,434+ | Total Bundles: 37_ diff --git a/docs/users/claude-code-skills.md b/docs/users/claude-code-skills.md index c79e43d9..dca27a49 100644 --- a/docs/users/claude-code-skills.md +++ b/docs/users/claude-code-skills.md @@ -12,7 +12,7 @@ Install the library into Claude Code, then invoke focused skills directly in the ## Why use this repo for Claude Code -- It includes 1,433+ skills instead of a narrow single-domain starter pack. +- It includes 1,434+ skills instead of a narrow single-domain starter pack. - It supports the standard `.claude/skills/` path and the Claude Code plugin marketplace flow. - It also ships generated bundle plugins so teams can install focused packs like `Essentials` or `Security Developer` from the marketplace metadata. - It includes onboarding docs, bundles, and workflows so new users do not need to guess where to begin. diff --git a/docs/users/gemini-cli-skills.md b/docs/users/gemini-cli-skills.md index 5adc289a..a785891c 100644 --- a/docs/users/gemini-cli-skills.md +++ b/docs/users/gemini-cli-skills.md @@ -12,7 +12,7 @@ Install into the Gemini skills path, then ask Gemini to apply one skill at a tim - It installs directly into the expected Gemini skills path. - It includes both core software engineering skills and deeper agent/LLM-oriented skills. -- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,433+ files. +- It helps new users get started with bundles and workflows rather than forcing a cold start from 1,434+ files. - It is useful whether you want a broad internal skill library or a single repo to test many workflows quickly. ## Install Gemini CLI Skills diff --git a/docs/users/kiro-integration.md b/docs/users/kiro-integration.md index 9e017e95..db6195ab 100644 --- a/docs/users/kiro-integration.md +++ b/docs/users/kiro-integration.md @@ -18,7 +18,7 @@ Kiro is AWS's agentic AI IDE that combines: Kiro's agentic capabilities are enhanced by skills that provide: -- **Domain expertise** across 1,433+ specialized areas +- **Domain expertise** across 1,434+ specialized areas - **Best practices** from Anthropic, OpenAI, Google, Microsoft, and AWS - **Workflow automation** for common development tasks - **AWS-specific patterns** for serverless, infrastructure, and cloud architecture diff --git a/docs/users/usage.md b/docs/users/usage.md index 686e0919..a34ae230 100644 --- a/docs/users/usage.md +++ b/docs/users/usage.md @@ -14,7 +14,7 @@ If you came in through a **Claude Code** or **Codex** plugin instead of a full l When you ran `npx antigravity-awesome-skills` or cloned the repository, you: -✅ **Downloaded 1,433+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) +✅ **Downloaded 1,434+ skill files** to your computer (default: `~/.gemini/antigravity/skills/`; or a custom path like `~/.agent/skills/` if you used `--path`) ✅ **Made them available** to your AI assistant ❌ **Did NOT enable them all automatically** (they're just sitting there, waiting) @@ -34,7 +34,7 @@ Bundles are **curated groups** of skills organized by role. They help you decide **Analogy:** -- You installed a toolbox with 1,433+ tools (✅ done) +- You installed a toolbox with 1,434+ tools (✅ done) - Bundles are like **labeled organizer trays** saying: "If you're a carpenter, start with these 10 tools" - You can either **pick skills from the tray** or install that tray as a focused marketplace bundle plugin @@ -212,7 +212,7 @@ Let's actually use a skill right now. Follow these steps: ## Step 5: Picking Your First Skills (Practical Advice) -Don't try to use all 1,433+ skills at once. Here's a sensible approach: +Don't try to use all 1,434+ skills at once. Here's a sensible approach: If you want a tool-specific starting point before choosing skills, use: @@ -343,7 +343,7 @@ Usually no, but if your AI doesn't recognize a skill: ### "Can I load all skills into the model at once?" -No. Even though you have 1,433+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. +No. Even though you have 1,434+ skills installed locally, you should **not** concatenate every `SKILL.md` into a single system prompt or context block. The intended pattern is: diff --git a/docs/users/visual-guide.md b/docs/users/visual-guide.md index cba75f47..f5c5a3ae 100644 --- a/docs/users/visual-guide.md +++ b/docs/users/visual-guide.md @@ -34,7 +34,7 @@ antigravity-awesome-skills/ ├── 📄 CONTRIBUTING.md ← Contributor workflow ├── 📄 CATALOG.md ← Full generated catalog │ -├── 📁 skills/ ← 1,433+ skills live here +├── 📁 skills/ ← 1,434+ skills live here │ │ │ ├── 📁 brainstorming/ │ │ └── 📄 SKILL.md ← Skill definition @@ -47,7 +47,7 @@ antigravity-awesome-skills/ │ │ └── 📁 2d-games/ │ │ └── 📄 SKILL.md ← Nested skills also supported │ │ -│ └── ... (1,433+ total) +│ └── ... (1,434+ total) │ ├── 📁 apps/ │ └── 📁 web-app/ ← Interactive browser @@ -100,7 +100,7 @@ antigravity-awesome-skills/ ``` ┌─────────────────────────┐ - │ 1,433+ SKILLS │ + │ 1,434+ SKILLS │ └────────────┬────────────┘ │ ┌────────────────────────┼────────────────────────┐ @@ -201,7 +201,7 @@ If you want a workspace-style manual install instead, cloning into `.agent/skill │ ├── 📁 brainstorming/ │ │ ├── 📁 stripe-integration/ │ │ ├── 📁 react-best-practices/ │ -│ └── ... (1,433+ total) │ +│ └── ... (1,434+ total) │ └─────────────────────────────────────────┘ ``` diff --git a/package.json b/package.json index b0e110ee..5b607957 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "10.5.0", - "description": "1,433+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", + "description": "1,434+ agentic skills for Claude Code, Gemini CLI, Cursor, Antigravity & more. Installer CLI.", "license": "MIT", "scripts": { "validate": "node tools/scripts/run-python.js tools/scripts/validate_skills.py", diff --git a/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json b/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json index 5cd0a82c..5f43df3b 100644 --- a/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json +++ b/plugins/antigravity-awesome-skills-claude/.claude-plugin/plugin.json @@ -1,7 +1,7 @@ { "name": "antigravity-awesome-skills", "version": "10.5.0", - "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,417 supported skills.", + "description": "Plugin-safe Claude Code distribution of Antigravity Awesome Skills with 1,418 supported skills.", "author": { "name": "sickn33 and contributors", "url": "https://github.com/sickn33/antigravity-awesome-skills" diff --git a/plugins/antigravity-awesome-skills-claude/skills/frontend-api-integration-patterns/SKILL.md b/plugins/antigravity-awesome-skills-claude/skills/frontend-api-integration-patterns/SKILL.md new file mode 100644 index 00000000..2e3c1cf7 --- /dev/null +++ b/plugins/antigravity-awesome-skills-claude/skills/frontend-api-integration-patterns/SKILL.md @@ -0,0 +1,342 @@ +--- +name: frontend-api-integration-patterns +description: "Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management." +category: frontend +risk: safe +source: community +date_added: "2026-04-23" +author: avij1109 +tags: + - frontend + - api-integration + - javascript + - react + - async +tools: + - claude + - cursor + - gemini + - codex +--- + +# Frontend API Integration Patterns + +## Overview + +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. + +--- + +## When to Use This Skill + +* Connecting frontend apps (React, React Native, Vue, etc.) to backend APIs +* Integrating ML/AI endpoints (`/predict`, `/recommend`) +* Handling asynchronous data in UI +* Fixing stale data, flickering UI, or duplicate requests +* Designing scalable frontend API layers + +--- + +## Core Patterns + +### 1. API Layer (Separation of Concerns) + +Centralize API logic and normalize errors. + +```js id="k1m7r2" +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; +}; +``` + +--- + +### 2. Race-Safe State Management + +Prevent stale responses from overwriting fresh data. + +```js id="y7p4ha" +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. + +--- + +### 3. Request Cancellation (AbortController) + +Cancel in-flight requests to avoid memory leaks and stale updates. + +```js id="l9x2pw" +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]); +``` + +--- + +### 4. Retry with Exponential Backoff + +Retry only transient failures (5xx or network errors). + +```js id="8n3zcf" +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); + } +}; +``` + +--- + +### 5. Debounced API Calls + +Avoid excessive API calls (e.g., search inputs). + +```js id="i2r7wq" +const useDebounce = (value, delay = 400) => { + const [debounced, setDebounced] = useState(value); + + useEffect(() => { + const t = setTimeout(() => setDebounced(value), delay); + return () => clearTimeout(t); + }, [value, delay]); + + return debounced; +}; +``` + +--- + +### 6. Request Deduplication + +Prevent duplicate API calls across components. + +```js id="x8v4km" +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; +}; +``` + +--- + +## Examples + +### Example 1: ML Prediction with Cancellation + +```js id="n5q2pt" +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); + } +}; +``` + +--- + +### Example 2: Debounced Search + +```js id="w4z8yn" +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]); +``` + +--- + +### Example 3: Optimistic UI Update + +```js id="q2k9hz" +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."); + } +}; +``` + +--- + +## Best Practices + +* ✅ Centralize API logic in a dedicated layer +* ✅ Normalize errors using a custom error class +* ✅ Always handle loading, error, and success states +* ✅ Use AbortController for request cancellation +* ✅ Retry only transient failures (5xx) +* ✅ Use debouncing for input-driven APIs +* ✅ Deduplicate identical requests + +--- + +## Anti-Patterns + +* ❌ Retrying 4xx errors +* ❌ No request cancellation (memory leaks) +* ❌ Race-condition-prone state updates +* ❌ Swallowing errors silently +* ❌ Global loading/error state for multiple requests +* ❌ Calling APIs directly inside components repeatedly + +--- + +## Common Pitfalls + +**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 + +--- + +## Limitations + +* These examples use vanilla JavaScript patterns; adapt them to your framework's data-fetching library when using React Query, SWR, Apollo, Relay, or similar tools. +* Do not retry non-idempotent mutations unless the backend provides idempotency keys or another duplicate-safe contract. +* Do not expose privileged API keys in frontend code; proxy sensitive requests through a backend. + +--- + +## Additional Resources + +* https://developer.mozilla.org/en-US/docs/Web/API/AbortController +* https://react.dev +* https://axios-http.com + +--- diff --git a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json index e5bae183..c239bd84 100644 --- a/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json +++ b/plugins/antigravity-awesome-skills/.codex-plugin/plugin.json @@ -19,7 +19,7 @@ "skills": "./skills/", "interface": { "displayName": "Antigravity Awesome Skills", - "shortDescription": "1,402 plugin-safe skills for coding, security, product, and ops workflows.", + "shortDescription": "1,403 plugin-safe skills for coding, security, product, and ops workflows.", "longDescription": "Install a plugin-safe Codex distribution of Antigravity Awesome Skills. Skills that still need hardening or target-specific setup remain available in the repo but are excluded from this plugin.", "developerName": "sickn33 and contributors", "category": "Productivity", diff --git a/plugins/antigravity-awesome-skills/skills/frontend-api-integration-patterns/SKILL.md b/plugins/antigravity-awesome-skills/skills/frontend-api-integration-patterns/SKILL.md new file mode 100644 index 00000000..2e3c1cf7 --- /dev/null +++ b/plugins/antigravity-awesome-skills/skills/frontend-api-integration-patterns/SKILL.md @@ -0,0 +1,342 @@ +--- +name: frontend-api-integration-patterns +description: "Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management." +category: frontend +risk: safe +source: community +date_added: "2026-04-23" +author: avij1109 +tags: + - frontend + - api-integration + - javascript + - react + - async +tools: + - claude + - cursor + - gemini + - codex +--- + +# Frontend API Integration Patterns + +## Overview + +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. + +--- + +## When to Use This Skill + +* Connecting frontend apps (React, React Native, Vue, etc.) to backend APIs +* Integrating ML/AI endpoints (`/predict`, `/recommend`) +* Handling asynchronous data in UI +* Fixing stale data, flickering UI, or duplicate requests +* Designing scalable frontend API layers + +--- + +## Core Patterns + +### 1. API Layer (Separation of Concerns) + +Centralize API logic and normalize errors. + +```js id="k1m7r2" +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; +}; +``` + +--- + +### 2. Race-Safe State Management + +Prevent stale responses from overwriting fresh data. + +```js id="y7p4ha" +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. + +--- + +### 3. Request Cancellation (AbortController) + +Cancel in-flight requests to avoid memory leaks and stale updates. + +```js id="l9x2pw" +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]); +``` + +--- + +### 4. Retry with Exponential Backoff + +Retry only transient failures (5xx or network errors). + +```js id="8n3zcf" +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); + } +}; +``` + +--- + +### 5. Debounced API Calls + +Avoid excessive API calls (e.g., search inputs). + +```js id="i2r7wq" +const useDebounce = (value, delay = 400) => { + const [debounced, setDebounced] = useState(value); + + useEffect(() => { + const t = setTimeout(() => setDebounced(value), delay); + return () => clearTimeout(t); + }, [value, delay]); + + return debounced; +}; +``` + +--- + +### 6. Request Deduplication + +Prevent duplicate API calls across components. + +```js id="x8v4km" +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; +}; +``` + +--- + +## Examples + +### Example 1: ML Prediction with Cancellation + +```js id="n5q2pt" +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); + } +}; +``` + +--- + +### Example 2: Debounced Search + +```js id="w4z8yn" +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]); +``` + +--- + +### Example 3: Optimistic UI Update + +```js id="q2k9hz" +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."); + } +}; +``` + +--- + +## Best Practices + +* ✅ Centralize API logic in a dedicated layer +* ✅ Normalize errors using a custom error class +* ✅ Always handle loading, error, and success states +* ✅ Use AbortController for request cancellation +* ✅ Retry only transient failures (5xx) +* ✅ Use debouncing for input-driven APIs +* ✅ Deduplicate identical requests + +--- + +## Anti-Patterns + +* ❌ Retrying 4xx errors +* ❌ No request cancellation (memory leaks) +* ❌ Race-condition-prone state updates +* ❌ Swallowing errors silently +* ❌ Global loading/error state for multiple requests +* ❌ Calling APIs directly inside components repeatedly + +--- + +## Common Pitfalls + +**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 + +--- + +## Limitations + +* These examples use vanilla JavaScript patterns; adapt them to your framework's data-fetching library when using React Query, SWR, Apollo, Relay, or similar tools. +* Do not retry non-idempotent mutations unless the backend provides idempotency keys or another duplicate-safe contract. +* Do not expose privileged API keys in frontend code; proxy sensitive requests through a backend. + +--- + +## Additional Resources + +* https://developer.mozilla.org/en-US/docs/Web/API/AbortController +* https://react.dev +* https://axios-http.com + +--- diff --git a/skills_index.json b/skills_index.json index c972bd8d..a03d8104 100644 --- a/skills_index.json +++ b/skills_index.json @@ -13097,6 +13097,28 @@ "reasons": [] } }, + { + "id": "frontend-api-integration-patterns", + "path": "skills/frontend-api-integration-patterns", + "category": "frontend", + "name": "frontend-api-integration-patterns", + "description": "Production-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.", + "risk": "safe", + "source": "community", + "date_added": "2026-04-23", + "plugin": { + "targets": { + "codex": "supported", + "claude": "supported" + }, + "setup": { + "type": "none", + "summary": "", + "docs": null + }, + "reasons": [] + } + }, { "id": "frontend-design", "path": "skills/frontend-design",