Can it handle mathematical formulas and source code?

Absolutely. It includes dedicated components for LaTeX formulas (Formula), syntax-highlighted code (CodeBlock), and algorithmic pseudocode (Algorithm).

Is it compatible with React-based web applications?

Yes, the skill provides a full set of React components alongside its static HTML CLI renderer, making it versatile for both embedded web app usage and standalone file generation.

Does this skill support multiple languages?

Yes, it features a robust i18n system that supports simultaneous English and Chinese rendering with a built-in toggle for the end-user to switch languages.

How do I add a new component to the report generator?

You follow a three-step pattern: define the Zod schema in catalog.ts, add the HTML renderer logic in cli.ts, and implement the React component in components/index.tsx.

What is the primary purpose of the json-ui skill?

It is designed to render structured JSON data into professional, responsive HTML or React reports, specifically optimized for technical, academic, and AI-generated content.

JSON UI Report Generator

Name: JSON UI Report Generator
Author: actionbook

byactionbook

•

1,417

•

Learning & Documentation

Generates high-quality, bilingual HTML and React reports from structured JSON data with specialized support for AI research and technical documentation.

The json-ui skill provides a robust framework for transforming structured JSON data into sophisticated, responsive HTML or React-based reports. It features a rich catalog of over 38 specialized component types, including academic-focused elements like PaperHeaders, LaTeX formulas, and ResultsTables. Designed with a built-in i18n system for seamless English-Chinese switching, it streamlines the creation of professional documentation, AI agent summaries, and technical research reports through a schema-driven architecture that ensures type safety and rendering consistency.

Key Features

01Tri-layer architecture supporting Zod validation, static HTML rendering, and React components.

02Automatic bilingual (EN/ZH) rendering with a built-in language switcher and i18n system.

03Standardized CLI for converting JSON files directly into shareable, self-contained HTML reports.

0438+ specialized components for technical, academic, and AI research reporting.

05Intelligent handling of complex content like LaTeX formulas, syntax-highlighted code, and metrics grids.

061,417 GitHub stars

Use Cases

01Building data-driven technical dashboards and performance metric reports from structured JSON outputs.

02Creating bilingual academic paper summaries with interactive components and mathematical notation.

03Generating automated visual reports and summaries for AI agent browsing actions and findings.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add actionbook/actionbook json-ui-skill

For use in Claude.ai and ChatGPT

Download Skill