tool-renderer

Render Claude Code tool interactions as HTML and Markdown.

1.2k|95|Updated Jun 14, 2025

Search Tags:#HTML #Claude Code #Markdown #transcripts #render #tool rendering

Ready to run

npx skills add https://github.com/daaain/claude-code-log --skill tool-renderer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tool-renderer
Source: https://github.com/daaain/claude-code-log/tree/main/.claude/skills/tool-renderer
Command: npx skills add https://github.com/daaain/claude-code-log --skill tool-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides structured rendering support for Claude Code tools within the transcript viewer, enabling consistent, readable outputs across tool types and sessions.

Core Features & Use Cases

Input/Output Modeling: Define dedicated data models and parsers for new tools (e.g., WebSearch, WebFetch) to ensure consistent rendering.
Structured Rendering Pipeline: Integrate models, factories, HTML formatters, Markdown renderers, and a renderer bridge to unify outputs.
Testable & Extensible: Include tests to guard against regressions and enable easy addition of new tools with minimal boilerplate.

Quick Start

Add a new Claude Code tool by implementing its input/output models, a structured parser that uses toolUseResult when available, corresponding HTML/Markdown formatters, and tests, then run the rendering suite.

Frequently Asked Questions about tool-renderer

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

FAQPage Schema

How do I render Claude Code tool outputs consistently in transcripts?▼

Tool rendering creates a unified presentation framework for Claude Code tool interactions in transcripts. This Skill provides modular formatters for HTML and Markdown that parse structured tool results and display them cleanly across different tool types, ensuring consistent readability and output formatting throughout your transcript sessions.

What's the best way to add a new tool to the rendering pipeline?▼

Adding a new tool requires defining input and output data models, implementing a structured parser that extracts toolUseResult data, creating HTML and Markdown formatters for that tool, and writing tests to verify rendering behavior. The pluggable renderer architecture lets you integrate the new tool without modifying existing formatters or breaking current functionality.

Can I customize how specific tools display in HTML and Markdown?▼

Yes. The rendering framework separates input/output modeling, parsing logic, and format-specific rendering. You define dedicated formatters for each tool type targeting HTML or Markdown independently, allowing tool-specific display customization while maintaining a consistent pipeline across all tools in your transcript viewer.

Why use structured rendering instead of raw tool output in transcripts?▼

Structured rendering transforms raw tool responses into readable, consistent outputs tailored to each format. It provides a testable pipeline that guards against regressions, simplifies adding new tools, and ensures transcripts remain clean and interpretable regardless of tool complexity or output variability.

Do I need to write tests for new tool renderers?▼

Tests are included as part of the extensible framework and are strongly recommended. They prevent regressions when updating formatters, verify that HTML and Markdown output render correctly for each tool, and document expected behavior, making maintenance and future tool additions safer and more confident.