关于 explain-webpage
explain-webpage 是一项将概念转化为精简交互式 HTML 说明页的技能，面向制作解释内容的人。它强调用具体示例呈现机制，并检查无障碍性、窄屏布局和页面功能。
主要功能
- 01制作独立的 HTML 说明页
- 02添加有助理解机制的交互
- 03区分事实、假设与未知
- 04检查无障碍性和窄屏布局
- 05测试控件及示例内容
适用场景
- 01用交互示例解释技术概念
- 02无需现有应用即可制作 HTML 说明页
- 03分享前验证说明页的内容与显示
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/explain-webpage确认已加载。
详细介绍
用 HTML 解释
Karpathy 的前提：定制的一次性软件可以让一个想法更容易理解。
- 找出读者最主要的问题。选择一个能让机制具体化的示例。区分事实、假设和未知项。
- 创建一个完整的 HTML 页面。优先使用包含内嵌 CSS 和 JavaScript 的独立文件，除非用户已有应用或需要单独的资源文件。
- 在交互有助于理解时加入交互：更改输入、显示某个步骤、比较不同情景，或观察某种机制。说明发生了什么变化以及原因。避免添加装饰性控件。
- 使用清晰的层级、易读的字体和简短的说明。为控件添加标签，支持键盘操作，并显示焦点状态。适配窄屏，并支持减少动态效果设置。
- 打开页面，操作其控件，并检查窄视口下的表现。除了外观，也要验证底层示例。修复问题后，返回 HTML，并附上简短的打开说明。说明任何无法测试的内容。
用动画引导注意力。尽可能让页面精简，同时确保内容足以解释清楚。除非用户提出要求，否则不要发布。
评论
支持 Markdown