# Json UI

CRITICAL: Use for json-ui component rendering and development.

- Repository: https://github.com/actionbook/actionbook (1623 stars)
- Category: Design
- License: Apache-2.0
- Last updated: 2026-10-19
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add actionbook/actionbook --skill json-ui -g -a claude-code -y`
Codex: `npx skills add actionbook/actionbook --skill json-ui -g -a codex -y`
Cursor: `npx skills add actionbook/actionbook --skill json-ui -g -a cursor -y`
Gemini CLI: `npx skills add actionbook/actionbook --skill json-ui -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add actionbook/actionbook`

## Description

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 渲染, 组件目录, 报告渲染, 多语言, 中英文切换

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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. Still answer based on SKILL.md patterns + built-in knowledge

## Architecture

### JSON Report Format

Reports are trees of nodes:

```json
{
  "type": "Report",
  "props": { "title": "My Report", "theme": "auto" },
  "children": [
    {
      "type": "Section",
      "props": { "title": "Overview", "icon": "bulb" },
      "children": [
        { "type": "Abstract", "props": { "text": "..." } }
      ]
    }
  ]
}
```

The rest: https://github.com/actionbook/actionbook/blob/HEAD/playground/json-ui-skill/SKILL.md