Omk Stitch
KaimingWan/oh-my-kiro
Google Stitch design-to-code workflow with design system management.
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows.
Install AI UI Generation
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install yonatangross/orchestkit ai-ui-generation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/src/skills/ai-ui-generation .claude/skills/ai-ui-generation && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .claude/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install yonatangross/orchestkit ai-ui-generation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/src/skills/ai-ui-generation .agents/skills/ai-ui-generation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .agents/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install yonatangross/orchestkit ai-ui-generation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/src/skills/ai-ui-generation .cursor/skills/ai-ui-generation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .cursor/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/yonatangross/orchestkit.git --path src/skills/ai-ui-generation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install yonatangross/orchestkit ai-ui-generation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/src/skills/ai-ui-generation .gemini/skills/ai-ui-generation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .gemini/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install yonatangross/orchestkit ai-ui-generationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .github/skills && cp -r skills-src/src/skills/ai-ui-generation .github/skills/ai-ui-generation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .github/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add yonatangross/orchestkit --skill ai-ui-generation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install yonatangross/orchestkit ai-ui-generation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/yonatangross/orchestkit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/src/skills/ai-ui-generation .opencode/skills/ai-ui-generation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "ai-ui-generation" agent skill from https://github.com/yonatangross/orchestkit/tree/main/src/skills/ai-ui-generation into .opencode/skills/ai-ui-generation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "ai-ui-generation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
ai-ui-generation- GitHub stars
- 292
- Token cost
- ~2.7k tokens
- SKILL.md length
- 938 words
- Files
- 15 (incl. references)
- Skills in repo
- 108
- Repo updated
- First seen
- Licence
- MIT
At a glance
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows.
- Works in 6 steps: Own the output — AI generates a draft;… → Tokens over literals — Never accept… → Constraint-first prompts — Specify… → …
- Generating UI components with AI tools
- SKILL.md covers Quick Reference, Decision Table — json-render…, Quick Start and Rule Details, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
AI UI Generation is an agent skill from yonatangross/orchestkit. 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.
Its SKILL.md is about 2.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 16 other files, including reference files (for example `references/ai-ui-failure-modes.md`, `references/ai-ui-tool-comparison.md` and `references/prompt-templates-library.md`). Compatibility notes: Claude Code 2.1.277+.
It sits in Frontend & Design, covering Design systems, QA and bug reports and Design tokens. It works with Model Context Protocol and Google Stitch. The repository describes itself as: The Complete AI Development Toolkit for Claude Code. 106 skills, 36 agents, 171 hooks. Install ork for stable (v9.x), or ork-alpha for the v10 line, which ships daily. The licence is MIT.
When your agent uses it
- Generating UI components with AI tools
- Rendering multi-surface MCP visual output
- Reviewing AI-generated code
- Integrating AI output into design systems
Example prompts
- “/ai-ui-generation”
Requirements
- Node.js
- Compatibility (from SKILL.md): Claude Code 2.1.277+.
- Pre-approved tools (allowed-tools): Read, Glob, Grep, WebFetch, WebSearch, mcp__stitch__generate_screen_from_text, mcp__plugin_hq-ext_stitch__generate_screen_from_text, mcp__stitch__get_screen, mcp__plugin_hq-ext_stitch__get_screen
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Own the output — AI generates a draft; the engineer reviews, refactors, and is accountable for what ships.
- Tokens over literals — Never accept hardcoded colors, spacing, or typography values. Always map to design tokens.
- Constraint-first prompts — Specify framework, tokens, shadcn style (Luma/Nova/etc.), a11y, and states upfront. Vague prompts produce vague…
- Iterative refinement — Complex components need 2-3 prompt passes: structure first, states second, polish third.
- CI is non-negotiable — Every AI-generated component goes through the same CI pipeline as hand-written code.
- Accessibility by default — Include a11y requirements in every prompt; verify with automated checks post-generation.
What it can do on your machine
Read from SKILL.md and the folder at commit e4ff8d9. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
ReadGlobGrepWebFetchWebSearchmcp__stitch__generate_screen_from_textmcp__plugin_hq-ext_stitch__generate_screen_from_textmcp__stitch__get_screenmcp__plugin_hq-ext_stitch__get_screen
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Compatibility
Claude Code 2.1.277+.
From compatibility in the SKILL.md frontmatter.
Context cost
AI UI Generation loads about 2.7k tokens when it runs, and up to ~6.5k if it reads all its reference files. Until then it costs about 127 tokens; SKILL.md has 938 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from yonatangross/orchestkit at commit e4ff8d9, republished under its MIT licence (© yonatangross). 938 words, ~2,659 tokens.
Download SKILL.mdSave it as
.claude/skills/ai-ui-generation/SKILL.md (or your agent's skills folder). This skill also uses 14 other files; get the full folder from GitHub.- name
- ai-ui-generation
- 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.
- allowed-tools
- Read, Glob, Grep, WebFetch, WebSearch, mcp__stitch__generate_screen_from_text, mcp__plugin_hq-ext_stitch__generate_screen_from_text, mcp__stitch__get_screen, mcp__plugin_hq-ext_stitch__get_screen
- compatibility
- Claude Code 2.1.277+.
- license
- MIT
- user-invocable
- false
- disable-model-invocation
- true
- metadata.owner-agent
- frontend-ui-developer
- metadata.category
- document-asset-creation
- metadata.version
- 1.1.0
- metadata.author
- OrchestKit
- metadata.complexity
- medium
- metadata.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
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
| 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 |
Total: 8 rules across 5 categories
Decision Table — json-render vs v0.app vs Stitch vs Bolt Cloud vs Cursor
| 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 | generate_screen_from_text (once; no retry) + get_screen(name="projects/{project}/screens/{screen}") |
| 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 |
Quick Start
Structured Prompt Example
Generate a React signup form component using:
- Framework: React 19 + TypeScript
- Styling: Tailwind CSS v4 + shadcn/ui (Luma style — rounded-4xl, shadow-md elevation)
- Style: run `npx shadcn@latest apply luma` (CLI v4, Apr 2026) after generation
- Tokens: use color.primary, color.destructive, spacing.md from our design system
- A11y: ARIA labels on all inputs, error announcements via aria-live
- States: default, loading (disabled + spinner), error (inline messages), success
- Responsive: stack on mobile (<640px), 2-col on desktopReview Example — After AI Generation
// AI generated: hardcoded hex value
<button className="bg-[#3b82f6] text-white px-4 py-2">Submit</button>
// After human review: design token applied
<Button variant="default" size="md">Submit</Button>Rule Details
json-render Integration
json-render is the first choice for AI UI generation when output must render across multiple surfaces (web, mobile, CLI, MCP). Define a catalog of components once, generate JSON specs from AI, and render on any target surface. See ork:json-render-catalog for catalog authoring patterns.
| Rule | File | Key Pattern |
|---|---|---|
| json-render Patterns | rules/json-render-patterns.md | Catalog-first: define once, render anywhere via per-platform registries |
Prompt Engineering
Structured prompts that specify framework, tokens, a11y, and states upfront.
| 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 |
Quality Assurance
Systematic review and CI gating for AI-generated components.
| 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 |
Show full SKILL.md (372 more words)Show less
Design System Integration
Ensuring AI output uses design tokens and conforms to the design system.
| 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 |
Tool Selection & Workflow
Choosing the right AI tool and iterating effectively.
| 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 |
Key Principles
- Own the output — AI generates a draft; the engineer reviews, refactors, and is accountable for what ships.
- Tokens over literals — Never accept hardcoded colors, spacing, or typography values. Always map to design tokens.
- Constraint-first prompts — Specify framework, tokens, shadcn style (Luma/Nova/etc.), a11y, and states upfront. Vague prompts produce vague output.
- Iterative refinement — Complex components need 2-3 prompt passes: structure first, states second, polish third.
- CI is non-negotiable — Every AI-generated component goes through the same CI pipeline as hand-written code.
- Accessibility by default — Include a11y requirements in every prompt; verify with automated checks post-generation.
Anti-Patterns (FORBIDDEN)
- Shipping raw AI output — Never merge AI-generated code without human review and design system refactoring.
- Vague prompts — "Make a nice form" produces inconsistent, non-conformant output. Always specify constraints.
- Hardcoded hex/rgb values — AI tools default to arbitrary colors. Replace with OKLCH design tokens.
- Skipping CI for "simple" components — AI-generated code has the same bug surface as hand-written code.
- Using v0.app for incremental changes — v0.app generates from scratch; use Cursor for changes within an existing codebase.
- Single-pass complex components — Multi-state components (loading, error, empty, success) need iterative prompting.
- Trusting AI a11y claims — AI tools add ARIA attributes inconsistently. Always verify with axe-core or Storybook a11y addon.
Detailed Documentation
| 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 |
Related Skills
ork:json-render-catalog— json-render catalog authoring, schema validation, and registry patternsork:mcp-visual-output— MCP visual output rendering with json-render specsork:multi-surface-render— Cross-platform rendering from a single component catalogork:ui-components— shadcn/ui component patterns and CVA variantsork:accessibility— WCAG compliance, ARIA patterns, screen reader supportork:animation-motion-design— Motion library animation patternsork:responsive-patterns— Responsive layout and container query patternsork:design-system-tokens— Design token architecture and theming
© yonatangross, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 14 other files (references) in src/skills/ai-ui-generation of yonatangross/orchestkit.
- SKILL.md
- references/ai-ui-failure-modes.md
- references/ai-ui-tool-comparison.md
- references/prompt-templates-library.md
- rules/_sections.md
- rules/_template.md
- rules/ai-ci-gate.md
- rules/ai-iteration-patterns.md
- rules/ai-prompt-patterns.md
- rules/ai-refactoring-conformance.md
- rules/ai-review-checklist.md
- rules/ai-token-injection.md
- rules/ai-tool-selection.md
- rules/json-render-patterns.md
- test-cases.json
Open the folder on GitHubat commit e4ff8d9
Compare with similar skills
AI UI Generation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| AI UI Generation this skillyonatangross/orchestkit | 292 | — | ~2.7k | Automated safety check: Pass | MIT | |
| Omk StitchKaimingWan/oh-my-kiro | 107 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Common Stitch DesignHoangNguyen0403/agent-skills-standard | 572 | — | ~686 | Automated safety check: Pass | MIT | |
| Figma use_figma Plugin API Ruleswarpdotdev/warp | 65k | 4 repos | ~4.4k | Automated safety check: Pass | AGPL-3.0 | |
| Stitch Taste Design Systemgoogle-labs-code/stitch-skills | 8.5k | 15 repos | ~3.1k | Automated safety check: Pass | Apache-2.0 | |
| Figma Screen Generatorwarpdotdev/warp | 65k | 2 repos | ~5k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Common Stitch Design
HoangNguyen0403/agent-skills-standard
Drive Google Stitch over MCP safely - read screens, write and lint DESIGN.md, create design systems, and fix designs through variants instead of overwriting.
Figma use_figma Plugin API Rules
warpdotdev/warp
Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.
- Official
Stitch Taste Design System
google-labs-code/stitch-skills
Generates a DESIGN.md design-language file for Google Stitch that encodes color, typography, layout, component behavior and motion rules to avoid generic AI-looking UI.
Figma Screen Generator
warpdotdev/warp
Builds or updates full Figma screens from code or a description by reusing the file's published design system components, variables and styles.
Extract Design System
arvindrk/extract-design-system
Extract design primitives from a public website and generate starter token files for your project.
More from yonatangross/orchestkit
All 108 skills in this repoAPI Design
yonatangross/orchestkit
API contract design for REST and GraphQL, covering resource shape, URL and header versioning with deprecation windows, RFC 9457 Problem Details error handling, and OpenAPI specs.
Architecture Decision Record
yonatangross/orchestkit
ADR templates in the Nygard format with context, decision, consequences, and alternatives.
Audit Full
yonatangross/orchestkit
Single-pass codebase analysis leveraging a 1M-token context window for comprehensive security scanning, architecture review, and dependency auditing.
Code Review Playbook
yonatangross/orchestkit
Structured review processes, conventional comments, language-specific checklists, and feedback templates.
Create PR
yonatangross/orchestkit
Creates GitHub pull requests with pre-flight validation, conventional title formatting, and structured summary generation.
Explore
yonatangross/orchestkit
Multi-angle codebase exploration spawning 3-5 parallel agents for code structure, data flow, architecture patterns, and health assessment.
Related
Works with
Categories
Questions about AI UI Generation
What does AI UI Generation do?
AI-assisted UI generation patterns for json-render, v0.app, Google Stitch, Bolt Cloud, and Cursor workflows. AI UI Generation is an agent skill from yonatangross/orchestkit.app, Google Stitch, Bolt Cloud, and Cursor workflows.
When should I use AI UI Generation?
AI UI Generation fits situations like: generating UI components with AI tools; rendering multi-surface MCP visual output; reviewing AI-generated code; integrating AI output into design systems.
How do I install AI UI Generation in Claude Code?
Run `npx skills add yonatangross/orchestkit --skill ai-ui-generation -a claude-code`. Or copy the skill folder (src/skills/ai-ui-generation in yonatangross/orchestkit) into .claude/skills/ai-ui-generation in your project. Claude Code loads it when a task matches its description.
How do I install AI UI Generation in Codex?
Run `npx skills add yonatangross/orchestkit --skill ai-ui-generation -a codex`. Or copy the skill folder (src/skills/ai-ui-generation in yonatangross/orchestkit) into .agents/skills/ai-ui-generation in your project. Codex loads it when a task matches its description.
Can I use AI UI Generation in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add yonatangross/orchestkit --skill ai-ui-generation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/ai-ui-generation, .gemini/skills/ai-ui-generation, .github/skills/ai-ui-generation and .opencode/skills/ai-ui-generation in your project.
What does AI UI Generation need to run?
SKILL.md names no scripts, command-line tools or credentials: AI UI Generation is instructions for the agent only. Our summary lists: Node.js. Its frontmatter pre-approves these tools: Read, Glob, Grep, WebFetch, WebSearch, mcp__stitch__generate_screen_from_text, mcp__plugin_hq-ext_stitch__generate_screen_from_text, mcp__stitch__get_screen, mcp__plugin_hq-ext_stitch__get_screen. Compatibility (from SKILL.md): Claude Code 2.1.277+..
Does AI UI Generation access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is AI UI Generation safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does AI UI Generation use?
AI UI Generation is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does AI UI Generation use?
About 2.7k tokens (SKILL.md is roughly 11k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 3.8k tokens, read only when the agent opens those files.
What are the alternatives to AI UI Generation?
Skills that share tags, products or a category with AI UI Generation: Omk Stitch (KaimingWan/oh-my-kiro, 107 stars), Common Stitch Design (HoangNguyen0403/agent-skills-standard, 572 stars), Figma use_figma Plugin API Rules (warpdotdev/warp, 65k stars) and Stitch Taste Design System (google-labs-code/stitch-skills, 8.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains AI UI Generation?
yonatangross (a GitHub user) maintains it in yonatangross/orchestkit, which has 292 GitHub stars. The repository holds 108 skills in this directory. The repository was last updated on October 10, 2026.
Source: yonatangross/orchestkit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.