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

Official agent skill

Adopting Generated API Types

by PostHog in PostHog/posthog-foss

A skill your agent uses when migrating frontend code from manual API client calls (api.get, api.create, api.surveys.get, api.dashboards.list, new ApiRequest()) and handwritten TypeScript interfaces…

OfficialMITAuto-check passedFrontend & Design

Install Adopting Generated API Types

skills CLI
$ npx skills add PostHog/posthog-foss --skill adopting-generated-api-types -a claude-code

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

GitHub CLI
$ gh skill install PostHog/posthog-foss adopting-generated-api-types --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/PostHog/posthog-foss.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/adopting-generated-api-types .claude/skills/adopting-generated-api-types && 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
adopting-generated-api-types
GitHub stars
721
Token cost
~2.4k tokens
SKILL.md length
725 words
Files
3 (incl. references)
Skills in repo
213
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when migrating frontend code from manual API client calls (api.get, api.create, api.surveys.get, api.dashboards.list, new ApiRequest()) and handwritten TypeScript interfaces…

  • Works in 9 steps: High-level object API (most common) → Raw HTTP methods with manual URLs → ApiRequest builder (fluent URL… → …
  • Migrating frontend code from manual API client calls (api.get
  • SKILL.md covers Overview, The three manual patterns to…, When to use and Step-by-step workflow, plus 5 more sections
  • Calls pnpm

What it does

Adopting Generated API Types is an agent skill from PostHog/posthog-foss, published by the product's own GitHub organization. Use when migrating frontend code from manual API client calls (api.get, api.create, api.surveys.get, api.dashboards.list, new ApiRequest()) and handwritten TypeScript interfaces to generated API functions and types. Triggers on files importing from lib/api, files with api.get<, api.create<, api.<entity.<method, manual interface definitions that duplicate backend serializers, or any frontend file that constructs API URLs by hand. Covers the full replacement workflow — finding the generated equivalent, swapping…

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/migration-patterns.md` and `references/type-compatibility.md`).

It sits in Frontend & Design. It works with TypeScript and PostHog. The repository describes itself as: PostHog FOSS is a read-only mirror of PostHog, with all proprietary code removed. NOTE: This repo is synced automatically from the main PostHog repo. Please raise any issues and… The licence is MIT.

When your agent uses it

  • Migrating frontend code from manual API client calls (api.get
  • Api.surveys.get
  • Api.dashboards.list
  • New ApiRequest()) and handwritten TypeScript interfaces to generated API functions and types

Example prompts

  • “/adopting-generated-api-types”

Workflow steps

9 steps, taken from the step headings in SKILL.md.

  1. High-level object API (most common)
  2. Raw HTTP methods with manual URLs
  3. ApiRequest builder (fluent URL construction)
  4. Identify what the manual call does
  5. Find the generated equivalent
  6. Check type compatibility
  7. Replace the call
  8. Replace the type at usage sites
  9. Clean up dead types

What it can do on your machine

Read from SKILL.md and the folder at commit 2c48221. 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

    Shell commands in SKILL.md call:

    • pnpm

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

  • Network

    No URLs in SKILL.md. Its commands use pnpm, which can reach the network depending on how they are called.

    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

Adopting Generated API Types loads about 2.4k tokens when it runs, and up to ~5.4k if it reads all its reference files. Until then it costs about 156 tokens; SKILL.md has 725 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~156
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.4k

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 PostHog/posthog-foss at commit 2c48221, republished under its MIT licence (© PostHog). 725 words, ~2,382 tokens.

Download SKILL.mdSave it as .claude/skills/adopting-generated-api-types/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
adopting-generated-api-types
description
Use when migrating frontend code from manual API client calls (`api.get`, `api.create`, `api.surveys.get`, `api.dashboards.list`, `new ApiRequest()`) and handwritten TypeScript interfaces to generated API functions and types. Triggers on files importing from `lib/api`, files with `api.get<`, `api.create<`, `api.<entity>.<method>`, manual interface definitions that duplicate backend serializers, or any frontend file that constructs API URLs by hand. Covers the full replacement workflow — finding the generated equivalent, swapping imports, adapting call sites, and removing dead manual types.

Adopting generated API types

Overview

PostHog generates TypeScript API client functions and types from Django serializers via the OpenAPI pipeline:

text
Django serializer → drf-spectacular → OpenAPI JSON → Orval → TypeScript (api.ts + api.schemas.ts + api.zod.ts)

Generated files live in:

  • Core: frontend/src/generated/core/api.ts, api.schemas.ts, and api.zod.ts
  • Products: products/<product>/frontend/generated/api.ts, api.schemas.ts, and api.zod.ts

Generated types use the Api suffix (DashboardApi, SurveyApi). Handwritten types never do.

This skill guides replacing manual API calls and handwritten types with generated equivalents.

The three manual patterns to migrate

The legacy frontend/src/lib/api.ts (~6000 lines) has three layers, all migration targets:

1. High-level object API (most common)

Domain-specific convenience methods on the api object:

typescript
api.surveys.get(id)
api.surveys.create(data)
api.dashboards.list()
api.cohorts.update(id, data)
api.actions.create(data)

These are the most widely used pattern — every entity has its own namespace with CRUD plus custom methods (e.g., api.surveys.getResponsesCount(), api.dashboards.streamTiles()).

2. Raw HTTP methods with manual URLs
typescript
api.get<SomeType>(`api/projects/${id}/surveys/`)
api.create<SomeType>(`api/projects/${id}/surveys/`, data)
api.update<SomeType>(url, data)
api.put<SomeType>(url, data)
api.delete(url)
3. ApiRequest builder (fluent URL construction)
typescript
const url = new ApiRequest().surveys().assembleFullUrl()
const response = await api.get(url)

// or directly:
await new ApiRequest().survey(surveyId).withAction('summarize_responses').create({ data })

All three patterns should be replaced with generated functions where available.

When to use

  • Touching a file that calls api.<entity>.<method>() (e.g., api.surveys.get())
  • Touching a file that calls api.get<T>(...), api.create<T>(...), etc.
  • Touching a file that uses new ApiRequest() to build URLs
  • Touching a file that imports handwritten interfaces from ~/types for API response shapes
  • Cleaning up frontend code after backend serializer improvements

Step-by-step workflow

1. Identify what the manual call does

Look at the existing call and extract:

  • HTTP method — GET, POST, PUT, PATCH, DELETE
  • Entity and action — what resource, what operation
  • Type parameter — the handwritten type used for the response
2. Find the generated equivalent

Generated function names follow the {resource}{Action} convention:

text
surveysList          — GET    /api/projects/{id}/surveys/
surveysCreate        — POST   /api/projects/{id}/surveys/
surveysRetrieve      — GET    /api/projects/{id}/surveys/{id}/
surveysPartialUpdate — PATCH  /api/projects/{id}/surveys/{id}/
surveysDestroy       — DELETE /api/projects/{id}/surveys/{id}/

Where to search:

  • Core endpoints: frontend/src/generated/core/api.ts
  • Product endpoints: products/<product>/frontend/generated/api.ts

Search strategies:

  1. Grep for the entity name in the generated api.ts files
  2. Search by the get*Url helper functions — every generated function has a URL builder above it
  3. Search api.schemas.ts for the type name with Api suffix

If no generated function exists, the backend endpoint may lack @extend_schema or @validated_request. Fix the backend first using the improving-drf-endpoints skill, then run hogli build:openapi.

Custom actions (like api.surveys.summarize_responses()) may not have generated equivalents if the backend @action lacks @extend_schema. Check generated files first; if missing, fix the backend.

3. Check type compatibility

Compare the handwritten type with the generated Api type. Key differences:

  • readonly modifiers — generated types mark read-only fields
  • Optional vs required — generated types reflect required= precisely
  • Nullability — null types are explicit
  • Extra fields — generated types may include fields the handwritten type omits

See type-compatibility.md for details.

4. Replace the call

See migration-patterns.md for detailed before/after examples covering:

  • High-level object API (api.surveys.get() → surveysRetrieve())
  • Raw HTTP methods (api.get<T>(url) → generated function)
  • ApiRequest builder → generated function
  • Paginated list calls
  • Create/update with request bodies
  • Delete calls
  • Kea logic loaders and listeners
  • Calls with abort signals
Show full SKILL.md (299 more words)Show less
5. Replace the type at usage sites

Update downstream references from the handwritten type to the generated one:

typescript
// Before
function renderSurvey(survey: Survey): JSX.Element { ... }

// After
function renderSurvey(survey: SurveyApi): JSX.Element { ... }
6. Clean up dead types

After migrating all usages of a handwritten type:

  1. Remove the type definition from ~/types or the local file
  2. Remove unused imports
  3. Run pnpm --filter=@posthog/frontend typescript:check to verify no breakage

Decision guide

ScenarioAction
Generated function existsReplace manual call with generated function
Generated type exists but function doesn'tUse the generated type as the generic parameter on the manual call, file a follow-up to add @extend_schema
Neither existsKeep the manual pattern, fix the backend serializer/viewset first
Custom action without generated equivalentKeep the api.<entity>.<method>() call, fix the backend @action annotation first
Generated type has different shape than handwrittenAdapt call sites to the generated shape — the serializer is the source of truth
Code mutates the response objectUse a local mutable copy: const mutable = { ...response } and mutate that
Need both read and write typesUse FooApi for reads, derive write types via Parameters<typeof fooCreate>[1] or use PatchedFooApi

Import conventions

typescript
// Core generated functions — import from api.ts
import { domainsList, domainsCreate, domainsRetrieve } from '~/generated/core/api'

// Core generated types — import type from api.schemas.ts
import type { OrganizationDomainApi } from '~/generated/core/api.schemas'

// Core generated Zod schemas — import from api.zod.ts
import { DomainsCreateBody } from '~/generated/core/api.zod'

// Product generated functions — NO tilde prefix, use 'products/' path
import { surveysList, surveysRetrieve } from 'products/surveys/frontend/generated/api'
import type { SurveyApi } from 'products/surveys/frontend/generated/api.schemas'
import { SurveysCreateBody } from 'products/surveys/frontend/generated/api.zod'

// Within a product, relative imports also work
import { logsAlertsCreate } from '../generated/api'
import type { LogsAlertConfigurationApi } from '../generated/api.schemas'
import { LogsAlertsCreateBody } from '../generated/api.zod'

Path rules:

  • Core: ~/generated/core/... (tilde prefix)
  • Products from outside: products/<product>/frontend/generated/... (no tilde)
  • Products from inside: relative ../generated/... or ./generated/...

Use import type for types to enable proper tree-shaking.

How generated functions work under the hood

Generated functions wrap the same api module via api-orval-mutator.ts:

text
surveysList(projectId, params)
  → apiMutator(url, { method: 'GET' })
    → api.get(url)

Switching to generated functions does not change HTTP behavior — same cookies, same CSRF, same error handling. The only difference is type safety and URL construction.

Verifying the migration

  1. TypeScript check: pnpm --filter=@posthog/frontend typescript:check
  2. Grep for leftover manual types: search for the old type name across the codebase
  3. Run relevant tests: hogli test <test_file>
  • Backend side: use improving-drf-endpoints to fix serializers that produce poor types
  • Type system docs: docs/published/handbook/engineering/type-system.md
  • API mutator: frontend/src/lib/api-orval-mutator.ts
  • Regenerate types: hogli build:openapi

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

Files

SKILL.md and 2 other files (references) in .agents/skills/adopting-generated-api-types of PostHog/posthog-foss.

  • SKILL.md
  • references/migration-patterns.md
  • references/type-compatibility.md

Open the folder on GitHubat commit 2c48221

Compare with similar skills

Adopting Generated API Types 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.

Adopting Generated API Types compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Adopting Generated API Types this skillPostHog/posthog-foss721—~2.4kAutomated safety check: PassMIT
Compare Array Bundle SizePostHog/posthog-js613—~599Automated safety check: PassCustom licence
Integration Astro Staticwill-be-done/will-be-done152—~636Automated safety check: PassAGPL-3.0
South Admin CRUD Generatorsouthliu/south-admin-react580—~1.7kAutomated safety check: PassMIT
Develop ExtensionPostHog/posthog-js613—~2.3kAutomated safety check: PassCustom licence
Vue Componentsscalar/scalar16k—~886Automated safety check: PassMIT

Similar skills

  • Compare Array Bundle Size

    PostHog/posthog-js

    Official

    Quickly compare the posthog-js array.js bundle size in the current working tree against a git baseline using the repository's esbuild proxy.

    613 GitHub stars~599 tokensUpdated today
    Frontend & DesignAuto-check passed

  • Integration Astro Static

    will-be-done/will-be-done

    PostHog integration for static Astro sites using SSG. An agent skill from will-be-done/will-be-done.

    152 GitHub stars~636 tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed

  • South Admin CRUD Generator

    southliu/south-admin-react

    Generates a full CRUD page - page component, data model and API client - from the south-admin-react project's own VS Code snippet templates.

    580 GitHub stars~1.7k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed

  • Develop Extension

    PostHog/posthog-js

    Official

    Author a new PostHog browser extension, or port a posthog-js v1 extension, against the @posthog/browser-common Client/Extension contract.

    613 GitHub stars~2.3k tokensUpdated today
    DevelopmentAuto-check passed

  • Vue Components

    scalar/scalar

    Build Vue 3 components with TypeScript and Tailwind using clean structure, composable logic, accessibility, and maintainable patterns.

    16k GitHub stars~886 tokensUpdated today
    Frontend & DesignAuto-check passed

  • NEAR dApp Builder

    internet-court/internet-court-skill

    Scaffolds new NEAR dApps with create-near-app or adds NEAR wallet sign-in, contract calls and transaction signing to an existing React or plain JavaScript app.

    6.4k GitHub starsUsed in 1 repo~684 tokens
    Frontend & DesignAuto-check passed

More from PostHog/posthog-foss

All 213 skills in this repo

  • Authoring Log Alerts

    PostHog/posthog-foss

    Official

    Author useful, low-noise log alerts on services in a PostHog project.

    721 GitHub stars~3k tokensUpdated today
    Auto-check passed

  • Autoresolving PR Conflicts

    PostHog/posthog-foss

    Official

    Operating procedure for the conflict-autoresolver agent: sweep open PostHog/posthog PRs that conflict with master, resolve the trivial conflicts (generated artifacts deterministically, source…

    721 GitHub stars~4.2k tokensUpdated today
    Auto-check passed

  • Diagnosing Stacktrace Symbolication

    PostHog/posthog-foss

    Official

    Help users debug PostHog Error Tracking stack-trace symbolication for any supported platform — JavaScript/TypeScript web, React Native (Hermes), Android (Proguard / R8), or iOS / macOS (dSYM).

    721 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

  • Exploring Apm Traces

    PostHog/posthog-foss

    Official

    Investigates distributed application performance using PostHog APM (OpenTelemetry span) data via MCP.

    721 GitHub stars~3.5k tokensUpdated today
    Auto-check passed

  • Exploring LLM Traces

    PostHog/posthog-foss

    Official

    Debug and inspect LLM/AI agent traces using PostHog's MCP tools.

    721 GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Investigate Metric

    PostHog/posthog-foss

    Official

    Diagnose why a product metric changed (dropped, spiked, or plateaued) by orchestrating breakdowns, actors, paths, lifecycle, retention, and annotations queries.

    721 GitHub stars~1.9k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Adopting Generated API Types

What does Adopting Generated API Types do?

A skill your agent uses when migrating frontend code from manual API client calls (api.get, api.create, api.surveys.get, api.dashboards.list, new ApiRequest()) and handwritten TypeScript interfaces…. Adopting Generated API Types is an agent skill from PostHog/posthog-foss, published by the product's own GitHub organization.list, new ApiRequest()) and handwritten TypeScript interfaces to generated API functions and types.

When should I use Adopting Generated API Types?

Adopting Generated API Types fits situations like: migrating frontend code from manual API client calls (api.get; api.surveys.get; api.dashboards.list; new ApiRequest()) and handwritten TypeScript interfaces to generated API functions and types.

How do I install Adopting Generated API Types in Claude Code?

Run `npx skills add PostHog/posthog-foss --skill adopting-generated-api-types -a claude-code`. Or copy the skill folder (.agents/skills/adopting-generated-api-types in PostHog/posthog-foss) into .claude/skills/adopting-generated-api-types in your project. Claude Code loads it when a task matches its description.

How do I install Adopting Generated API Types in Codex?

Run `npx skills add PostHog/posthog-foss --skill adopting-generated-api-types -a codex`. Or copy the skill folder (.agents/skills/adopting-generated-api-types in PostHog/posthog-foss) into .agents/skills/adopting-generated-api-types in your project. Codex loads it when a task matches its description.

Can I use Adopting Generated API Types 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 PostHog/posthog-foss --skill adopting-generated-api-types -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/adopting-generated-api-types, .gemini/skills/adopting-generated-api-types, .github/skills/adopting-generated-api-types and .opencode/skills/adopting-generated-api-types in your project.

What does Adopting Generated API Types need to run?

Going by SKILL.md and its folder, Adopting Generated API Types needs the command-line tools its instructions call (pnpm).

Does Adopting Generated API Types 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 Adopting Generated API Types 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 Adopting Generated API Types use?

Adopting Generated API Types is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Adopting Generated API Types use?

About 2.4k tokens (SKILL.md is roughly 9.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3k tokens, read only when the agent opens those files.

What are the alternatives to Adopting Generated API Types?

Skills that share tags, products or a category with Adopting Generated API Types: Compare Array Bundle Size (PostHog/posthog-js, 613 stars), Integration Astro Static (will-be-done/will-be-done, 152 stars), South Admin CRUD Generator (southliu/south-admin-react, 580 stars) and Develop Extension (PostHog/posthog-js, 613 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Adopting Generated API Types?

PostHog (a GitHub organization, an official publisher) maintains it in PostHog/posthog-foss, which has 721 GitHub stars. The repository holds 213 skills in this directory. The repository was last updated on October 7, 2026.

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