Agent Skills › plannotator/effective-html › html

html

GitHub

根据用户需求生成自包含的HTML文件，适用于报告、原型等场景。遵循参考目录规范，确保风格一致。强制实现暗色模式，包括CSS变量、主题切换按钮、localStorage持久化及防闪烁脚本。

skills/html/SKILL.md plannotator/effective-html

Trigger Scenarios

用户请求创建独立的HTML文件或网页原型需要生成带有暗色模式支持的HTML内容

Install

npx skills add plannotator/effective-html --skill html -g -y

More Options

Use without installing

npx skills use plannotator/effective-html@html

指定 Agent (Claude Code)

npx skills add plannotator/effective-html --skill html -a claude-code -g -y

安装 repo 全部 skill

npx skills add plannotator/effective-html --all -g -y

预览 repo 内 skill

npx skills add plannotator/effective-html --list

SKILL.md

Frontmatter

{
    "name": "html",
    "description": "Create a self-contained HTML file for whatever the user is describing, in the effective HTML style. Use when the user wants an HTML artifact that isn't specifically a diagram or a plan — a report, explainer, comparison, deck, prototype, or anything else best delivered as one HTML file.",
    "disable-model-invocation": true
}

HTML

Review the files throughout references/html-effectiveness/.

Create an HTML file for whatever the user is describing. Use the references as best you can to match alignment — style, density, and tone.

Always include dark mode: hand-rolled CSS variables on :root / html.dark, a small theme toggle button, localStorage persistence, and an apply-before-paint script in <head> (default to prefers-color-scheme).