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.
70
86%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Low
Low-risk findings worth noting
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.
kubb.config.tsOptions type and kubb.dev docs page for authoritative optionsimport { 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:
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.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.output.clean is true. Never point output.path at
hand-written source.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).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:
pluginTs().pluginAxios() or pluginFetch(), or a framework plugin (pluginReactQuery,
pluginVueQuery or pluginSwr) which pulls in client generation.pluginZod() and point the client at it for typed, validated responses.pluginFaker() and pluginMsw().The commands wrap the kubb CLI, so the same steps work from a terminal.
kubb validate <spec> before anything else.kubb init. Pass --input, --output and --plugins to skip the
prompts, or write kubb.config.ts by hand using the shape above.kubb generate. Pass --verbose when diagnosing why a file is missing or
malformed, and --watch to regenerate on spec changes.| Skill | Use For |
|---|---|
| ../output/SKILL.md | Importing and using the generated code |
8349acf
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.