plannotator/effective-html

1,3 тыс. stars Качество 76 Тренд 76

Agent skills for useful HTML artifacts, wireframes, interactive prototypes, plans, and diagrams.

Обзор

https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0 _** The diagram was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill._ example demo 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 Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator This repo is also a plugin marketplace. Add it and install: Create instant share links for your HTML files (optional): https://github.com/plannotator/tot HTML from video: https://tot.

README

HTML skills for pragmatic visual artifacts

https://github.com/user-attachments/assets/24306977-7f30-44c9-9bff-55f901d557b0

Note: The diagram was made by Fable 5, I will create more fable 5 artifacts and add them to the skill folder for smaller models to distill. example demo

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

Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator

Install

npx skills add plannotator/effective-html

List available skills first:

npx skills add plannotator/effective-html --list

Install a specific skill:

npx skills add plannotator/effective-html --skill html-diagram
npx skills add plannotator/effective-html --skill html-plan

As a Claude Code plugin

This repo is also a plugin marketplace. Add it and install:

/plugin marketplace add plannotator/effective-html
/plugin install plannotator-effective-html@effective-html

As a Codex plugin

codex plugin marketplace add plannotator/effective-html
codex plugin add plannotator-effective-html@effective-html

Create instant share links for your HTML files (optional): https://github.com/plannotator/tot HTML from video: https://tot.page/0CW7xV96XMxnalrzwRl4eQ

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

View this README on GitHub

Установка

npx skillfish add plannotator/effective-html