Agent skill · software engineering · yonatangross
multi-surface-render
One json-render spec to many targets: React, Next.js, React Native, Ink, PDF, email, Remotion, OG images, 3D. Use when one component spec must render on several platforms.
Why this skill is useful
Adds executable scripts for rendering across multiple platforms from a single JSON spec, which the AI cannot generate on its own.
What it needs
Requires @json-render/core installed locally. About 9k tokens when loaded. Last updated 2026-08-06. 215 stars on the source repository.
What this skill does
Upstream version reference: @json-render/core 0.21.3 (2026-10-24). Multi-Surface Rendering with json-render Define once, render everywhere. A single json-render catalog and spec can produce React web UIs, PDF reports, HTML emails, Remotion demo videos, and OG images — each surface gets its own registry that maps catalog types to platform-native components. Quick Reference Category Rules Impact When to Use ---------- ------- -------- ------------- Target Selection 1 HIGH Choosing which renderer for your use case React Renderer 1 MEDIUM Web apps, SPAs, dashboards PDF & Email Renderer 1 HIGH Reports, documents, notifications Video & Image Renderer 1 MEDIUM Demo videos, OG images, social cards Registry Mapping 1 HIGH Platform-specific component implementations Total: 5 rules across 5 categories How Multi-Surface Rendering Works 1. One catalog — Zod-typed component definitions shared across all surfaces 2. One spec — flat-tree JSON/YAML describing the UI structure 3. Many registries — each surface maps catalog types to its own component implementations 4. Many renderers — each package renders the spec using its registry The catalog is the contract. The spec is the data. The registry is the platform-specific implementation. Quick Start — Same Catalog, Different Renderers Shared Catalog (used by all surfaces) Render to Web (React) Render to PDF Render to Email Render to OG Image (Satori) Render to Video (Remotion) Render to Terminal (Ink, 0.15+) Useful for /ork: CLI dashboards and streaming agent chat interfaces — ships 20+ Ink-native components (Box, Text, Spinner, Table, Markdown, Progress, etc.). Render to Next.js App (0.16+) It does not scaffold a project on disk. createNextApp returns the server-side pieces you re-export from a catch-all route, and the page itself renders through PageRenderer: A spec describes a route tree (pages, layouts, metadata, loading and error states), not just a component tree. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yonatangross/multi-surface-render