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

yaml — скилл для Claude Code: YAML-формат для json-render

Потоковый парсер YAML для json-render, который превращает код-фенсы в JSON Patch. Подходит для прогрессивного рендеринга и точечных правок спеки через стрим.

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

Что делает yaml

Скилл добавляет YAML как альтернативу JSONL в @json-render/core. Парсер читает YAML построчно, эмитит JSON Patch операции через диффинг и распознаёт четыре типа фенсов: yaml-spec (полная спека), yaml-edit (частичный merge по RFC 7396), yaml-patch (JSON Patch по RFC 6902) и diff (unified diff).

Функция yamlPrompt генерирует системный промпт в двух режимах: standalone (LLM выдаёт только YAML) и inline (LLM оборачивает YAML в фенсы внутри ответа). pipeYamlRender встаёт в AI SDK как TransformStream, который конвертирует фенсы в патчи для json-render.

Требует TypeScript и пакет @json-render/yaml. Для мультитёрновых правок передаётся previousSpec, чтобы yaml-patch применился к актуальному состоянию перед следующим yaml-edit.

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

  • парсить YAML потоково с эмиссией JSON Patch
  • генерировать промпты для AI с инструкциями по YAML-формату
  • конвертировать YAML-фенсы из стрима LLM в патчи для json-render
  • применять RFC 7396 merge и RFC 6902 patch к спеке через YAML
  • делать точечные правки спеки без перезаписи всего объекта

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

  • добавь yamlPrompt в системный промпт для каталога компонентов
  • настрой pipeYamlRender для стрима с previousSpec из текущей спеки
  • используй createYamlStreamCompiler для парсинга YAML по чанкам

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

1Через Skills CLI (Vercel)

npx skills add vercel-labs/json-render --skill yaml -a claude-code

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

~/.claude/skills/yaml/SKILL.md

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

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

Вопросы о yaml

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

Выполни npx skills add vercel-labs/json-render --skill yaml -a claude-code. Скилл появится в ~/.claude/skills/yaml/SKILL.md.

Что делает скилл yaml?

Добавляет YAML-формат для json-render: парсит YAML потоково, эмитит JSON Patch, генерирует промпты и конвертирует фенсы из AI SDK в патчи.

Чем yaml-edit отличается от yaml-patch?

yaml-edit делает deep merge по RFC 7396 (частичный YAML сливается с текущей спекой), а yaml-patch применяет JSON Patch операции по RFC 6902 (add, remove, replace).

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

SKILL.md · Apache-2.0
---
name: yaml
description: YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec streaming, yaml-spec/yaml-edit fences, or YAML prompt generation.
---

# @json-render/yaml

YAML wire format for `@json-render/core`. Progressive rendering and surgical edits via streaming YAML.

## Key Concepts

- **YAML wire format**: Alternative to JSONL that uses code fences (`yaml-spec`, `yaml-edit`, `yaml-patch`, `diff`)
- **Streaming parser**: Incrementally parses YAML, emits JSON Patch operations via diffing
- **Edit modes**: Patch (RFC 6902), merge (RFC 7396), and unified diff
- **AI SDK transform**: `TransformStream` that converts YAML fences into json-render patches

## Generating YAML Prompts

```typescript
import { yamlPrompt } from "@json-render/yaml";
import { catalog } from "./catalog";

// Standalone mode (LLM outputs only YAML)
const systemPrompt = yamlPrompt(catalog, {
  mode: "standalone",
  editModes: ["merge"],
  customRules: ["Always use dark theme"],
});

// Inline mode (LLM responds conversationally, wraps YAML in fences)
const chatPrompt = yamlPrompt(catalog, { mode: "inline" });
```

Options:

- `system` (string) — Custom system message intro
- `mode` ("standalone" | "inline") — Output mode, default "standalone"
- `customRules` (string[]) — Additional rules appended to prompt
- `editModes` (EditMode[]) — Edit modes to document, default ["merge"]

## AI SDK Transform

Use `pipeYamlRender` as a drop-in replacement for `pipeJsonRender`:

```typescript
import { pipeYamlRender } from "@json-render/yaml";
import { createUIMessageStream, createUIMessageStreamResponse } from "ai";

const stream = createUIMessageStream({
  execute: async ({ writer }) => {
    writer.merge(pipeYamlRender(result.toUIMessageStream()));
  },
});
return createUIMessageStreamResponse({ stream });
```

For multi-turn edits, pass the previous spec:

```typescript
pipeYamlRender(result.toUIMessageStream(), {
  previousSpec: currentSpec,
});
```

The transform recognizes four fence types:

- `yaml-spec` — Full spec, parsed progressively line-by-line
- `yaml-edit` — Partial YAML deep-merged with current spec (RFC 7396)
- `yaml-patch` — RFC 6902 JSON Patch lines; applied to the working spec, so later `yaml-edit` fences see them
- `diff` — Unified diff applied to serialized spec

## Streaming Parser (Low-Level)

```typescript
import { createYamlStreamCompiler } from "@json-render/yaml";

const compiler = createYamlStreamCompiler<Spec>();

// Feed chunks as they arrive from any source
const { result, newPatches } = compiler.push("root: main\n");
compiler.push("elements:\n  main:\n    type: Card\n");

// Flush remaining data at end of stream
const { result: final } = compiler.flush();

// Reset for next stream (optionally with initial state)
compiler.reset({ root: "main", elements: {} });
```

Methods: `push(chunk)`, `flush()`, `getResult()`, `getPatches()`, `reset(initial?)`

## Edit Modes (from @json-render/core)

The YAML package uses the universal edit mode system from core:

```typescript
import { buildEditInstructions, buildEditUserPrompt } from "@json-render/core";
import type { EditMode } from "@json-render/core";

// Generate edit instructions for YAML format
const instructions = buildEditInstructions({ modes: ["merge", "patch"] }, "yaml");

// Build user prompt with current spec context
const userPrompt = buildEditUserPrompt({
  prompt: "Change the title to Dashboard",
  currentSpec: spec,
  config: { modes: ["merge"] },
  format: "yaml",
  serializer: (s) => yamlStringify(s, { indent: 2 }).trimEnd(),
});
```

## Fence Constants

For custom parsing, use the exported constants:

```typescript
import {
  YAML_SPEC_FENCE,   // "```yaml-spec"
  YAML_EDIT_FENCE,   // "```yaml-edit"
  YAML_PATCH_FENCE,  // "```yaml-patch"
  DIFF_FENCE,        // "```diff"
  FENCE_CLOSE,       // "```"
} from "@json-render/yaml";
```

## Key Exports

| Export | Description |
|--------|-------------|
| `yamlPrompt` | Generate YAML system prompt from catalog |
| `createYamlTransform` | AI SDK TransformStream for YAML fences |
| `pipeYamlRender` | Convenience pipe wrapper (replaces `pipeJsonRender`) |
| `createYamlStreamCompiler` | Streaming YAML parser with patch emission |
| `YAML_SPEC_FENCE` | Fence constant for yaml-spec |
| `YAML_EDIT_FENCE` | Fence constant for yaml-edit |
| `YAML_PATCH_FENCE` | Fence constant for yaml-patch |
| `DIFF_FENCE` | Fence constant for diff |
| `FENCE_CLOSE` | Fence close constant |
| `diffToPatches` | Re-export: object diff to JSON Patch |
| `deepMergeSpec` | Re-export: RFC 7396 deep merge |

© vercel-labs · Apache-2.0 · vercel-labs/json-render

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

Всё по теме «Фронтенд и UI» →
k8s-yaml-validator akin-ozer Скилл прогоняет манифесты Kubernetes через линтер, схемы и dry-run и выдаёт отчёт с ошибками по строкам. Полезен перед kubectl apply. CX Codex +1 672установок ai-sdk официальный Vercel Labs Скилл настраивает работу агента с Vercel AI SDK. Он помогает писать код для чатов, генерации текста, вызова инструментов и сборки агентов без устаревших методов. CX Codex GP ChatGPT 22установок ai-elements официальный Vercel Labs Скилл подсказывает, как собирать AI-интерфейсы на React с компонентами ai-elements. Пригодится для чатов, потоковых ответов и отображения вызовов инструментов. CX Codex GP ChatGPT 7установок manifest-yaml-cursorrules-prompt-file PatrickJS Правило задаёт Cursor, как собирать лёгкий демо-бэкенд на Manifest: структура проекта, файл manifest/backend.yml и ограничения по сущностям. ★ 41 011звёзд репо update assistant-ui Обновляет существующее приложение на assistant-ui до актуальных версий AI SDK v7 и assistant-ui 0.15.x, применяя нужные миграции. Пригодится, когда после апдейта посыпались ошибки типов или пропали хуки. CX Codex +1 5 900установок vercel-development Mindrally Набор правил для ИИ-агента: как писать код под Next.js App Router, React Server Components и Vercel AI SDK. Пригодится, когда агент лепит клиентские компоненты там, где хватило бы серверных. CX Codex +1 712установок

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

Весь набор →
vue Скилл для преобразования JSON-спецификаций в Vue 3 компоненты с привязкой данных, условиями видимости и обработкой действий. Нужен, если вы генерируете интерфейсы через ИИ или строите UI из JSON. CX Codex +1 1 400установок ink Помогает создавать интерактивные терминальные интерфейсы из JSON-спецификаций через @json-render/ink. Пригодится при настройке TUI и каталогов компонентов для агентов. CX Codex +1 1 300установок svelte Помогает собирать интерфейсы Svelte 5 из спецификаций json-render и связывать компоненты с состоянием, событиями и действиями. CX Codex +1 1 200установок solid Скилл для рендеринга JSON-spec в реактивные SolidJS компоненты. Пригодится, если собираешь каталоги UI, настраиваешь провайдеры или разбираешься с реактивностью Solid. CX Codex +1 1 100установок xstate Помогает связать генеративный интерфейс json-render с хранилищем @xstate/store. Пригодится для управления состоянием компонентов через атом. CX Codex +1 1 100установок jotai Готовит Jotai как хранилище состояния для json-render: атом, адаптер StateStore и общий store с приложением. CX Codex +1 1 100установок redux Адаптер Redux для json-render: подключает слайс хранилища как источник состояния для рендерера. Пригодится, если состояние уже живёт в Redux. CX Codex +1 1 100установок shadcn-svelte Набор из 36 готовых компонентов на Svelte 5 и Tailwind CSS для json-render. Помогает агенту собирать интерфейсы и настраивать каталоги схем. CX Codex +1 1 100установок

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

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