# Components Generators

> Guidance for writing `@kubb/react-fabric` components and generators (React-based and function-based).

- Skill: `majiayu000/components-generators` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/components-generators`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/components-generators/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/components-generators

---


# Components & Generators Skill

This skill helps agents answer questions about authoring components and generators using `@kubb/react-fabric`.

## When to Use

- When asked where to place components/generators
- When guiding authors to write React-based generators

## What It Does

- Lists common `react-fabric` components and where to place them
- Explains generator types and recommended patterns
- Provides a small conceptual example for authors

## Conceptual Example

```tsx
import { File, Function } from '@kubb/react-fabric'
export function Query({ name }: Props): FabricReactNode {
  return (
    <File.Source name={name} isExportable isIndexable>
      <Function name={name} export>
        // Generated code
      </Function>
    </File.Source>
  )
}
```

## Tips for Agents

- Recommend small, composable components
- Encourage use of `usePluginManager()`, `useOas()`, `useOperationManager()` in components
- Recommend deterministic output to avoid noisy diffs

## Related Skills

| Skill                                                      | Use For                                       |
|------------------------------------------------------------|-----------------------------------------------|
| **[../plugin-architecture/SKILL.md](../plugin-architecture/SKILL.md)** | For lifecycle and plugin registration details |