# JSON UI (agent skill)

> JSON UI is an agent skill (a SKILL.md file) from actionbook/actionbook. CRITICAL: Use for json-ui component rendering and development. It works with Claude Code and has 1,609 GitHub stars across a repository of 2 listed skills. Install it by copying the skill folder into your agent's skills directory.

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 渲染, 组件目录, 报告渲染, 多语言, 中英文切换 You are an expert at the json-ui package — a JSON-to-HTML report renderer with React…

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/actionbook/actionbook |
| Skill path | playground/json-ui-skill/SKILL.md |
| Skill name | json-ui |
| GitHub stars | 1,609 |
| Installs on skills.sh | not listed |
| License | Apache-2.0 |
| Skills in repo | 2 |
| Plugin marketplace | actionbook-marketplace |
| Official | no |
| Works with | Claude Code |
| Category | Design & frontend |
| Last commit | Sep 8, 2026 |

## When it triggers

- 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.
- "how to add a component"
- "how to render JSON"

## Add this skill

### Claude Code

```sh
/plugin marketplace add actionbook/actionbook
/plugin install actionbook@actionbook-marketplace
```

In the Claude apps, zip the skill folder and upload it under Customize > Skills > + > Upload a skill (code execution must be on).

### ChatGPT / Codex

```sh
git clone --depth 1 https://github.com/actionbook/actionbook.git
cp -r actionbook/playground/json-ui-skill .agents/skills/json-ui   # repo; ~/.agents/skills for all projects
```

### Cursor

```sh
git clone --depth 1 https://github.com/actionbook/actionbook.git
cp -r actionbook/playground/json-ui-skill .cursor/skills/json-ui   # project; ~/.cursor/skills for all projects
```

Sources (checked 2026-10-07): https://code.claude.com/docs/en/skills, https://support.claude.com/en/articles/12512180-using-skills-in-claude, https://learn.chatgpt.com/docs/build-skills, https://cursor.com/docs/context/skills

---

Canonical page: https://appsgit.com/skills/actionbook-json-ui
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed nightly.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.