Config Skill
This skill instructs agents on authoring a kubb.config.ts and picking the right
@kubb/plugin-* packages. Generation runs through the kubb CLI (kubb generate), and the same
build powers the bundled MCP server.
When to Use
- Setting up Kubb in a project
- Adding or swapping a generator plugin
- Debugging why generated output is missing or wrong
What It Does
- Shows the shape of a
kubb.config.ts
- Lists the generator plugins and how to combine them
- Points at each plugin's
Options type and kubb.dev docs page for authoritative options
- Describes the validate, init and generate workflow
Shape of a config
import { defineConfig } from 'kubb'
import { pluginTs } from '@kubb/plugin-ts'
import { pluginAxios } from '@kubb/plugin-axios'
export default defineConfig({
root: '.',
input: {
path: './petstore.yaml', // local file path or a remote URL
},
output: {
path: './src/gen',
clean: true, // wipe the output dir before each run
barrel: { type: 'named' }, // generate index.ts barrels with named exports
},
plugins: [
pluginTs({ output: { path: 'models' } }),
pluginAxios({ output: { path: 'clients' } }),
],
})
Rules that matter:
- Set adapter options only when you need them, through a top-level
adapter: adapterOas({ ... }) from @kubb/adapter-oas (for validate, serverIndex,
serverVariables, discriminator or contentType).
pluginTs is the base. The client plugins (pluginAxios, pluginFetch) need it, the framework plugins (pluginReactQuery,
pluginVueQuery, pluginSwr) need pluginTs and a client plugin, and pluginMsw needs
pluginTs and pluginFaker. Check the plugin's docs page on kubb.dev
(https://kubb.dev/plugins/plugin-<name>) for the full dependency list.
- Each generator plugin takes its own
output.path, resolved relative to the top-level
output.path. Keep generated kinds in separate folders (models, clients, hooks, ...).
input accepts { path } for a file or URL. Validate untrusted specs with kubb validate
before generating.
- Generation is destructive when
output.clean is true. Never point output.path at
hand-written source.
- Set
output.format or output.lint to 'auto' to format and lint generated files with
whatever tool the project already has (oxfmt, Biome, Prettier, oxlint or ESLint).
Available generator plugins
Pick plugins by what the consumer needs, then install kubb plus each package.
| Need |
Package |
Import |
| TypeScript types (recommended base) |
@kubb/plugin-ts |
pluginTs |
| Axios client |
@kubb/plugin-axios |
pluginAxios |
| Fetch client |
@kubb/plugin-fetch |
pluginFetch |
| TanStack React Query hooks |
@kubb/plugin-react-query |
pluginReactQuery |
| Vue Query hooks |
@kubb/plugin-vue-query |
pluginVueQuery |
| SWR hooks |
@kubb/plugin-swr |
pluginSwr |
| Zod schemas |
@kubb/plugin-zod |
pluginZod |
| Faker.js mock factories |
@kubb/plugin-faker |
pluginFaker |
| MSW request handlers |
@kubb/plugin-msw |
pluginMsw |
| Cypress fixtures |
@kubb/plugin-cypress |
pluginCypress |
| MCP server from the spec |
@kubb/plugin-mcp |
pluginMcp |
| ReDoc documentation |
@kubb/plugin-redoc |
pluginRedoc |
For an installed plugin's exact options, read its Options type from the installed package
(node_modules/@kubb/plugin-<name>/src/types.ts or the published type declarations) and the
plugin's docs page (https://kubb.dev/plugins/plugin-<name>), which lists every option with
defaults, the plugin dependencies, and the default output.path. Use those as the source of
truth instead of guessing an option name.
Common combinations:
- Types only:
pluginTs().
- Typed data fetching: add
pluginAxios() or pluginFetch(), or a framework plugin (pluginReactQuery,
pluginVueQuery or pluginSwr) which pulls in client generation.
- Runtime validation: add
pluginZod() and point the client at it for typed, validated responses.
- Testing and mocks: add
pluginFaker() and pluginMsw().
Workflow
The commands wrap the kubb CLI, so the same steps work from a terminal.
- Validate the spec with
kubb validate <spec> before anything else.
- Scaffold and install with
kubb init. Pass --input, --output and --plugins to skip the
prompts, or write kubb.config.ts by hand using the shape above.
- Generate with
kubb generate. Pass --verbose when diagnosing why a file is missing or
malformed, and --watch to regenerate on spec changes.
- Typecheck the generated output and wire it into the app.
Related Skills
1---2name: config3description: How to author a kubb.config.ts and pick the right @kubb/plugin-* packages when generating TypeScript from an OpenAPI/Swagger spec. Use whenever setting up Kubb, adding a generator, or debugging codegen output.4---56# Config Skill78This skill instructs agents on authoring a `kubb.config.ts` and picking the right9`@kubb/plugin-*` packages. Generation runs through the `kubb` CLI (`kubb generate`), and the same10build powers the bundled MCP server.1112## When to Use1314- Setting up Kubb in a project15- Adding or swapping a generator plugin16- Debugging why generated output is missing or wrong1718## What It Does1920- Shows the shape of a `kubb.config.ts`21- Lists the generator plugins and how to combine them22- Points at each plugin's `Options` type and kubb.dev docs page for authoritative options23- Describes the validate, init and generate workflow2425## Shape of a config2627```ts28import { defineConfig } from 'kubb'29import { pluginTs } from '@kubb/plugin-ts'30import { pluginAxios } from '@kubb/plugin-axios'3132export default defineConfig({33 root: '.',34 input: {35 path: './petstore.yaml', // local file path or a remote URL36 },37 output: {38 path: './src/gen',39 clean: true, // wipe the output dir before each run40 barrel: { type: 'named' }, // generate index.ts barrels with named exports41 },42 plugins: [43 pluginTs({ output: { path: 'models' } }),44 pluginAxios({ output: { path: 'clients' } }),45 ],46})47```4849Rules that matter:5051- Set adapter options only when you need them, through a top-level52 `adapter: adapterOas({ ... })` from `@kubb/adapter-oas` (for `validate`, `serverIndex`,53 `serverVariables`, `discriminator` or `contentType`).54- `pluginTs` is the base. The client plugins (`pluginAxios`, `pluginFetch`) need it, the framework plugins (`pluginReactQuery`,55 `pluginVueQuery`, `pluginSwr`) need `pluginTs` and a client plugin, and `pluginMsw` needs56 `pluginTs` and `pluginFaker`. Check the plugin's docs page on kubb.dev57 (`https://kubb.dev/plugins/plugin-<name>`) for the full dependency list.58- Each generator plugin takes its own `output.path`, resolved relative to the top-level59 `output.path`. Keep generated kinds in separate folders (`models`, `clients`, `hooks`, ...).60- `input` accepts `{ path }` for a file or URL. Validate untrusted specs with `kubb validate`61 before generating.62- Generation is destructive when `output.clean` is `true`. Never point `output.path` at63 hand-written source.64- Set `output.format` or `output.lint` to `'auto'` to format and lint generated files with65 whatever tool the project already has (oxfmt, Biome, Prettier, oxlint or ESLint).6667## Available generator plugins6869Pick plugins by what the consumer needs, then install `kubb` plus each package.7071| Need | Package | Import |72| --- | --- | --- |73| TypeScript types (recommended base) | `@kubb/plugin-ts` | `pluginTs` |74| Axios client | `@kubb/plugin-axios` | `pluginAxios` |75| Fetch client | `@kubb/plugin-fetch` | `pluginFetch` |76| TanStack React Query hooks | `@kubb/plugin-react-query` | `pluginReactQuery` |77| Vue Query hooks | `@kubb/plugin-vue-query` | `pluginVueQuery` |78| SWR hooks | `@kubb/plugin-swr` | `pluginSwr` |79| Zod schemas | `@kubb/plugin-zod` | `pluginZod` |80| Faker.js mock factories | `@kubb/plugin-faker` | `pluginFaker` |81| MSW request handlers | `@kubb/plugin-msw` | `pluginMsw` |82| Cypress fixtures | `@kubb/plugin-cypress` | `pluginCypress` |83| MCP server from the spec | `@kubb/plugin-mcp` | `pluginMcp` |84| ReDoc documentation | `@kubb/plugin-redoc` | `pluginRedoc` |8586For an installed plugin's exact options, read its `Options` type from the installed package87(`node_modules/@kubb/plugin-<name>/src/types.ts` or the published type declarations) and the88plugin's docs page (`https://kubb.dev/plugins/plugin-<name>`), which lists every option with89defaults, the plugin dependencies, and the default `output.path`. Use those as the source of90truth instead of guessing an option name.9192Common combinations:9394- Types only: `pluginTs()`.95- Typed data fetching: add `pluginAxios()` or `pluginFetch()`, or a framework plugin (`pluginReactQuery`,96 `pluginVueQuery` or `pluginSwr`) which pulls in client generation.97- Runtime validation: add `pluginZod()` and point the client at it for typed, validated responses.98- Testing and mocks: add `pluginFaker()` and `pluginMsw()`.99100## Workflow101102The commands wrap the `kubb` CLI, so the same steps work from a terminal.1031041. Validate the spec with `kubb validate <spec>` before anything else.1052. Scaffold and install with `kubb init`. Pass `--input`, `--output` and `--plugins` to skip the106 prompts, or write `kubb.config.ts` by hand using the shape above.1073. Generate with `kubb generate`. Pass `--verbose` when diagnosing why a file is missing or108 malformed, and `--watch` to regenerate on spec changes.1094. Typecheck the generated output and wire it into the app.110111## Related Skills112113| Skill | Use For |114| --- | --- |115| **[../output/SKILL.md](../output/SKILL.md)** | Importing and using the generated code |