skills.rest
hasna
hasnaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

yaml

Parse streaming YAML UI specs into JSON Patch operations for json-render.

Updated Jun 24, 2026
Search Tags:#yaml#ai-sdk#prompt-generation#generative-ui#json-patch#streaming-parser#ui-specs
One-click install
npx skills add https://github.com/hasna/render --skill yaml-hasna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yaml
Source: https://github.com/hasna/render/tree/main/skills/yaml
Command: npx skills add https://github.com/hasna/render --skill yaml-hasna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the manual effort of parsing YAML-based generative UI specifications for json-render, enabling progressive rendering and incremental edits without re-processing entire UI definitions.

Core Features & Use Cases

  • Streaming YAML Parsing: Incrementally parses incoming YAML chunks and emits JSON Patch operations for real-time UI updates.
  • YAML Prompt Generation: Creates system and user prompts that guide LLMs to output valid, guardrailed YAML UI specs for your component catalog.
  • AI SDK Transform: Converts YAML code fences from LLM streams into json-render patches for seamless integration with AI SDK workflows.
  • Use Case: A developer building a generative dashboard can use this Skill to stream partial YAML specs from an LLM, apply small edits to individual components without re-rendering the full UI, and maintain consistent design guardrails across all generated outputs.

Quick Start

Use the yaml skill to convert a streaming LLM YAML spec output into progressive, editable UI patches for your json-render component catalog.

Frequently Asked Questions about yaml

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I stream YAML UI specs from an LLM for progressive rendering?▼

Streaming YAML UI specs involves incrementally parsing incoming LLM output chunks and emitting JSON Patch operations to enable real-time UI updates without re-processing the entire definition.

What is the best way to apply surgical edits to generative UI components?▼

Surgical edits to generative UI components are best handled by generating RFC 6902/7396 JSON Patches from YAML specs, allowing you to modify individual components without triggering a full UI re-render.

How do I constrain LLM output to generate valid YAML for my UI component catalog?▼

To constrain LLM output to valid YAML, use YAML prompt generation techniques that create system and user prompts, guiding the model to output guardrailed YAML UI specs tailored to your specific component catalog.

Does the AI SDK support converting YAML code fences into json-render patches?▼

Yes, the AI SDK supports converting YAML code fences from LLM streams into json-render patches through an AI SDK Transform, enabling seamless integration of YAML UI specs into generative workflows.

When should I use incremental YAML parsing instead of batch parsing for generative UIs?▼

You should use incremental YAML parsing instead of batch parsing when building generative interfaces that display partial LLM output in real-time, as it eliminates the manual effort of waiting for the entire UI definition to process.

Related Skills

Explore More Software Engineering Skills→
OthmanAdiOthmanAdi
20

openui-forge-vercel

Integrate OpenUI generative UI into existing codebases with Vercel AI SDK.

Community
Advanced
hasnaxyzhasnaxyz

yaml

Generate YAML prompts and streaming patch instructions for json-render specifications.

Official
Advanced
agentuityagentuity
1

agentuity-cli-cloud-stream-get

Retrieve stream details including metadata and public URL as JSON.

Official
Intermediate
hasnahasna

svelte

Convert JSON UI specifications into Svelte 5 component trees.

Official
Intermediate