Generate frontend artifacts from OpenAPI via aptx-ft, including models and request clients. Use when user wants: (1) to generate API code from OpenAPI/Swagger, (2) React Query hooks from API spec, (3) Vue Query composables from API spec, (4) function-based API clients, (5) a standard flow for frontend projects without framework-specific business adaptation, (6) track generated files with manifest, (7) preview changes before generation, or (8) update barrel files automatically.
How this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-openapi-skills:generate-artifactsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate models and request layer code from OpenAPI via aptx-ft CLI.
Generate models and request layer code from OpenAPI via aptx-ft CLI.
pnpm add -D @aptx/frontend-tk-cli
| Command | Purpose |
|---|---|
model gen | Generate TypeScript models |
aptx functions | Generate endpoint specs + function wrappers |
aptx react-query | Generate React Query hooks |
aptx vue-query | Generate Vue Query composables |
⚠️ Dependency:
react-queryandvue-queryrequirespec/fromaptx functions. Run functions first.
All paths are relative to working directory (project root).
| Parameter | Required | Description |
|---|---|---|
-i | ✅ | OpenAPI file path (e.g., ./openapi.json) |
-o | ✅ | Output directory (e.g., ./src/api) |
--model-mode | ✅ | relative (same project) or package (monorepo) |
--model-path | ✅ | Path or package name for model imports |
--client-mode | ❌ | global (default) / local / package |
--client-package | ❌ | Custom client package name |
--no-manifest | ❌ | Disable manifest tracking (default: false) |
--manifest-dir | ❌ | Custom manifest directory (default: .generated) |
--dry-run | ❌ | Preview mode without updating manifest (default: false) |
Is models directory inside the same package where API code is generated?
├── YES → --model-mode relative --model-path ./src/models
└── NO → --model-mode package --model-path @org/models (from package.json "name")
Which HTTP client will the generated code use?
├── Default @aptx/api-client → omit or --client-mode global
├── Custom client in this project → --client-mode local
└── Custom client from npm package → --client-mode package --client-package @org/api-client
⚠️ All
aptxcommands require--model-modeand--model-path. Without these, generated code will have broken imports.
Before executing any generation command, discover the actual project configuration.
# 1. Find packages
ls -d packages/*/
# 2. Get model package name (use THIS for --model-path)
cat packages/domains/package.json # Extract "name" field
# 3. Verify API package dependencies
cat packages/api/package.json
| ❌ NEVER | ✅ ALWAYS |
|---|---|
| Guess package name from directory | Read package.json "name" field |
Assume @project-name/models | Use exact value from "name" |
Infer from packages/domains/ path | Package name ≠ directory name |
packages/domains/)package.json (e.g., @repo/domains)packages/api/)packages/api/src)package.json files--preserve is needed for modelsALWAYS check if target model directory contains existing files before generating:
# Check if model output directory has existing files
ls ./src/models/*.ts 2>/dev/null || echo "empty"
| Directory State | Action |
|---|---|
| Empty or not exists | Generate models WITHOUT --preserve |
| Has existing .ts files | Generate models WITH --preserve to keep enum translations |
Why: When regenerating models in a non-empty directory, --preserve keeps manually translated enum names while adding new values.
The CLI automatically tracks generated files and detects changes between generations.
| Option | Default | Purpose |
|---|---|---|
--no-manifest | false | Disable manifest tracking |
--manifest-dir <path> | .generated | Custom manifest directory |
--dry-run | false | Preview mode: generate report without updating manifest |
When manifest tracking is enabled (default), the following files are generated:
<output>/
├── .generated/
│ ├── manifest.json # Tracks all generated files
│ ├── deletion-report.json # Machine-readable change report
│ └── deletion-report.md # Human-readable change report with LLM suggestions
└── api files...
| Scenario | Command |
|---|---|
| Normal generation | Omit manifest options (default) |
| CI/CD without tracking | Add --no-manifest |
| Preview changes before applying | Add --dry-run |
| Custom manifest location | Add --manifest-dir ./meta |
The CLI automatically updates barrel files (index.ts) after generation.
You no longer need to manually run barrel gen after generating artifacts - the generation commands handle this automatically.
<output>/index.ts - Barrel file for the output directoryThe automatic update handles most cases. Use manual barrel gen only when:
# 0. Check if models directory has existing files
ls ./src/models/*.ts 2>/dev/null
# 1. Models (add --preserve if directory is NOT empty)
pnpm exec aptx-ft -i ./openapi.json model gen --output ./src/models --style module --preserve
# 2. Functions
pnpm exec aptx-ft aptx functions -i ./openapi.json -o ./src/api \
--model-mode relative --model-path ./src/models
# 3. Query layer (choose one)
pnpm exec aptx-ft aptx react-query -i ./openapi.json -o ./src/api \
--model-mode relative --model-path ./src/models
# Preview changes without updating manifest
pnpm exec aptx-ft aptx functions -i ./openapi.json -o ./src/api \
--model-mode relative --model-path ./src/models --dry-run
# 0. Check if models directory has existing files
ls ./packages/models/src/*.ts 2>/dev/null
# 1. Models (add --preserve if directory is NOT empty)
pnpm exec aptx-ft -i ./openapi.json model gen --output ./packages/models/src --style module --preserve
# 2. Functions
pnpm exec aptx-ft aptx functions -i ./openapi.json -o ./apps/web/src/api \
--model-mode package --model-path @org/models
# 3. Query layer (choose one)
pnpm exec aptx-ft aptx react-query -i ./openapi.json -o ./apps/web/src/api \
--client-mode package --client-package @org/api-client \
--model-mode package --model-path @org/models
# Custom manifest directory
pnpm exec aptx-ft aptx functions -i ./openapi.json -o ./apps/web/src/api \
--model-mode package --model-path @org/models --manifest-dir ./meta
src/api/
├── .generated/ # Manifest tracking files
│ ├── manifest.json # Tracks all generated files
│ ├── deletion-report.json # Machine-readable change report
│ └── deletion-report.md # Human-readable change report
├── index.ts # Barrel file (auto-updated)
├── spec/namespace/xxx.ts # Endpoint definitions (from functions)
├── functions/namespace/xxx.ts # Function wrappers (from functions)
├── react-query/namespace/ # React Query hooks
│ ├── xxx.query.ts
│ └── xxx.mutation.ts
└── vue-query/namespace/ # Vue Query composables
├── xxx.query.ts
└── xxx.mutation.ts
This skill handles generic OpenAPI → TypeScript generation:
adapt-materal-enumsdownload-openapi firstnpx claudepluginhub haibaraaiaptx/frontend-openapi-skills --plugin frontend-openapi-skillsGenerates OpenAPI 3.0+ specs from existing API code, enhances with schemas/examples/errors, creates interactive docs/SDKs, and validates compliance.
Extracts OpenAPI specs from existing API codebases in FastAPI, Flask, Django REST, Spring Boot, NestJS, Hono, Rails, and Laravel using framework-specific guides.
Generates type-safe client SDKs in TypeScript, Python, Go, Java from OpenAPI specs with auth, retries, pagination, and tests.