К основному содержанию
скилл CX Codex

orval · pproenca — скилл для Claude Code: что делает и как установить

Набор из 42 правил для генерации типизированных клиентов TypeScript из OpenAPI через Orval. Помогает настроить конфигурацию, хуки запросов и моки MSW.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add pproenca/dot-skills --skill orval -a claude-code
Открыть на GitHub

Что делает orval

Скилл структурирует работу с Orval и спецификациями OpenAPI. Внутри собраны 42 правила в восьми категориях: от проверки качества исходной схемы и выбора режима в orval.config.ts до тонкостей экспорта ключей для кэша и отмены запросов через AbortSignal.

Ассистент помогает связывать сгенерированный код с React Query, SWR или Vue Query, настраивать валидацию через схемы Zod и готовить мок-хэндлеры MSW. Для кастомных клиентов и мутаторов предусмотрены шаблоны перехватчиков, обновления токенов и лёгкого клиента на базе fetch.

Качество кодогенерации упирается в исходный файл OpenAPI: если в спецификации нет чётких operationId или описания ответов, правила потребуют сначала исправить схему.

Какие задачи решает

  • составить конфигурацию orval.config.ts под проект
  • настроить генерацию хуков React Query или SWR
  • создать кастомный мутатор для авторизации и обновления токенов
  • сгенерировать моки MSW на основе примеров из спецификации
  • настроить валидацию данных через Zod

Примеры запросов агенту

  • Настрой orval.config.ts для генерации хуков React Query и схем Zod из openapi.yaml
  • Добавь кастомный мутатор с перехватом 401 ошибки и обновлением токена
  • Сгенерируй моки MSW для всех эндпоинтов с задержкой ответа

Как установить orval

1Через Skills CLI (Vercel)

npx skills add pproenca/dot-skills --skill orval -a claude-code

2Вручную: положить файлы

~/.claude/skills/orval/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/orval/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о orval

Как установить orval в Claude Code?

Выполните команду npx skills add pproenca/dot-skills --skill orval -a claude-code. Файл запишется в ~/.claude/skills/orval/SKILL.md.

Для чего нужен скилл orval?

Он задаёт ассистенту практические правила настройки Orval: как организовывать структуру файлов, связывать клиент с библиотеками хуков и генерировать моки MSW.

Какие библиотеки запросов поддерживает этот набор правил?

Правила охватывают интеграцию с React Query, SWR и Vue Query, включая бесконечные списки и Suspense.

Исходный текст

SKILL.md · MIT
---
name: orval
description: Orval OpenAPI TypeScript client generation best practices. This skill should be used when configuring Orval, generating TypeScript clients from OpenAPI specs, setting up React Query/SWR hooks, creating custom mutators, or writing MSW mocks. Triggers on tasks involving orval.config.ts, OpenAPI codegen, API client setup, or mock generation.
---

# Orval OpenAPI Best Practices

Comprehensive guide for generating type-safe TypeScript clients from OpenAPI specifications using Orval. Contains 42 rules across 8 categories, prioritized by impact to guide automated configuration, client generation, and testing setup.

## When to Apply

Reference these guidelines when:
- Configuring Orval for a new project
- Setting up OpenAPI-based TypeScript client generation
- Integrating React Query, SWR, or Vue Query with generated hooks
- Creating custom mutators for authentication and error handling
- Generating MSW mocks for testing

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | OpenAPI Specification Quality | CRITICAL | `spec-` |
| 2 | Configuration Architecture | CRITICAL | `orvalcfg-` |
| 3 | Output Structure & Organization | HIGH | `output-` |
| 4 | Custom Client & Mutators | HIGH | `mutator-` |
| 5 | Query Library Integration | MEDIUM-HIGH | `oquery-` |
| 6 | Type Safety & Validation | MEDIUM | `types-` |
| 7 | Mock Generation & Testing | MEDIUM | `mock-` |
| 8 | Advanced Patterns | LOW | `adv-` |

## Quick Reference

### 1. OpenAPI Specification Quality (CRITICAL)

- `spec-operationid-unique` - Use unique and descriptive operationIds
- `spec-schemas-reusable` - Define reusable schemas in components
- `spec-tags-organization` - Organize operations with tags
- `spec-response-types` - Define all response types explicitly
- `spec-required-fields` - Mark required fields explicitly

### 2. Configuration Architecture (CRITICAL)

- `orvalcfg-mode-selection` - Choose output mode based on API size
- `orvalcfg-client-selection` - Select client based on framework requirements
- `orvalcfg-separate-schemas` - Separate schemas into dedicated directory
- `orvalcfg-input-validation` - Validate OpenAPI spec before generation
- `orvalcfg-baseurl-setup` - Configure base URL properly
- `orvalcfg-prettier-format` - Enable automatic code formatting

### 3. Output Structure & Organization (HIGH)

- `output-file-extension` - Use distinct file extensions for generated code
- `output-index-files` - Generate index files for clean imports
- `output-naming-convention` - Configure consistent naming conventions
- `output-clean-target` - Enable clean mode for consistent regeneration
- `output-headers-enabled` - Enable headers in generated functions

### 4. Custom Client & Mutators (HIGH)

- `mutator-custom-instance` - Use custom mutator for HTTP client configuration
- `mutator-error-types` - Export custom error types from mutator
- `mutator-body-wrapper` - Export body type wrapper for request transformation
- `mutator-interceptors` - Use interceptors for cross-cutting concerns
- `mutator-token-refresh` - Handle token refresh in mutator
- `mutator-fetch-client` - Use fetch mutator for smaller bundle size

### 5. Query Library Integration (MEDIUM-HIGH)

- `oquery-hook-options` - Configure default query options globally
- `oquery-key-export` - Export query keys for cache invalidation
- `oquery-infinite-queries` - Enable infinite queries for paginated endpoints
- `oquery-suspense-support` - Enable suspense mode for streaming UX
- `oquery-signal-cancellation` - Pass AbortSignal for request cancellation
- `oquery-mutation-callbacks` - Use generated mutation options types

### 6. Type Safety & Validation (MEDIUM)

- `types-zod-validation` - Generate Zod schemas for runtime validation
- `types-zod-strict` - Enable Zod strict mode for safer validation
- `types-zod-coerce` - Use Zod coercion for type transformations
- `types-use-dates` - Enable useDates for Date type generation
- `types-bigint-support` - Enable useBigInt for large integer support

### 7. Mock Generation & Testing (MEDIUM)

- `mock-msw-generation` - Generate MSW handlers for testing
- `mock-use-examples` - Use OpenAPI examples for realistic mocks
- `mock-delay-config` - Configure mock response delays
- `mock-http-status` - Generate mocks for all HTTP status codes
- `mock-index-files` - Generate mock index files for easy setup

### 8. Advanced Patterns (LOW)

- `adv-input-transformer` - Use input transformer for spec preprocessing
- `adv-operation-override` - Override settings per operation
- `adv-output-transformer` - Use output transformer for generated code modification
- `adv-form-data-handling` - Configure form data serialization

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules
- Example: [spec-operationid-unique](references/spec-operationid-unique.md)

## Related Skills

- For consuming generated hooks, see `tanstack-query` skill
- For mocking generated API clients, see `test-msw` skill
- For schema validation, see `zod` skill

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`

© pproenca · MIT · pproenca/dot-skills

Похожие скиллы

Всё по теме «Фронтенд и UI» →

Сначала — orval от других авторов.

orval orval-labs Генерирует типизированные клиенты, хуки TanStack Query, схемы Zod и моки MSW из спецификаций OpenAPI. CX Codex +1 589установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок hyperframes heygen-com Скилл задаёт агенту правила рендера HTML-кода в видео через HyperFrames. Помогает собирать проморолики, эксплейнеры и титры прямо в коде проекта. CX Codex +1 1 200 000установок hyperframes-cli heygen-com Управляет проектами HyperFrames через терминал: собирает таймлайн, проверяет контраст кадров, запускает предпросмотр и рендерит видео локально или в облаке. CX Codex +1 1 300 000установок webapp-testing официальный anthropics Скилл запускает проверки локальных веб-приложений через Playwright: помогает отлаживать UI, делать скриншоты и смотреть логи браузера. 186 758установок

Из того же набора58

dockerfile-optimise Скилл с 48 правилами из официальной документации Docker: кэш слоёв, multi-stage сборки, безопасность. Пригодится при написании и рефакторинге Dockerfile. CX Codex +1 344установок uniwind Скилл с 45+ правилами по Uniwind — Tailwind-биндингам для React Native. Пригодится при настройке проекта, темах и миграции с NativeWind. CX Codex +1 341установок ios-animations Правила анимаций для SwiftUI под Swift 6.2 и архитектуру Clinic MVVM-C. Настраивает физику пружин и токен-систему без хардкода. CX Codex +1 340установок ast-grep Скилл с набором правил по написанию и отладке ast-grep-запросов: поиск по AST, линтинг и переписывание кода. CX Codex +1 332установок 37signals-rails Набор правил по Rails в стиле 37signals: ванильный Rails, CRUD-контроллеры, богатые модели, Hotwire. Пригодится, когда пишете или рефакторите код и хотите держаться этой школы. CX Codex +1 329установок mui-base Скилл с 48 правилами для сборки headless-библиотек React-компонентов по стилю MUI Base UI. Пригодится, когда логика и стили живут отдельно. CX Codex +1 328установок codemod Скилл задаёт 48 правил для безопасных кодмодов на базе ast-grep и JSSG. Пригодится при написании, ревью и отладке автоматических миграций кода. CX Codex +1 327установок vhs Скилл с 47 правилами для .tape-файлов VHS: помогает агенту писать и проверять сценарии записи терминала в GIF и видео. CX Codex +1 323установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой