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>
  • PDFrenderToPdfBuffer() for reports, invoices
  • EmailrenderToEmailHtml() + 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.