a2ui_developer

Name: a2ui_developer
Author: VeerMuchandi

15stars1forks

How to install a2ui_developer?

veermuchandi/rad-skills/a2ui_developer

$npx -y skills add VeerMuchandi/rad-skills --skill a2ui_developer

Installs into the current project.

Summary

Expert guide and patterns for building Agent-Driven User Interfaces (A2UI) using the ADK.

Files · 1

View on GitHub

SKILL.md

1	# A2UI Developer Skill
2
3	This skill equips you with the knowledge and best practices to design, implement, and debug A2UI-compliant agents and clients.
4
5	## 0. Skill Initialization
6	CRITICAL: This skill relies on local reference documentation that must be kept in sync with the official repository.
7
8	When starting a new session or tasks involving A2UI:
9	1. Ask Permission: "Shall I check for updates to the A2UI references from the official global cache?"
10	2. Execute Update: If the user agrees, run:
11	```bash
12	python3 scripts/update_skill.py
13	```
14	3. Confirm: Report the update status before proceeding.
15
16	## 1. Core Architecture
17
18	A2UI decouples UI generation (Agent) from UI rendering (Client).
19	* Producers: AI Agents generate abstract UI descriptions (A2UI JSON) alongside natural language.
20	* Protocol: Messages are streamed via the A2A (Agent-to-Agent) protocol or standard HTTP/SSE.
21	* Consumers: Clients (Web, Mobile) interpret the JSON and render native components.
22
23	### Data Flow
24	1. User Input -> Agent
25	2. Agent Logic -> Generates Text + A2UI JSON (separated by `---a2ui_JSON---`)
26	3. Server -> Parses stream, translates UI events, and forwards JSON to Client.
27	4. Client -> Renders `surfaceUpdate` and `dataModelUpdate`.
28
29	## 2. A2UI Protocol & Schema
30
31	### A. `surfaceUpdate` (Structure)
32	Defines the component hierarchy using a flat Adjacency List.
33	* `surfaceId`: Target surface (e.g., "main").
34	* `components`: Array of component definitions.
35
36	```json
37	{
38	"surfaceUpdate": {
39	"surfaceId": "main",
40	"components": [
41	{
42	"id": "root_col",
43	"component": {
44	"Column": {
45	"children": { "explicitList": ["header_1", "card_1"] }
46	}
47	}
48	}
49	]
50	}
51	}
52	```
53
54	### B. `dataModelUpdate` (Data)
55	Populates data for components.
56	```json
57	{
58	"dataModelUpdate": {
59	"surfaceId": "main",
60	"contents": [
61	{ "key": "user_name", "valueString": "Alice" }
62	]
63	}
64	}
65	```
66
67	### C. `beginRendering` (Signal)
68	Tells the client to start drawing a specific root component on a surface.
69	```json
70	{
71	"beginRendering": {
72	"surfaceId": "main",
73	"root": "root_col"
74	}
75	}
76	```
77
78	## 3. Developing A2UI Agents
79
80	### Mandatory Workflow & Isolation Rules
81	1. Separate Folder: Always create a separate folder for the A2UI implementation (e.g., `[agent_name]_a2ui`). NEVER modify the original reference agent code in place.
82	2. Test Locally First: You MUST generate the code and test it locally using the `A2UI Local Tester` skill before attempting any deployment.
83	3. Deploy Only on Request: Do NOT deploy to Agent Engine or Gemini Enterprise unless the user explicitly asks you to do so, and only after the agent works locally and the user is happy with it.
84	4. Complete Working Examples: When asked to generate an A2UI agent or a working example, you MUST generate the complete set of files required for it to function, including `agent.py`, `a2ui_examples.py`, `a2ui_schema.py`, and `a2ui_tools.py` (if using the tool-based pattern). Do not omit these supporting files unless the user explicitly says they are not needed.
85
86	### Choosing your Deployment Target (Cloud Run vs Vertex AI Agent Engine)
87	CRITICAL IF UNKNOWN: Before writing any integration code, you must ask the user:
88	> "Are you deploying this A2UI agent to Cloud Run (Raw HTTP/A2A Mode) or natively to Vertex AI Agent Engine (Native Tools Mode)?"
89
90	The implementation architecture differs significantly between the two (see Section 4).
91
92	### Pre-requisites
93	An A2UI agent MUST inherently be an A2A (Agent-to-Agent) agent first. The A2A protocol serves as the base data transfer and transport layer for A2UI structured payloads. Therefore, before adding A2UI generation or parsing, you must ensure the agent successfully implements the A2A specification.
94
95	### System Prompting
96	Agents must be explicitly instructed to generate A2UI JSON.
97
98	Critical Rules:
99	1. Delimiter: Use `---a2ui_JSON---` to separate text from JSON.
100	2. No Markdown: Do NOT use \`\`\`json blocks for the A2UI payload.
101	3. Copy Exactly: When using tools to generate UI strings, you MUST output the exact string returned by the tool, starting from `---a2ui_JSON---`.
102	4. No Modification: Do NOT summarize, truncate, or alter the JSON string in any way. Copy it character-for-character.
103	5. One Block: Only one JSON payload per turn, at the end.
104
105	Sample Instruction:
106	> You are an agent that generates UIs. You MUST separate your conversational response from your A2UI JSON output using the delimiter `---a2ui_JSON---`. The JSON must appear EXACTLY once at the end. When calling a tool that returns UI JSON, you MUST copy the returned string exactly without modification or adding markdown code blocks.
107	> Echo Constraint: *"When a tool returns a string starting w

People who liked this also viewed

6 picks

Type

hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026262k37k
request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026165k181k
analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026161k507
explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026161k507
ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026160k181k
scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026149k181k

a2ui_developer

15stars1forks

View on GitHub

How to install a2ui_developer?

veermuchandi/rad-skills/a2ui_developer

$npx -y skills add VeerMuchandi/rad-skills --skill a2ui_developer

Installs into the current project.

Summary

Expert guide and patterns for building Agent-Driven User Interfaces (A2UI) using the ADK.

Files · 1

View on GitHub

SKILL.md

1	# A2UI Developer Skill
2
3	This skill equips you with the knowledge and best practices to design, implement, and debug A2UI-compliant agents and clients.
4
5	## 0. Skill Initialization
6	CRITICAL: This skill relies on local reference documentation that must be kept in sync with the official repository.
7
8	When starting a new session or tasks involving A2UI:
9	1. Ask Permission: "Shall I check for updates to the A2UI references from the official global cache?"
10	2. Execute Update: If the user agrees, run:
11	```bash
12	python3 scripts/update_skill.py
13	```
14	3. Confirm: Report the update status before proceeding.
15
16	## 1. Core Architecture
17
18	A2UI decouples UI generation (Agent) from UI rendering (Client).
19	* Producers: AI Agents generate abstract UI descriptions (A2UI JSON) alongside natural language.
20	* Protocol: Messages are streamed via the A2A (Agent-to-Agent) protocol or standard HTTP/SSE.
21	* Consumers: Clients (Web, Mobile) interpret the JSON and render native components.
22
23	### Data Flow
24	1. User Input -> Agent
25	2. Agent Logic -> Generates Text + A2UI JSON (separated by `---a2ui_JSON---`)
26	3. Server -> Parses stream, translates UI events, and forwards JSON to Client.
27	4. Client -> Renders `surfaceUpdate` and `dataModelUpdate`.
28
29	## 2. A2UI Protocol & Schema
30
31	### A. `surfaceUpdate` (Structure)
32	Defines the component hierarchy using a flat Adjacency List.
33	* `surfaceId`: Target surface (e.g., "main").
34	* `components`: Array of component definitions.
35
36	```json
37	{
38	"surfaceUpdate": {
39	"surfaceId": "main",
40	"components": [
41	{
42	"id": "root_col",
43	"component": {
44	"Column": {
45	"children": { "explicitList": ["header_1", "card_1"] }
46	}
47	}
48	}
49	]
50	}
51	}
52	```
53
54	### B. `dataModelUpdate` (Data)
55	Populates data for components.
56	```json
57	{
58	"dataModelUpdate": {
59	"surfaceId": "main",
60	"contents": [
61	{ "key": "user_name", "valueString": "Alice" }
62	]
63	}
64	}
65	```
66
67	### C. `beginRendering` (Signal)
68	Tells the client to start drawing a specific root component on a surface.
69	```json
70	{
71	"beginRendering": {
72	"surfaceId": "main",
73	"root": "root_col"
74	}
75	}
76	```
77
78	## 3. Developing A2UI Agents
79
80	### Mandatory Workflow & Isolation Rules
81	1. Separate Folder: Always create a separate folder for the A2UI implementation (e.g., `[agent_name]_a2ui`). NEVER modify the original reference agent code in place.
82	2. Test Locally First: You MUST generate the code and test it locally using the `A2UI Local Tester` skill before attempting any deployment.
83	3. Deploy Only on Request: Do NOT deploy to Agent Engine or Gemini Enterprise unless the user explicitly asks you to do so, and only after the agent works locally and the user is happy with it.
84	4. Complete Working Examples: When asked to generate an A2UI agent or a working example, you MUST generate the complete set of files required for it to function, including `agent.py`, `a2ui_examples.py`, `a2ui_schema.py`, and `a2ui_tools.py` (if using the tool-based pattern). Do not omit these supporting files unless the user explicitly says they are not needed.
85
86	### Choosing your Deployment Target (Cloud Run vs Vertex AI Agent Engine)
87	CRITICAL IF UNKNOWN: Before writing any integration code, you must ask the user:
88	> "Are you deploying this A2UI agent to Cloud Run (Raw HTTP/A2A Mode) or natively to Vertex AI Agent Engine (Native Tools Mode)?"
89
90	The implementation architecture differs significantly between the two (see Section 4).
91
92	### Pre-requisites
93	An A2UI agent MUST inherently be an A2A (Agent-to-Agent) agent first. The A2A protocol serves as the base data transfer and transport layer for A2UI structured payloads. Therefore, before adding A2UI generation or parsing, you must ensure the agent successfully implements the A2A specification.
94
95	### System Prompting
96	Agents must be explicitly instructed to generate A2UI JSON.
97
98	Critical Rules:
99	1. Delimiter: Use `---a2ui_JSON---` to separate text from JSON.
100	2. No Markdown: Do NOT use \`\`\`json blocks for the A2UI payload.
101	3. Copy Exactly: When using tools to generate UI strings, you MUST output the exact string returned by the tool, starting from `---a2ui_JSON---`.
102	4. No Modification: Do NOT summarize, truncate, or alter the JSON string in any way. Copy it character-for-character.
103	5. One Block: Only one JSON payload per turn, at the end.
104
105	Sample Instruction:
106	> You are an agent that generates UIs. You MUST separate your conversational response from your A2UI JSON output using the delimiter `---a2ui_JSON---`. The JSON must appear EXACTLY once at the end. When calling a tool that returns UI JSON, you MUST copy the returned string exactly without modification or adding markdown code blocks.
107	> Echo Constraint: *"When a tool returns a string starting w

People who liked this also viewed

6 picks

Type