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.
- Installs
- 1K
- Last 24h
- +8
- Trending rank
- #9455
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/vercel-labs/json-render --skill yaml- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads yaml automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
@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:
TransformStreamthat 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 intromode("standalone" | "inline") — Output mode, default "standalone"customRules(string[]) — Additional rules appended to prompteditModes(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-lineyaml-edit— Partial YAML deep-merged with current spec (RFC 7396)yaml-patch— RFC 6902 JSON Patch lines; applied to the working spec, so lateryaml-editfences see themdiff— 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 |
FAQ
What does the yaml skill do?
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.
How do I install yaml?
Run npx skills add https://github.com/vercel-labs/json-render --skill yaml in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/yaml/ (personal) or .claude/skills/yaml/ (project).
Which AI agents can use yaml?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is yaml safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains yaml?
It is published by vercel-labs in vercel-labs/json-render, and it is an official skill from the maker of the technology it covers. It has 1,023 recorded installs.
More from vercel-labs/json-render
react
vercel-labs/json-render
React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.
core
vercel-labs/json-render
Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.
codegen
vercel-labs/json-render
Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.
next
vercel-labs/json-render
Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.
devtools
vercel-labs/json-render
Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for @json-render/devtools.
directives
vercel-labs/json-render
Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.
Popular ai & agents skills
google-agents-cli-publish
google/agents-cli
This skill should be used when the user wants to "publish an agent", "publish my ADK agent", "register an agent with Gemini", "publish to Gemini" (formerly Gemini Enterprise), or needs guidance on the agents-cli publish gemini command. Also use when the user wants to "manage agents in Agent Registry", "list/update/delete registered agents", or "register an MCP server". Covers ADK vs A2A registration modes, programmatic and interactive usage, flag reference, auto-detection from deployment metadata, Agent Registry fleet management, and troubleshooting. Part of the agents-cli skills suite. Do NOT use for deployment (use google-agents-cli-deploy).
google-agents-cli-eval
google/agents-cli
This skill should be used when the user wants to "run an evaluation", "evaluate my agent", "evaluate my ADK agent", "write an eval dataset", "analyze eval failures", "compare eval results", "optimize agent", or needs guidance on the Gemini platform eval methodology and the Quality Flywheel. Covers eval metrics, dataset schema, LLM-as-judge scoring, and common failure causes. Applies to any agents-cli project, whatever framework the agent is written in. Do NOT use for agent API code patterns (ADK: use google-agents-cli-adk-code), deployment (use google-agents-cli-deploy), or project scaffolding (use google-agents-cli-scaffold).
skill-creator
anthropics/skills
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
codex-pet
prime-skills/runcomfy-agent-skills
Codex Pet generator on RunComfy. Build a Codex-compatible Codex Pet spritesheet.webp + pet.json from a single reference image, drop it into ${CODEXHOME:-$HOME/.codex}/pets/ / and Codex picks it up as a custom Codex Pet next to the 8 built-ins. This skill produces the exact Codex Pet atlas Codex expects (1536x1872 PNG/WebP, 8 cols x 9 rows, 192x208 cells, 9 animation states — idle, running-right, running-left, waving, jumping, failed, waiting, running, review). Calls OpenAI GPT Image 2 edit ONCE via the local RunComfy CLI as runcomfy run openai/gpt-image-2/edit to produce a canonical Codex Pet pose, then assembles all 9 animation rows programmatically with ImageMagick micro-transforms — no Codex Pro, no $imagegen, no OPENAIAPIKEY required, only RUNCOMFYTOKEN. Triggers on "codex pet", "create codex pet", "make codex pet", "hatch codex pet", "/hatch image", "desktop pet codex", "codex pets", "spritesheet.webp", or any explicit ask to build a custom pet for OpenAI Codex.
full-output-enforcement
leonxlnx/taste-skill
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
executing-plans
obra/superpowers
Use when executing an implementation plan in the current session as the implementer yourself — your human partner chose inline execution, or no subagent tool is available