plannotator/effective-html

Registry 信息

项目简介

一个Claude Skill，能够根据自然语言提示直接生成优雅简洁的HTML方案、架构图及其他可视化内容。

要点

• 从纯文本提示生成清晰易读的HTML
• 支持架构图和可视化方案
• 轻量级，易于集成到工作流中
• 专为基于Agent的自动化设计

使用场景

• 快速起草网页布局
• 创建系统架构图
• 生成可视化项目计划
• 原型UI组件

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](https://x.com/backnotprop/status/2065479594023829619?s=20) 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 <p align="center"> <a href="https://github.com/backnotprop/plannotator"> <img src="./star-plannotator.svg" width="340" alt="like this? star Plannotator"> </a> </p> <p align="center"> Render and annotate your HTML with Plannotator (optional): https://github.com/backnotprop/plannotator </p> --- ## 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-name>/SKILL.md`. Each skill also bundles a copy of the `html-effectiveness` example corpus under `refere

话题