Skip to content
Frontend
Skill

/yaml

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.

From plugin
json-render
19k31 skills

Claude Code

$ npx -y skills add vercel-labs/json-render --skill yaml --agent claude-code

SKILL.md

yaml.SKILL.md
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

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`:

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:

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)

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:

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:

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 |

Read more
@vercel-labs-2
Ships withjson-render

The Generative UI framework. Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.

Stars on GitHub

Momentum

stars in total
18.9k
Star history of vercel-labs/json-render on GitHub, a chart by star-history.com

Other skills on json-render.

codegen

codegen

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing…

core

core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core,…

More skills from other plugins.

next-bundle-optimizer
Auto-invoked

next-bundle-optimizer

Audit and reduce Next.js browser initial-load work. Use for slow route startup, oversized client bundles, duplicate browser…

nextjstoday143k
@vercel@vercelInstall Skill
migrate-radix-to-base

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert…

ui10d127k
@shadcn-ui@shadcn-uiInstall Skill
chrome-release-cls

chrome-release-cls

Given a Chrome Releases blog post URL (chromereleases.googleblog.com), extract every CVE/bug and find the underlying Gerrit CL…

electrontoday124k
@electron@electronInstall Skill
taste-skill
Auto-invoked

taste-skill

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One…

@leonxlnx@leonxlnxInstall Skill

Questions about yaml.

Which coding agents can use yaml?
yaml installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.