kobe4cn/a2ui_skills
Overview
This skill generates A2UI Protocol v0.8 compliant UI message streams for agent-driven interfaces. It produces JSONL messages for surfaceUpdate, dataModelUpdate, beginRendering, and deleteSurface so clients can render across web, mobile, and desktop. Use it to create forms, lists, cards, modals, and interactive components that bind cleanly to a data model.
How this skill works
The skill emits a sequence of JSONL messages: surfaceUpdate to define component adjacency lists, dataModelUpdate to populate dynamic state, and beginRendering to instruct the client to start rendering. Components are created as a flat list with unique IDs and interlinked via ID references; values use BoundValue patterns (literalString, path, or both) for initialization and binding. It also supports styles, component weights for flex layout, and action/context wiring for user events.
When to use it
- Building agent-driven UIs that stream updates to client surfaces
- Creating forms, multi-step flows, or data-bound input components
- Rendering lists, cards, or media components across platforms
- Progressive rendering where UI is streamed and updated incrementally
- Defining surfaces that need consistent data-model separation
Best practices
- Assign a unique id to every component within a surface
- Keep UI structure in surfaceUpdate and dynamic state in dataModelUpdate
- Use JSON Pointer paths (e.g., /form/email) for data bindings
- Send beginRendering only after core components are defined for progressive render
- Clean up completed flows with deleteSurface to avoid stale UI state
Example use cases
- A booking form: surfaceUpdate for layout, dataModelUpdate to initialize fields, beginRendering to show the form
- A paginated list: stream new List items via surfaceUpdate and update list dataModel entries
- A confirmation modal: define Modal components and trigger via beginRendering when needed
- A settings panel: use weight for responsive Column/Row layouts and bind toggles to /settings/* paths
- A media card gallery: Image and Video components with a Card wrapper and a List for scrolling
FAQ
Use a BoundValue with both path and literalString; literalString sets the default and path maintains the binding to the data model.
When should I use weights on components?
Use weight for Column/Row children to control flex distribution; higher weight gets proportionally more space.
