New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

API Client Integration

by makifbaysal in makifbaysal/tasktrooper

A skill your agent uses when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly

Apache-2.0Auto-check passed

Install API Client Integration

skills CLI
$ npx skills add makifbaysal/tasktrooper --skill api-client-integration -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install makifbaysal/tasktrooper api-client-integration --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .claude/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/api-client-integration .claude/skills/api-client-integration && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
api-client-integration
GitHub stars
109
Token cost
~609 tokens
SKILL.md length
204 words
Files
1
Skills in repo
99
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly

  • A component talks to the backend - go through the typed api client
  • SKILL.md covers Overview, Rules, Worked Example and Common Mistakes, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Type every response

What it does

API Client Integration is an agent skill from makifbaysal/tasktrooper. Use when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly

Its SKILL.md is about 610 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Local-first agent platform: board + role agents + agent CLI runs (Claude Code, Cursor, Antigravity, OpenCode) or local and API models (Ollama, LM Studio), all on your own Mac. The licence is Apache-2.0.

When your agent uses it

  • A component talks to the backend - go through the typed api client
  • Type every response
  • Error states explicitly

Example prompts

  • “/api-client-integration”

What it can do on your machine

Read from SKILL.md and the folder at commit f3d59b5. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

API Client Integration loads about 609 tokens when it runs. Until then it costs about 44 tokens; SKILL.md has 204 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~44
When it runs · the whole SKILL.md, loaded when a task matches
~609

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from makifbaysal/tasktrooper at commit f3d59b5, republished under its Apache-2.0 licence (© makifbaysal). 204 words, ~609 tokens.

Download SKILL.mdSave it as .claude/skills/api-client-integration/SKILL.md (or your agent's skills folder).
name
api-client-integration
description
Use when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly
category
frontend
tech_stack
React

API Client Integration

Overview

Every remote call is three states, not one. The recurring defects are raw fetch scattered in components, untyped responses, and errors swallowed into console.log while the UI half-updates.

Core principle: One typed client, three states (loading/success/error), no swallowed errors.

Rules

  • Go through web/src/api.ts helpers — never raw fetch in components.
  • Type every response with an interface matching the backend JSON. A contract change starts by updating the interface so the compiler finds every affected usage.
  • Handle all three states: loading (visible feedback), success, and error (toast with an actionable message).
  • Never swallow errors into console.log — surface them to the user and keep the UI consistent (no half-updated state on failure).
  • Debounce user-driven queries; cancel or ignore stale responses when inputs change quickly.

Worked Example

tsx
// ✅ typed client call, three states, no half-update on failure
const [state, setState] = useState<Loadable<Task[]>>({ status: "loading" });

useEffect(() => {
  let active = true;
  api.listTasks(projectId)                       // typed helper from api.ts
    .then(tasks => active && setState({ status: "ok", data: tasks }))
    .catch(err => active && setState({ status: "error", message: err.message }));
  return () => { active = false; };              // ignore stale response
}, [projectId]);

if (state.status === "loading") return <Spinner />;
if (state.status === "error") return <ErrorView message={state.message} />;
return <TaskList tasks={state.data} />;          // success only

The active flag drops a stale response when projectId changes; the error branch shows a real message instead of leaving a spinner or a half-list.

Common Mistakes

  • Raw fetch in a component.
  • Untyped/any response.
  • Only rendering the success path — no loading/error.
  • catch(e => console.log(e)) with the UI left inconsistent.
  • No stale-response guard on fast-changing inputs.

Red Flags

  • fetch( inside a component file.
  • A remote call with no error UI.
  • A toast that says "error" with no actionable message.

© makifbaysal, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in catalog/agents/frontend-developer/skills/api-client-integration of makifbaysal/tasktrooper.

Open the folder on GitHubat commit f3d59b5

Compare with similar skills

API Client Integration next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

API Client Integration compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
API Client Integration this skillmakifbaysal/tasktrooper109—~609Automated safety check: PassApache-2.0
Rust Path Typesopeninterpreter/openinterpreter69k2 repos~605Automated safety check: PassApache-2.0
Python Type Safetywshobson/agents40k—~1.4kAutomated safety check: PassMIT
Pyrefly Type Coveragepytorch/pytorch104k—~3kAutomated safety check: PassCustom licence
Typescript Advanced Typesrolling-scopes/rsschool-app10k24 repos~4.2kAutomated safety check: PassMPL-2.0
Twenty Syncable Entity Typestwentyhq/twenty58k—~2.8kAutomated safety check: PassCustom licence

Similar skills

  • Rust Path Types

    openinterpreter/openinterpreter

    Rules for choosing Rust types for filesystem paths in new Codex code, covering protocol types, internal use and model tool arguments.

    69k GitHub starsUsed in 2 repos~605 tokens
    DevelopmentAuto-check passed

  • Python Type Safety

    wshobson/agents

    Python type safety with type hints, generics, protocols, and strict type checking.

    40k GitHub stars~1.4k tokensUpdated 3 days ago
    DevelopmentAuto-check passed

  • Pyrefly Type Coverage

    pytorch/pytorch

    Migrate a file to use stricter Pyrefly type checking with annotations required for all functions, classes, and attributes.

    104k GitHub stars~3k tokensUpdated today
    DevelopmentAuto-check passed

  • Typescript Advanced Types

    rolling-scopes/rsschool-app

    Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications.

    10k GitHub starsUsed in 24 repos~4.2k tokens
    DevelopmentAuto-check passed

  • Twenty Syncable Entity Types

    twentyhq/twenty

    Walks through the first of six steps for adding a syncable entity to Twenty's server: metadata name, TypeORM entity, flat types and central constants.

    58k GitHub stars~2.8k tokensUpdated yesterday
    DevelopmentAuto-check passed

  • Typefully Automation

    ComposioHQ/awesome-claude-skills

    Automate Typefully tasks via Rube MCP (Composio). An agent skill from ComposioHQ/awesome-claude-skills.

    77k GitHub starsUsed in 3 repos~738 tokens
    Productivity & AutomationAuto-check passed

More from makifbaysal/tasktrooper

All 99 skills in this repo

  • API Contract Testing

    makifbaysal/tasktrooper

    A skill your agent uses when a task adds or changes an HTTP endpoint, its request/response shape, status codes, auth or error format - the request matrix, curl templates and what counts as a…

    109 GitHub starsUsed in 1 repo~754 tokens
    Auto-check passed

  • Acceptance Criteria Gwt

    makifbaysal/tasktrooper

    A skill your agent uses when writing acceptance criteria for a task - express each as an observable Given/When/Then that QA can execute, including negative cases

    109 GitHub stars~1.7k tokensUpdated 2 days ago
    Auto-check passed

  • Accessibility Check

    makifbaysal/tasktrooper

    A skill your agent uses when a task changes any screen, form, dialog, menu or control - Lighthouse/axe scan of the changed screens, a keyboard walk, and the thresholds that fail a task

    109 GitHub stars~1k tokensUpdated 2 days ago
    Auto-check passed

  • Analiz Gate

    makifbaysal/tasktrooper

    A skill your agent uses when deciding whether a request needs an analiz task before implementation - the conditions that require the architect's analysis versus going straight to implementation

    109 GitHub stars~641 tokensUpdated 2 days ago
    Auto-check passed

  • Analiz HTML Report

    makifbaysal/tasktrooper

    A skill your agent uses when you write or revise the analiz deliverable - the ONE self-contained HTML report (spec and plan as sections) a human reviews passage by passage

    109 GitHub stars~3.9k tokensUpdated 2 days ago
    Auto-check passed

  • Analiz Human Review Gate

    makifbaysal/tasktrooper

    A skill your agent uses when you finish an analiz report - the human must approve the analysis before any implementation task is created, via the analizreview column

    109 GitHub stars~2.2k tokensUpdated 2 days ago
    Auto-check passed

Questions about API Client Integration

What does API Client Integration do?

A skill your agent uses when a component talks to the backend - go through the typed api client, type every response, and handle loading, success, and error states explicitly. API Client Integration is an agent skill from makifbaysal/tasktrooper.

When should I use API Client Integration?

API Client Integration fits situations like: A component talks to the backend - go through the typed api client; type every response; error states explicitly.

How do I install API Client Integration in Claude Code?

Run `npx skills add makifbaysal/tasktrooper --skill api-client-integration -a claude-code`. Or copy the skill folder (catalog/agents/frontend-developer/skills/api-client-integration in makifbaysal/tasktrooper) into .claude/skills/api-client-integration in your project. Claude Code loads it when a task matches its description.

How do I install API Client Integration in Codex?

Run `npx skills add makifbaysal/tasktrooper --skill api-client-integration -a codex`. Or copy the skill folder (catalog/agents/frontend-developer/skills/api-client-integration in makifbaysal/tasktrooper) into .agents/skills/api-client-integration in your project. Codex loads it when a task matches its description.

Can I use API Client Integration in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add makifbaysal/tasktrooper --skill api-client-integration -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/api-client-integration, .gemini/skills/api-client-integration, .github/skills/api-client-integration and .opencode/skills/api-client-integration in your project.

What does API Client Integration need to run?

SKILL.md names no scripts, command-line tools or credentials: API Client Integration is instructions for the agent only.

Does API Client Integration access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is API Client Integration safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does API Client Integration use?

API Client Integration is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does API Client Integration use?

About 609 tokens (SKILL.md is roughly 2.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to API Client Integration?

Skills that share tags, products or a category with API Client Integration: Rust Path Types (openinterpreter/openinterpreter, 69k stars), Python Type Safety (wshobson/agents, 40k stars), Pyrefly Type Coverage (pytorch/pytorch, 104k stars) and Typescript Advanced Types (rolling-scopes/rsschool-app, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains API Client Integration?

makifbaysal (a GitHub user) maintains it in makifbaysal/tasktrooper, which has 109 GitHub stars. The repository holds 99 skills in this directory. The repository was last updated on October 6, 2026.

Source: makifbaysal/tasktrooper on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.