Agent Skills › plannotator/effective-html › html-plan

html-plan

GitHub

生成自包含的HTML计划页面，风格简洁实用。支持暗色模式、主题切换及本地存储持久化。适用于用户希望基于提供内容创建或优化语法整洁的计划页时。

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

Trigger Scenarios

用户要求以有效HTML风格创建计划页面用户希望对已有内容进行语法清理而不大幅扩展

Install

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

More Options

Use without installing

npx skills use plannotator/effective-html@html-plan

指定 Agent (Claude Code)

npx skills add plannotator/effective-html --skill html-plan -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-plan",
    "description": "Create a self-contained HTML plan that is pragmatic, simple, and visually organized. Use when the user wants a plan page in the effective HTML style, wants the writing kept close to what they gave you, or wants the grammar cleaned up without turning it into a whole bigger thing.",
    "disable-model-invocation": true
}

HTML Plan

Review the files throughout references/html-effectiveness/.

After reviewing them, create an HTML file for the plan in a similar style.

Keep it pragmatic and simple.

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).