a2ui-workshop-builder

a2ui-workshop-builder is a skill for Claude Code, Codex from JAICHANGPARK/workshop-harness. It costs 61 tokens per session (1,595 once invoked), scanned A, original, MIT.

A workshop-building aid for A2UI, a protocol in which AI agents describe interface elements using JSON, and Flutter GenUI, a Flutter toolkit that renders those elements as native widgets. It teaches developers to build interfaces that agents can assemble dynamically.

In plain words
What is it for?
Use it to create hands-on workshops covering declarative UI data, type-safe widget catalogs, streamed interface surfaces, and Flutter components such as cards, date pickers, and sliders.
Why use it?
It helps explain how to connect an AI agent's structured UI description to an interactive Flutter screen instead of relying only on fixed screens or plain text.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/jaichangpark/workshop-harness/a2ui-workshop-builder
Any agent
npx skills add JAICHANGPARK/workshop-harness --skill a2ui-workshop-builder
Clone the repo
git clone --depth 1 https://github.com/JAICHANGPARK/workshop-harness

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for a2ui-workshop-builder

README.md
[![agentmods](https://agentmods.dev/badge/skills/jaichangpark/workshop-harness/a2ui-workshop-builder.svg)](https://agentmods.dev/skills/jaichangpark/workshop-harness/a2ui-workshop-builder)
Your own site
<a href="https://agentmods.dev/skills/jaichangpark/workshop-harness/a2ui-workshop-builder"><img src="https://agentmods.dev/badge/skills/jaichangpark/workshop-harness/a2ui-workshop-builder.svg" alt="Measured on agentmods" height="20"></a>
Per session 61 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,595 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00061 $0.01595
Opus 5 $0.00030 $0.00797
Sonnet 5 $0.00012 $0.00319
Haiku 4.5 $0.00006 $0.00160

Measured 5d ago against content hash 10c68f2b1497, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

a2ui-workshop-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/a2ui-workshop-builder/SKILL.md · 161 lines

How it starts

The opening of the file, as written. The whole thing — 161 lines — stays where its author put it; the contents beside it link to each section on GitHub.

A2UI & Flutter GenUI Workshop Builder Skill

Purpose

Automates the creation of cutting-edge hands-on workshops focused on A2UI (Agent-to-User Interface) and Generative UI (GenUI) in Flutter. Teaches developers how to replace static, hardcoded application screens and monolithic markdown text responses with agent-driven, dynamically orchestrated native UI widgets.

Protocol & SDK Standards:

  • A2UI Protocol (a2ui.org): Open-source, framework-agnostic protocol where AI agents emit declarative JSON structures representing UI components.
  • Flutter GenUI SDK (genui): Official Google Flutter framework providing WidgetCatalog, SurfaceController, and GenUISurface to render A2UI payloads natively.

Core GenUI & A2UI Architectural Concepts

flowchart LR
    User["User Query<br>'Book a hotel in Tokyo'"] --> Agent["AI Agent (Gemini)<br>with A2UI System Prompt"]
    Agent -->|"A2UI Declarative JSON Stream"| Controller["SurfaceController /<br>GenUI Orchestrator"]
    Catalog["App WidgetCatalog<br>(HotelCard, DatePicker, Slider)"] --> Controller
    Controller -->|"Native Widget Tree"| Screen["Dynamic Interactive Screen<br>(Rendered in Flutter)"]
    Screen -->|"User Action (Button Tap)"| Agent

1. The A2UI Protocol Layer (a2ui.org)

  • Agents generate structured UI specifications (e.g., component type, layout arrangement, styling tokens, and bound parameters) instead of plain text.
  • Security-by-design: Agents cannot execute arbitrary JavaScript or unapproved bytecode; they can only reference components pre-registered in the client's WidgetCatalog.

2. WidgetCatalog & Component Registration

  • The developer defines a catalog of allowed Flutter widgets.
  • Each widget specifies its unique ID, JSON parameter schema, and a builder callback.

3. SurfaceController & Bi-Directional Action Loop

  • SurfaceController parses the agent's incoming stream and incrementally mounts widgets on the screen.
  • When an attendee clicks a generated button or submits a form, an action event payload is dispatched back to the agent as a tool response or follow-up prompt.

Read the full file on GitHub · 161 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 161 lines · 61 tokens per session scan A 10c68f2b1497

Subscribe to this mod's changes

a2ui-workshop-builder is a skill published in the GitHub repository JAICHANGPARK/workshop-harness (5 stars, last pushed 4d ago), licensed MIT. It adds 61 tokens to every session and 1,595 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

hr-onboarding

A new-hire onboarding plan as a single page — first week schedule, buddy + manager intro, learning track, equipment checklist, and "you're set when…" outcomes. Use when the brief mentions "onboarding", "new hire", "first week plan", or "入职".

nexu-io/open-design · 62 tokens

book-mirror

Take any book (EPUB/PDF), produce a personalized chapter-by-chapter analysis. Each chapter is preserved in detail (The Chapter) and mirrored back to the reader's actual life (The Mirror) using brain context. The mirror observes and resonates — a friend pointing out parallels, NOT a consultant rearranging the reader's…

garrytan/gbrain · 138 tokens

miniapp

Build a tiny interactive HTML playground only when someone asks to see, play with, or step through a mechanism.

yc-software/qm · 25 tokens

eli5

Explain research, papers, or technical ideas in plain English with minimal jargon, concrete analogies, and clear takeaways. Use when the user says "ELI5 this", asks for a simple explanation of a paper or research result, wants jargon removed, or asks what something technically dense actually means.

companion-inc/feynman · 63 tokens

deck-course-module

暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页.

nexu-io/html-anything · 25 tokens

best-practices

Searchable knowledge base of 152+ programming best practices across 30+ languages and frameworks. BM25-powered search over curated resources from industry leaders (Google, Airbnb, Uber, Mozilla, Shopify, OWASP).

dereknguyen269/programing-best-practices · 0 tokens