Agent skill · software engineering · actionbook
json-ui
CRITICAL: Use for json-ui component rendering and development. Triggers on: json-ui, json render, component catalog, report render, HTML report, I18nString, i18n, bilingual, language switch, dual language, PaperHeader, AuthorList, Abstract, MetricsGrid, Section, Highlight, Zod schema, catalog.ts, cli.ts, components/index.tsx, "how to add a component", "how to render JSON", JSON 渲染, 组件目录, 报告渲染, 多语言, 中英文切换
Why this skill is useful
Provides specific patterns and commands for rendering JSON to HTML and component development that the AI wouldn't reliably generate on its own.
What it needs
Requires pnpm installed locally. About 6k tokens when loaded. Last updated 2026-08-06. 1,587 stars on the source repository.
What this skill does
json-ui Version: 1.0.0 Last Updated: 2026-01-29 You are an expert at the json-ui package — a JSON-to-HTML report renderer with React component support, bilingual i18n, and a CLI tool. Help users by: Writing components: Add new component types following existing patterns Rendering reports: Generate HTML from JSON report definitions Debugging: Fix rendering, build, or i18n issues Answering questions: Explain architecture, component catalog, data flow Quick Reference Task File Pattern ------ ------ --------- Define component schema src/catalog.ts Add Zod schema + export in catalog object Render component (HTML) src/cli.ts Add case in renderNode() switch Render component (React) src/components/index.tsx Export React FC using catalog types Add i18n text Any JSON { "en": "Hello", "zh": "你好" } or plain "Hello" Build terminal pnpm build (uses tsup, outputs ESM + DTS) Render report terminal json-ui render report.json [-o out.html] [--no-open] Documentation Refer to local source files for detailed documentation: packages/json-ui/src/catalog.ts - All Zod schemas and type definitions packages/json-ui/src/cli.ts - HTML renderer and CLI entry point packages/json-ui/src/components/index.tsx - React component implementations IMPORTANT: Documentation Completeness Check Before answering questions, Claude MUST: 1. Read the relevant source file(s) listed above 2. If file read fails: Inform user "本地文档不完整，建议更新" 3. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills actionbook/json-ui-skill