Add reusable Claude Code skill: block library + shell for HTML docs#6
Add reusable Claude Code skill: block library + shell for HTML docs#6LiveLikeCounter wants to merge 1 commit into
Conversation
Distills the visual system (palette, typography, panels, timelines, callouts, code grids, collapsibles) from the demo HTML files into a reusable single-file shell + curated block library that Claude Code can use as a skill to generate self-contained HTML documents (plans, reports, write-ups) without external dependencies. Contents: - skill/SKILL.md — Claude Code skill definition - skill/base-shell.html — single-file HTML shell with all CSS - skill/blocks/*.html — 11 composable block fragments - skill/ATTRIBUTION.md — Apache-2.0 attribution
|
I love @ThariqS's HTML artifacts too and I like the skill you built, so I had Fable package it into a zip so anyone can just upload and use on claude.ai Few differences from @LiveLikeCounter's pr:
To install on claude.ai: Settings > Customize > Skills > Add > upload the zip. Then ask for any plan, report, or write-up "thariq style" and you get a single self-contained HTML file in this repo's visual language. Works as-is in Claude Code too: extract into To install on claude code: give it the zip, tell it to set it up. Prob can do it with just the pr or repo link too but why make the poor thing go crazy looking around when you can be nice to it Download: ps. thariq style sounds better than gangnam style |
2 participants
Summary
Distills the visual system from the demo HTML files into a reusable Claude Code skill — a single-file HTML shell + curated block library that Claude can use to generate self-contained HTML documents (plans, reports, write-ups) without external dependencies.
skill/SKILL.md— Claude Code skill definition with workflow, block index, and verification stepsskill/base-shell.html— single-file HTML shell with all CSS baked inskill/blocks/*.html— 11 composable block fragments (timeline, callout, code-grid, table, collapsible, diagram, summary-cards, swatches, sources, event-timeline, toc)skill/ATTRIBUTION.md— Apache-2.0 attribution back to this repoThe skill reads the shell + blocks at generation time and assembles them into a single self-contained HTML file that opens by double-click — no build step, no CDN, no external fonts.