用途
effective-html 用于创建或重新设计自包含的单文件 HTML 产物，目标是让主题更清晰、更易用或更易理解。其标准是“一致的用心”，而非“一致的外观”，因此不会复制以往运行中的固定配色、字体栈、卡片系统或布局。
主要能力
该技能首先对请求进行路由，选择最窄的、拥有主要审查问题的技能：
- 当配色、排版、构图、主题或整体视觉基调尚未确定时，读取并组合 design-artifact 与所选工作流。它提供创意方向，但不替代负责保真度、结构或行为的专门技能。
- 当结构、信息层级、导航或任务流程尚未确定时，读取并遵循 html-wireframe。它应保持明显的低保真度，并可比较两到三种布局方向。
- 当用户需要精致模型或可工作的交互流程时，读取并遵循 html-prototype。模型是该技能内的静态保真模式。
- 当产物主要是计划、路线图、实施序列或推广文档，且源承诺必须易于验证时，读取并遵循 html-plan。
- 当关系、序列、拓扑、状态、层级或系统行为是主要内容时，读取并遵循 html-diagram。
- 对于报告、讲解、演示、落地页、数据故事、工具和没有更明确归属的混合产物，继续使用 html。
这些同级链接是集合一起安装时的嵌套机制。如果专门技能不可用，则继续在此处加载最接近的参考，不要求用户先安装另一个技能。
使用方式
设计前先“读空气”：检查用户请求及其提供的任何材料。在仓库中工作时，从 AGENTS.md、CLAUDE.md、设计系统文档、令牌、现有组件和附近产物中寻找其设计语言。
权威顺序为：
- 用户明确的视觉和功能指令。
- 项目既定的设计系统和约定。
- 产物的主题、受众和目的。
- 自身的设计判断。
编码前，在工作笔记中确定五件事：
- 受众与任务：谁将使用它，他们应理解或做什么？
- 形式：文档、演示、界面、图表还是数据可视化？
- 基调：安静务实、精致编辑风，还是刻意表现？
- 保真度：保留用户的结构和措辞，还是更自由地综合？
- 交互：什么能从探索、排序、筛选或动效中受益（如有）？
如果项目已回答视觉问题，则遵循项目。否则在可用时读取并组合 design-artifact。如果集合安装时没有该同级技能，则在选择配色、字体、构图或动效前读取 references/creative-direction.md。
只加载产物所需的指导：
- 报告、简报、计划、讲解和演示文稿：读取 references/documents-and-presentations.md。
- 界面、计算器和其他仍在此广泛技能中的工具：读取 references/interfaces.md。
- 架构、流程、序列、状态、层级或概念图：读取 references/diagrams.md。
- 定量图表、表格、指标或数据故事：读取 references/charts-and-data.md。
请求可以跨越多种形式。读取所有实质性适用的参考，然后给产物一个连贯的方向。
构建契约
- 生成一个 .html 文件，其必要的 CSS 和 JavaScript 内联。它应能直接打开，无需构建步骤。除非用户允许外部依赖，否则不应要求网络连接。
- 使用真实内容。不要用占位文案、装饰性统计或无功能控件填充显眼空间。
- 让内容决定结构。序列应按顺序阅读；比较应使差异易于扫描；界面应暴露状态和操作；图表应使关系清晰可读。
- 使用语义化 HTML、响应式布局、可访问对比度、可见键盘焦点和减少动效处理。使交互元素可用键盘操作。
- 保持页面主体没有意外的横向溢出。将有意宽大的内容放在受控的滚动或可平移区域内。
- 为所选方向定义一小组 CSS 令牌并一致使用。令牌是实现工具，不是预定配色。
- 将动效视为解释或反馈。如果移除动画不损失意义或有用反馈，则移除它。
- 遵循用户或项目的主题策略。当不存在时，如果有助于使用，为持久实用产物提供经过考虑的浅色和深色主题。刻意单主题概念是有效的。
完成工作
将文件写入请求的位置，或在当前工作区选择清晰的文件名。当浏览器工具可用时，打开它并检查宽窄视口。操作其控件，检查控制台，并修复裁剪、重叠、不可读文本、损坏状态和意外溢出。
交付前，运行一次原创性检查：如果将主题换成相邻主题，相同的视觉概念是否仍然同样合理？如果是，则方向过于通用；修改构图、字体、颜色、图像或交互，使其属于该主题。
返回绝对路径和产物视觉与交互选择的简短描述。
适用场景
适用于需要单文件 HTML 产物的场景，包括报告、讲解、演示、落地页、数据故事、工具、界面、计算器、图表、计划、路线图、实施序列、推广文档、架构图、流程图、序列图、状态图、层级图、概念图以及混合产物。
限制
- 不复制固定的房屋配色、字体栈、卡片系统或布局。
- 不要求用户安装其他技能即可完成请求。
- 除非用户允许，否则不要求网络连接。
- 不使用占位文案、装饰性统计或无功能控件。
- 不添加无意义的动效。
- 关于具体收费、价格、平台支持范围等信息，资料中暂未提供。