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.
npx claudepluginhub haibaraaiaptx/frontend-openapi-skills --plugin frontend-openapi-skillsThis skill uses the workspace's default tool permissions.
Generate models and request layer code from OpenAPI via aptx-ft CLI.
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
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 first