crafting-html

Generate single-file HTML artifacts for reports, code explainers, prototypes, and slide decks.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/pgoell/pgoell-claude-tools --skill crafting-html-pgoell
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: crafting-html
Source: https://github.com/pgoell/pgoell-claude-tools/tree/main/plugins/workbench/skills/crafting-html
Command: npx skills add https://github.com/pgoell/pgoell-claude-tools --skill crafting-html-pgoell

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Markdown cannot carry the information density needed for share-once expository content like PR walkthroughs, design explorations, or incident reports. This Skill produces standalone, dependency-free HTML documents with styled tables, SVG diagrams, syntax-highlighted code, and interactive elements that share as a single link. ## Core Features & Use Cases - Five artifact categories: specs and planning explorations, code review and understanding documents, design systems and prototypes, reports and research explainers, and custom editing interfaces. - 21 reference templates: A bundled gallery of self-contained HTML examples (10-25 KB each) that the agent reads lazily, one at a time, matching the requested artifact type. - Design system integration: Resolves a named design system from project or user scope and inlines its colors, typography, components, and base64-encoded images into the artifact. - Use Case: After reviewing a pull request, ask for an HTML review summary and receive a single file with a risk map, per-file diffs, inline comment bubbles, and a next-steps checklist. ## Quick Start Create an HTML walkthrough explaining how authentication flows through this codebase, using the code-understanding reference style.

Frequently Asked Questions about crafting-html

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

FAQPage Schema
How do I create a standalone HTML report from a code review?

Request an HTML artifact describing the PR or code area, and the Skill reads the matching reference template (such as the code-review or code-understanding example) before generating a single self-contained file with diffs, risk tags, and comments.

What types of HTML documents can this Skill generate?

It covers five categories: exploration and planning documents, code review and understanding pages, design systems and interactive prototypes, reports and research explainers including slide decks, and custom editing interfaces like triage boards.

When should I use this instead of a frontend design tool?

Use this Skill when the artifact is a communication, a single expository HTML file shared as a link. Use a frontend-design approach when the output is UI or component code that becomes part of a product.

Can the generated HTML use my project's design system?

Yes. The Skill resolves a design-system name from the prompt or .workbench/config.md, locates it at project or user scope, and inlines its colors.css, typography.css, components, and base64-encoded images into the artifact.

Do the HTML artifacts require external libraries or a build step?

No. Every artifact is a single HTML5 file with an inline style block, inline SVG, and no CDN imports or external dependencies, so it opens directly in any browser and shares as one file.

Why does the Skill avoid em dashes in generated HTML body copy?

The Skill prohibits the U+2014 and U+2013 codepoints in body copy as a style constraint, permitting only HTML entity forms like — where a dash is genuinely needed.