skills.rest
GQAdonis
GQAdonisCOMMUNITY
Explore all skills by this author →
Website𝕏@gqadonisctoGitHub

refine-mcp-ui

Validate and scaffold MCP-UI resources carrying A2UI surfaces over MCP transports.

Updated Feb 16, 2026
Search Tags:#react#validation#schema#vite#mcp server#a2ui#mcp-ui
One-click install
npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill refine-mcp-ui-gqadonis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refine-mcp-ui
Source: https://github.com/GQAdonis/artifact-refiner-skill/tree/main/skills/refine-mcp-ui
Command: npx skills add https://github.com/GQAdonis/artifact-refiner-skill --skill refine-mcp-ui-gqadonis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Teams serving UI through MCP tool results need their ui:// resources to carry valid A2UI payloads so that MCP, HTTP, A2A, and AG-UI endpoints render identical surfaces across transports, and manual validation of these envelopes is error-prone. ## Core Features & Use Cases - Resource Validation: Normalize and validate MCP-UI resources against the A2UI schema with a precedence-ordered violation list covering URI scheme, MIME type, content shape, and payload errors. - Host Scaffolding: Generate a React/Vite host with a resource store, hook, surface, sandbox proxy, bundled A2UI guest, trust-boundary tests, and a dev-only MCP mock. - Use Case: An MCP server developer returns a ui:// resource from a tool call, runs the normalize script to catch an invalid A2UI payload, then scaffolds a Vite host to preview the surface in a browser. ## Quick Start Validate my MCP-UI resource file and scaffold a React Vite host to preview its A2UI surface.

Frequently Asked Questions about refine-mcp-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate an MCP-UI resource against the A2UI schema?▼

Run node scripts/normalize-mcp-ui.mjs with the --input flag pointing at your resource JSON file. The script reports violations in precedence order, from uri_scheme and unsupported_mime through invalid_a2ui_payload and schema_violation.

How do I scaffold a React host for MCP-UI resources?▼

Run bash scripts/scaffold-react-vite-mcp-ui.sh with --target pointing at an existing Vite project. It emits a resource store, hook, surface, sandbox proxy, bundled A2UI guest, trust-boundary tests, and a dev-only MCP mock.

What is the difference between MCP-UI and A2UI?▼

MCP-UI is an envelope for A2UI, not an alternative. A ui:// resource carries an a2ui array validated against the same schema the AG-UI web host uses, so clients see identical UI across MCP, HTTP, A2A, and AG-UI transports.

Why does my MCP-UI resource fail validation with missing_a2ui_payload?▼

The resource content does not include an a2ui array in the expected shape. Check that your ui:// resource embeds the A2UI payload and that its MIME type and content structure match the schema in references/schemas/mcp-ui-resource.schema.json.

Can MCP-UI surfaces render in Flutter or AG-UI hosts?▼

Yes. Because the ui:// resource carries a standard A2UI payload, the same surface renders identically on AG-UI web hosts and Flutter hosts, giving cross-transport UI parity without per-client adaptation.

Related Skills

Explore More Software Engineering Skills→
aussierobotsaussierobots
2

error-handling-patterns

Implement McpResult-based error handling patterns for Rust MCP server handlers.

Official
Advanced
aussiegingersnapaussiegingersnap
9

mcp-apps

Scaffold and deploy MCP Apps with bundled UI resources and server endpoints.

Community
Advanced
spencerpaulyspencerpauly
672

visual-qa-testing

Verify web application UI behavior and visual output in Cursor's built-in browser.

Community
Intermediate
microsoftmicrosoft
34

agent-framework-agui-py

Implement the AG-UI protocol in Python with hybrid tool execution and shared state.

Official
Advanced