Agent skill · design visual · yonatangross
mcp-visual-output
Upgrades MCP tool JSON results to dashboards via @json-render/mcp (stat grids, tables, badges) in MCP clients. Use when a tool result reads better visually. Not for building the server itself.
Why this skill is useful
Provides specific integration patterns and rendering strategies for interactive dashboards that the AI wouldn't reliably generate on its own.
What it needs
Requires @json-render/mcp installed locally. About 6k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Upstream version reference: @json-render/mcp 0.21.3 (2026-10-24). MCP Visual Output Upgrade plain MCP tool responses to interactive dashboards rendered inside AI conversations. Built on @json-render/mcp, which bridges the json-render spec system with MCP's tool/resource model -- the AI generates a typed JSON spec, and a sandboxed iframe renders it as an interactive UI. Building an MCP server from scratch? Use ork:mcp-patterns for server setup, transport, and security. This skill focuses on the visual output layer after your server is running. Need the full component catalog? See ork:json-render-catalog for all available components, props, and composition patterns. Decision Tree -- Which File to Read Quick Reference Category Rule Impact Key Pattern ---------- ------ -------- ------------- Setup mcp-app-setup.md HIGH createMcpApp() and registerJsonRenderTool() Security sandbox-csp.md HIGH CSP declarations, iframe sandboxing Rendering streaming-output.md MEDIUM Progressive rendering via JSON Patch Patterns dashboard-patterns.md MEDIUM Stat grids, status badges, data tables Total: 4 rules across 3 categories How It Works 1. Define a catalog -- typed component schemas using defineCatalog() + Zod 2. Register with MCP -- createMcpApp() for new servers or registerJsonRenderTool() for existing ones 3. AI generates specs -- the model produces a JSON spec conforming to the catalog 4. Iframe renders it -- a bundled React app inside a sandboxed iframe renders the spec with useJsonRenderApp() + <Renderer /> The AI never writes HTML or CSS. It produces a structured JSON spec that references catalog components by type. The iframe app renders those components using a pre-built registry. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/mcp-visual-output--fc882b