ai-ui-generation

AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.

Jump to install

Repository: yonatangross/orchestkit
Last source activity: August 1, 2026 at 10:06
Detected SKILL.md language: English
Stars: 219
Forks: 20

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/yonatangross/orchestkit --skill ai-ui-generation

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

15 files

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

chain-patterns

Chain patterns for multi-phase pipelines: MCP detection, handoff files, checkpoint-resume, worktree agents, CronCreate monitoring. Use when building or debugging a pipeline skill.

2026-08-12

doctor

OrchestKit doctor for health diagnostics across manifest integrity, hook configuration, skill validation, agent frontmatter, MCP server connectivity, CC version compatibility, and permission rules. Reports issues with severity levels and auto-remediation suggestions. Validates component counts, detects orphaned entries, and checks CC version matrix compliance. Use when diagnosing plugin health, troubleshooting configuration issues, or running pre-release checks.

2026-08-12

telemetry-inspect

Inspects the OrchestKit telemetry pipeline for the current project — lists all known telemetry files with write counts, sizes, schema status, growth trend, and orphan detection. Use when verifying the observability pipeline is healthy, debugging a missing writer, or auditing which files have schema locks vs. which are drift-vulnerable. Read-only — never modifies telemetry files.

2026-08-12

View all from this repository

AI UI Generation

Patterns for generating, reviewing, and integrating UI components produced by AI tools (json-render, v0.app, Google Stitch, Bolt Cloud, Cursor). json-render is the first choice for multi-surface, MCP visual output, and type-safe catalog workflows. AI-generated UI is 80% boilerplate, 20% custom — the human reviews, refactors, and owns the output. These rules ensure AI output meets design system, accessibility, and quality standards before shipping.

Tool landscape as of 2026-04:

v0.dev → v0.app (Jan 2026 rebrand) — expanded from component scaffolding to full-stack app generation with shipping targets (Vercel, Cloudflare, Railway). v0.app MCP server (@vercel/v0-mcp) exposes generation as an MCP tool, so agents can call it programmatically.
Google Stitch — design-first generation via stitch.withgoogle.com/docs/mcp. Produces multi-screen apps (up to 5 interconnected screens) with React/HTML + PNG. Strong when input is a screenshot, URL, or DESIGN.md file.
Bolt Cloud (StackBlitz, 2026) — Bolt now runs the dev environment in the cloud (no local WebContainer). Integrates with GitHub and supports persistent databases. Best for full-stack prototypes with backend + deploy.
v0.app and Stitch both integrate with shadcn/ui styles; pair with the shadcn apply <style> CLI (v4) to reuse generated output.

Quick Reference

name	ai-ui-generation
license	MIT
compatibility	Claude Code 2.1.220+.
description	AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
tags	["ai-ui","json-render","v0","v0-app","stitch","bolt","bolt-cloud","cursor","prompt-engineering","code-generation","design-tokens","component-generation","ai-review","shadcn-ui"]
context	fork
agent	frontend-ui-developer
version	1.1.0
author	OrchestKit
user-invocable	false
disable-model-invocation	true
complexity	medium
persuasion-type	reference
metadata	{"category":"document-asset-creation"}
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch"]

Category	Rules	Impact	When to Use
json-render Integration	1	HIGH	Multi-surface output, MCP visual output, type-safe catalogs
Prompt Engineering	2	HIGH	Writing prompts for component generation
Quality Assurance	2	CRITICAL/HIGH	Reviewing and gating AI-generated code
Design System Integration	2	HIGH	Injecting tokens, refactoring for conformance
Tool Selection & Workflow	2	MEDIUM	Choosing the right AI tool, iterating prompts

name	ai-ui-generation
license	MIT
compatibility	Claude Code 2.1.220+.
description	AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. Covers prompt engineering for component and full-stack app generation, review checklists for AI-generated code, design token injection, refactoring for design system conformance, and CI gates for quality assurance. Use when generating UI components with AI tools, rendering multi-surface MCP visual output, reviewing AI-generated code, or integrating AI output into design systems.
tags	["ai-ui","json-render","v0","v0-app","stitch","bolt","bolt-cloud","cursor","prompt-engineering","code-generation","design-tokens","component-generation","ai-review","shadcn-ui"]
context	fork
agent	frontend-ui-developer
version	1.1.0
author	OrchestKit
user-invocable	false
disable-model-invocation	true
complexity	medium
persuasion-type	reference
metadata	{"category":"document-asset-creation"}
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch"]

Category	Rules	Impact	When to Use
json-render Integration	1	HIGH	Multi-surface output, MCP visual output, type-safe catalogs
Prompt Engineering	2	HIGH	Writing prompts for component generation
Quality Assurance	2	CRITICAL/HIGH	Reviewing and gating AI-generated code
Design System Integration	2	HIGH	Injecting tokens, refactoring for conformance
Tool Selection & Workflow	2	MEDIUM	Choosing the right AI tool, iterating prompts

Scenario	Tool	Why
Multi-surface / MCP visual output	json-render	Single catalog renders to any surface — FIRST CHOICE
Type-safe component catalog	json-render	Schema-driven specs with per-platform registries
Streaming UI from AI agents	json-render	Structured JSON specs render progressively
New component from scratch	v0.app	Full scaffold with shadcn/ui, Tailwind, a11y. Pair with `shadcn apply <style>` for style consistency
Full-stack app with deploy	v0.app	Jan 2026 expansion — routes, DB, auth, Vercel/Cloudflare deploy in one generation
Design-driven (screenshot/URL/DESIGN.md)	Google Stitch	`build_site` + `get_screen_code` / `get_screen_image`, up to 5 screens
Multi-screen flow from a visual source	Google Stitch	Strongest when grounded in an existing design
Full-stack prototype with persistent backend	Bolt Cloud	Cloud dev env, GitHub integration, databases
Incremental change in existing codebase	Cursor	Understands project context, imports, tokens
Refactor existing component	Cursor	Reads surrounding code, respects conventions
Explore visual design variations	v0.app or Stitch	v0.app for freeform, Stitch when grounded in a reference
Add feature to running app	Bolt Cloud	Cloud preview, full environment, persists between sessions
Fix bug in existing component	Cursor	Inline edits with full project awareness

ai-ui-generation

Install options

Review the source files

AI UI Generation

Quick Reference

AI UI Generation

Quick Reference

Decision Table — json-render vs v0.app vs Stitch vs Bolt Cloud vs Cursor

Quick Start

Structured Prompt Example

Review Example — After AI Generation

Rule Details

json-render Integration

Prompt Engineering

Quality Assurance

Design System Integration

Tool Selection & Workflow

Key Principles

Anti-Patterns (FORBIDDEN)

Detailed Documentation

Related Skills

Rule	File	Key Pattern
Prompt Patterns	`rules/ai-prompt-patterns.md`	Constraint-first prompts with framework, tokens, a11y
Iteration Patterns	`rules/ai-iteration-patterns.md`	Multi-pass prompts for complex interactive states

Rule	File	Key Pattern
Review Checklist	`rules/ai-review-checklist.md`	10-point checklist for every AI-generated component
CI Gate	`rules/ai-ci-gate.md`	Automated quality gates before merge

Rule	File	Key Pattern
Token Injection	`rules/ai-token-injection.md`	Pass token names in prompts, reject hardcoded values
Refactoring Conformance	`rules/ai-refactoring-conformance.md`	Steps to refactor raw AI output for design system

Rule	File	Key Pattern
Tool Selection	`rules/ai-tool-selection.md`	Match tool to use case: v0, Bolt, Cursor
Iteration Patterns	`rules/ai-iteration-patterns.md`	Iterative refinement for complex states

Resource	Description
references/ai-ui-tool-comparison.md	json-render vs v0 vs Bolt vs Cursor vs Copilot comparison
references/prompt-templates-library.md	Copy-paste prompt templates for common components
references/ai-ui-failure-modes.md	Top 10 failure modes and fixes

ai-ui-generation

Source facts

Install options

Review the source files

More from this repository

More from this repository

AI UI Generation

Quick Reference

AI UI Generation

Quick Reference

Decision Table — json-render vs v0.app vs Stitch vs Bolt Cloud vs Cursor

Quick Start

Structured Prompt Example

Review Example — After AI Generation

Rule Details

json-render Integration

Prompt Engineering

Quality Assurance

Design System Integration

Tool Selection & Workflow

Key Principles

Anti-Patterns (FORBIDDEN)

Detailed Documentation

Related Skills