skills.rest
Jin9
Jin9COMMUNITY
Explore all skills by this author →
GitHub

rendering-contract-debug-viewer

Render pipeline JSON contract artifacts into self-contained offline HTML debug viewers.

Updated Apr 26, 2026
Search Tags:#debugging#offline#json#contract#render#html viewer#dashboard theme
One-click install
npx skills add https://github.com/Jin9/skillify-foundation --skill rendering-contract-debug-viewer-jin9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rendering-contract-debug-viewer
Source: https://github.com/Jin9/skillify-foundation/tree/main/treasury/rendering-contract-debug-viewer
Command: npx skills add https://github.com/Jin9/skillify-foundation --skill rendering-contract-debug-viewer-jin9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Dense, deeply-nested pipeline JSON contracts (discovery outputs, plan-review verdicts, INDEX files) are hard to read as raw text, making debugging and inspection slow and error-prone. ## Core Features & Use Cases - Offline HTML rendering: Converts one JSON contract into a single self-contained HTML file with inline CSS/JS, no external resources, and light/dark dashboard themes. - Contract-aware highlighting: Color-codes semantic fields like verdict, severity, priority, tier, status, and audit_id, while degrading to a generic collapsible tree for any JSON. - Deterministic output: Same input produces byte-identical HTML, with fail-closed validation against external references and escaped data values. - Use Case: After a plan-review stage produces plan-review.json with a BLOCK verdict, render it into a viewer where the verdict shows as a red badge and each finding's severity appears as a colored dot, then open it in a browser for inspection. ## Quick Start Render the file plan-review.json into an offline debug viewer and open it in my browser.

Frequently Asked Questions about rendering-contract-debug-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a JSON file into a readable HTML viewer?▼

Run python3 scripts/render_contract_viewer.py INPUT.json, which writes INPUT.viewer.html next to the input. Use -o to set a custom output path and --theme to force light or dark mode.

How to visualize nested JSON contracts for debugging?▼

The viewer renders any JSON as a collapsible tree with deep nesting collapsed by default, plus expand/collapse-all controls and a pretty-printed View source panel. Known contract fields like verdict, severity, and tier are color-coded automatically.

Does the HTML viewer require an internet connection?▼

No, the output is fully self-contained and offline. CSS and JS are inline, fonts use the system stack, and the script fails with exit code 3 if the authored shell contains http, src=, or @import references.

What Python dependencies does the JSON viewer script need?▼

Only the Python 3 standard library is required. The script uses argparse, json, os, and sys, with no third-party packages to install.

When should I not use this JSON contract viewer?▼

Do not use it to edit dashboard data bundles, author pipeline stage skills, or generate the JSON contract itself. It only renders existing JSON files read-only and never modifies the input.

Related Skills

Explore More Software Engineering Skills→
anderson-joyleanderson-joyle
2

Executor

Execute runtime commands from typed JSON artifacts and write auditable result files.

Community
Intermediate
alo-expalo-exp
6

gsd-review-fix

Apply atomic fixes with DCO sign-off and verify via tests and re-review.

Official
Advanced
pmalirzpmalirz
1

aig-validate

Validate silver-layer tracker documents against templates and schemas.

Community
Advanced
penpotpenpot
58.3k

bat-cat

View code files in the terminal with syntax highlighting, line numbers, and Git integration.

Official
Intermediate