feat: Claude Code skills for catalog design + multi-surface rendering
Author: yonatangrossCreated Apr 2, 2026Updated Jul 31, 2026
Proposal
We've built two complementary Claude Code skills for json-render and would like to contribute them upstream.
Skill 1: json-render-catalog (component catalog patterns)
Guides AI agents through building Zod-typed catalogs:
- Catalog design patterns (constrain AI output to design system)
- shadcn component mapping (29 built-in → custom extensions)
- Token optimization (YAML wire format saves ~30% vs JSON)
- Action definitions with typed params
- Catalog validation and testing patterns
- Multi-framework support (React, Vue, Svelte, React Native)
Skill 2: multi-surface-render (one spec, 6 outputs)
Same JSON spec → multiple output surfaces:
- React — web UI rendering with
<Renderer> - PDF —
renderToPdfBuffer()for reports, invoices - Email —
renderToEmailHtml()+renderToEmailText()via react-email - Image — OG image generation (1200x630) with
@resvg/resvg-js - Terminal — ASCII/Unicode rendering for CLI tools and MCP responses
- YAML — token-efficient wire format for LLM consumption
Includes: registry mapping patterns, renderer selection logic, Edge runtime gotchas (Uint8Array → ArrayBuffer), catalog subsetting per surface.
Tested against
@json-render/* v0.16.0 in production with 41-component catalog, 14 custom HQ components, 6 active output surfaces, 130+ tests.
Format
Two SKILL.md files with references/ and examples/. Happy to PR.
Source: vercel-labs/json-render