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