
Yaml
Wire LLM output through YAML fences for json-render catalogs with streaming patches and AI SDK transforms.
Overview
yaml is an agent skill for the Build phase that implements YAML-based json-render streaming, prompt generation, and AI SDK patch transforms.
Install
npx skills add https://github.com/vercel-labs/json-render --skill yamlWhat is this skill?
- yamlPrompt for standalone vs inline LLM modes with customRules and editModes
- Streaming YAML parser diffs incremental YAML into JSON Patch operations
- Edit modes: Patch RFC 6902, merge RFC 7396, and unified diff
- AI SDK TransformStream converts yaml fences into json-render patches
- Code fence types: yaml-spec, yaml-edit, yaml-patch, diff
- Documents three edit modes: Patch (RFC 6902), merge (RFC 7396), and unified diff
- Four documented fence types: yaml-spec, yaml-edit, yaml-patch, diff
Adoption & trust: 524 installs on skills.sh; 15k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want LLMs to stream UI specs and edits but JSONL feels brittle and you need fenced YAML with merge, patch, and diff edit modes.
Who is it for?
Indie builders building generative UI with @json-render/core catalogs and Vercel AI SDK streaming.
Skip if: Projects with no json-render catalog, pure REST backends, or teams avoiding LLM-driven UI mutation.
When should I use this skill?
Working with @json-render/yaml, YAML-based spec streaming, yaml-spec/yaml-edit fences, or YAML prompt generation.
What do I get? / Deliverables
Agents configure yamlPrompt, streaming parsers, and TransformStreams so model output becomes incremental json-render patches your catalog can apply.
- yamlPrompt-configured system prompts for catalogs
- Streaming YAML parser and AI SDK transform wiring
Recommended Skills
Journey fit
Build is primary because the skill covers @json-render/yaml APIs for UI spec streaming and prompt generation during product implementation. frontend matches catalog-driven UI specs, yaml-spec/yaml-edit fences, and progressive render patches—not backend-only APIs.
How it compares
Integration skill for @json-render/yaml wire format, not a generic YAML linter or static React component library.
Common Questions / FAQ
Who is yaml for?
Solo TypeScript developers wiring json-render catalogs to streamed LLM output via YAML fences and AI SDK.
When should I use yaml?
During Build when implementing @json-render/yaml, yaml-spec or yaml-edit fences, streaming parser diffs, or yamlPrompt system prompts.
Is yaml safe to install?
Check the Security Audits panel on this Prism page; generated prompts may cause models to mutate live UI specs in your app.
SKILL.md
READMESKILL.md - Yaml
# @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 - `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 prom