Standardizes generative UI development using the token-efficient OpenUI framework.
Install
mkdir -p .claude/skills/openui && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18691" && unzip -o skill.zip -d .claude/skills/openui && rm skill.zipInstalls to .claude/skills/openui
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Build generative UI apps with OpenUI and OpenUI Lang — the token-efficient open standard for LLM-generated interfaces. Use when mentioning OpenUI, @openuidev, generative UI, streaming UI from LLMs, component libraries for AI, or replacing json-render/A2UI. Covers scaffolding, defineComponent, system prompts, the Renderer, and debugging OpenUI Lang output.Key capabilities
- →Scaffold generative UI applications
- →Define component schemas with Zod and React renderers
- →Generate system prompts from component libraries
- →Parse OpenUI Lang line-by-line
- →Render structured UI progressively from LLM streams
- →Integrate with various LLM frameworks
How it works
OpenUI uses a pipeline where component libraries generate system prompts for LLMs, which then output OpenUI Lang streams parsed and rendered into live UI.
Inputs & outputs
When to use openui
- →Scaffolding generative UI
- →Defining component libraries
- →Implementing streamable UI renderers
About openui
Provides tools for scaffolding, defining component schemas, and rendering streamable interfaces with OpenUI Lang.
Build generative UI apps with OpenUI and OpenUI Lang — the token-efficient open standard for LLM-generated interfaces. Use when mentioning OpenUI, @openuidev, generative UI, streaming UI from LLMs, component libraries for AI, or replacing json-render/A2UI. Covers scaffolding, defineComponent, system
When not to use it
- →When not building generative UI apps with OpenUI
- →When using JSON-based UI generation alternatives
- →When the goal is not token-efficient LLM-generated interfaces
Limitations
- →OpenUI Lang requires one statement per line
- →Root entry point must assign to `root`
- →Positional arguments map to component props by key order in Zod schema
How it compares
This skill enables token-efficient, line-oriented generative UI from LLMs, unlike traditional JSON or markdown-based UI generation.
Compared to similar skills
openui side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| openui (this skill) | 0 | 5mo | Review | Advanced |
| ui-ux-pro-max | 1,909 | 7mo | Review | Intermediate |
| scroll-experience | 101 | 9mo | No flags | Intermediate |
| ui-styling | 12 | 11mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mostafasudo
View all by mostafasudo →You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
ui-styling
mrgoonie
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
figma
openai
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
interaction-design
wshobson
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.