GitHub - plannotator/effective-html: Agent skill for elegant and simple html plans and architecture diagrams. · GitHub
/" data-turbo-transient="true" />
Skip to content
Search or jump to...
Search code, repositories, users, issues, pull requests...
-->
Search
Clear
Search syntax tips
Provide feedback
--><br>We read every piece of feedback, and take your input very seriously.
Include my email address so I can be contacted
Cancel
Submit feedback
Saved searches
Use saved searches to filter your results more quickly
-->
Name
Query
To see all available qualifiers, see our documentation.
Cancel
Create saved search
Sign in
/;ref_cta:Sign up;ref_loc:header logged out"}"<br>Sign up
Appearance settings
Resetting focus
You signed in with another tab or window. Reload to refresh your session.<br>You signed out in another tab or window. Reload to refresh your session.<br>You switched accounts on another tab or window. Reload to refresh your session.
Dismiss alert
{{ message }}
plannotator
effective-html
Public
Notifications<br>You must be signed in to change notification settings
Fork
Star
main
BranchesTags
Go to file
CodeOpen more actions menu
Folders and files<br>NameNameLast commit message<br>Last commit date<br>Latest commit
History<br>9 Commits<br>9 Commits
.claude-plugin
.claude-plugin
skills
skills
LICENSE
LICENSE
README.md
README.md
skills.sh.json
skills.sh.json
View all files
Repository files navigation
HTML skills for pragmatic visual artifacts
svg_small.mp4
Two focused skills for generating self-contained HTML deliverables with a strong visual bias:
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
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<br>npx skills add plannotator/effective-html --skill html-plan
Skills
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: inspired by https://thariqs.github.io/html-effectiveness
About
Agent skill for elegant and simple html plans and architecture diagrams.
plannotator.ai
Topics
skills
agent-skills
Resources
Readme
License
MIT license
Uh oh!
There was an error while loading. Please reload this page.
Activity
Custom properties
Stars
stars
Watchers
watching
Forks
forks
Report repository
Releases
No releases published
Packages
Uh oh!
There was an error while loading. Please reload this page.
Contributors
Uh oh!
There was an error while loading. Please reload this page.
Languages
HTML<br>100.0%
You can’t perform that action at this time.