Skip to content
appsgit

JSON UI

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.

github.com/actionbook/actionbook/playground/json-ui-skill (opens in a new tab)

View on GitHub (opens in a new tab)

Add this skill

Claude

This repository is a Claude Code plugin marketplace. In Claude Code:

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

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

ChatGPT / Codex

Codex reads skills from .agents/skills/ in a repo or ~/.agents/skills/ for every project:

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

Standalone skills also load in the ChatGPT desktop app.

Cursor

Cursor loads skills from .cursor/skills/ (or ~/.cursor/skills/) and also reads .claude/skills/:

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

Source (checked Oct 7, 2026): code.claude.com/docs/en/skills (opens in a new tab), code.claude.com/docs/en/plugin-marketplaces (opens in a new tab), support.claude.com/en/articles/12512180-using-skills-in-claude (opens in a new tab), learn.chatgpt.com/docs/build-skills (opens in a new tab), cursor.com/docs/context/skills (opens in a new tab)

What this skill does

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…

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"

More skills in actionbook/actionbook

2 skills are listed from this repository.

Similar skills

More design & frontend skills

All Design & frontend

FAQ

JSON UI FAQ

Still curious? Email info@appsgit.com.

What is the JSON UI 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. Its SKILL.md lives at github.com/actionbook/actionbook/playground/json-ui-skill.

How do I install the JSON UI skill?

In Claude Code, run /plugin marketplace add actionbook/actionbook and then /plugin install actionbook@actionbook-marketplace. For Codex or Cursor, copy the json-ui folder into .agents/skills/ or .cursor/skills/.

Is the JSON UI skill free?

Yes. The repository is open source under the Apache-2.0 license.

Is JSON UI maintained?

The repository's most recent commit was on Sep 8, 2026. Its latest release is actionbook-extension-v1.1.12. appsgit only lists skills from repositories with a commit in the last six months.