@QingQ77: HTML skills for coding agents, specially designed to generate clean architecture diagrams, plan pages, and visual documentation. https://github.com/plannotator/effective-html… effective-html is a set of HTML skills for agents, specialized…
Summary
effective-html is a set of HTML skills for coding agents to generate self-contained, visually appealing HTML deliverables like architecture diagrams, plan pages, and visual documentation.
View Cached Full Text
Cached at: 06/12/26, 02:51 AM
HTML skills for coding agents, specifically for generating clean architecture diagrams, plan pages, and visual documentation. https://t.co/rrYGQlWbYJ effective-html is a set of HTML skills for agents, designed to produce self-contained, visually appealing HTML deliverables. It includes three sub-skills: html for general pages, html-diagram for full-screen architecture and system diagrams (SVG-first), and html-plan for plan pages. https://t.co/wBwCd0gJK9 — # plannotator/effective-html Source: https://github.com/plannotator/effective-html ## HTML skills for pragmatic visual artifacts https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 Note: The diagram in the video was made by Fable 5, I will create more fable 5 artifacts and add them to the skill reference folder for smaller models to distill. Focused skills for generating self-contained HTML deliverables with a strong visual bias: - html: an HTML file for whatever you’re describing, in the effective HTML style - html-diagram: architecture, stack, and systems understanding rendered as full-screen HTML diagrams with high-quality SVG - html-plan: HTML plan pages in the effective HTML style ## Install bash npx skills add plannotator/effective-html List available skills first: bash npx skills add plannotator/effective-html --list Install a specific skill: bash npx skills add plannotator/effective-html --skill html-diagram npx skills add plannotator/effective-html --skill html-plan ## Skills - html - Create an HTML file for whatever the user is describing, matching the effective HTML references. - html-diagram - Build full-screen HTML architecture and stack diagrams with SVG-first presentation and minimal prose. - html-plan - HTML plan pages in the effective HTML style. ## Repository Shape Skills live under skills//SKILL.md. Each skill also bundles a copy of the html-effectiveness example corpus under references/html-effectiveness/ so the examples stay local to the skill. Credit: this repo bundles and uses the html-effectiveness examples by Thariq Shihipar: https://thariqs.github.io/html-effectiveness
Similar Articles
@NFTCPS: Always shouting for AI to write code for you, only to get architecture diagrams messier than doodles? Now there's a remedy. effective-html, an HTML skill set designed specifically for coding agents, with a single focus: making AI produce self-contained, visually appealing HTML deliverables. Broken down into three parts: …
effective-html is a set of HTML skills specifically for coding agents, designed to enable AI to produce self-contained, good-looking HTML deliverables, including general pages, full-screen architecture diagrams, and planning pages.
@tuturetom: Now open-sourcing html-anything 1:1 to let youexperience the HTML effect mentioned by the wildly popular Claude code author! Your Agent can now turn any data into world-class design quality HTML. Took 3 days, 15,000 lines of code! Supports 75 Skills...
Open-sourcing html-anything, a tool that converts arbitrary data into high-quality HTML, supporting 75 Skills and 9 export formats, compatible with popular code agents like Claude code, Codex, etc.
@alin_zone: Found a Skill specifically for AI Agents to draw technical architecture diagrams: Archify. No need to learn Mermaid, no manual dragging of boxes or lines. Just tell Claude Code / Codex in plain English: "Read these repos and draw an architecture comparison diagram for me." It will generate…
Archify is an open-source skill for AI agents like Claude Code and Codex CLI that generates interactive, self-contained HTML architecture diagrams from plain-English descriptions, supporting multiple diagram types and export formats.
@geekbb: AI-generated technical docs are often thousands of lines long, scrolling in the terminal — nobody wants to read them. md2html lets AI automatically convert those Markdown docs into HTML pages with sidebar table of contents, diagrams, timelines, cards, and callouts, all in a single file to share with the team. https://github.c…
md2html is a tool that converts AI-generated Markdown documents into polished, self-contained HTML pages with sidebar table of contents, diagrams, timelines, and callouts, making them easier to read and share.
@mylifcc: Anthropic employee Thariq has released an internally popular skill called ELI5. This skill allows codeagent to explain anything in a super easy-to-understand way, as if speaking to someone completely unfamiliar with the field, and it generates a beautiful HTML visualization...
Anthropic employee Thariq shared the internally widely used ELI5 skill, which enables codeagent to explain any content in an easy-to-understand manner and generate HTML visualization pages.