状态可见
每次操作都会改变界面，不只改变说明文字。
name: interactive-html-demo
job: build portable interactive HTML
model: state before styling
fallback: retry, jump, reset
boundary: label every simulation
proof: render and click the full path文档说明流程，Demo 展示实际交互
中断后可继续
重试、跳转与重置控件能让演示在中断后继续。
模拟有标注
原型行为与生产能力会明确区分。
运行成品
直接测试 Starter
这是 Skill 随附的单文件成品。可以直接在这里操作，也可以在新标签页中打开。
全尺寸打开先定义状态，再设计界面
真正可复用的不是配色，而是从动作到结果，再到恢复的完整路径。
- 就绪
- 动作
- 结果
- 反馈
- 重试
- 成功
- 下一步判断
写 CSS 前先定六件事
先把交互约定清楚，避免页面做得漂亮却没有有效反馈。
- 目标
- 说清楚你希望观众理解或决定的唯一一件事。
- 页面地图
- 让每一页或每一节只承担论证中的一个任务。
- 动作
- 列出用户可以点击、触摸、输入、筛选或导航的内容。
- 状态变化
- 明确每次动作之后，界面会发生什么可见变化。
- 回退
- 为超时、网络与点击路径失败准备恢复方式。
- 真实边界
- 标记每一项真实、模拟、示意或尚未验证的能力。
interactive-html-demo/
├── SKILL.md workflow and boundaries
├── agents/openai.yaml interface metadata
├── assets/
│ └── single-file-starter.html
├── references/
│ └── acceptance-checklist.md
├── scripts/
│ └── validate_interactive_html.mjs
├── PROVENANCE.md
└── RELEASE.md安装与调用
先在本地使用，再决定如何分发
独立 Skill 适合个人或仓库范围使用。需要让更多人直接安装时，再考虑打包成 Plugin。
OPENAI SKILLS 文档让安装器处理
仓库公开后，把下面这条请求交给 Codex：
Use $skill-installer to install interactive-html-demo from https://github.com/Marina-builds/headfirst-skills.安装到个人目录
Codex 会从个人目录读取 Skill： $HOME/.agents/skills.
git clone https://github.com/Marina-builds/headfirst-skills.git
mkdir -p "$HOME/.agents/skills"
cp -R headfirst-skills/skills/interactive-html-demo "$HOME/.agents/skills/"可以显式调用 $interactive-html-demo，也可以让 Codex 根据描述自动匹配。
先有证据，再发布。
这个包足够小，可以人工检查；也足够严格，能在浏览器验收前发现结构缺失。
- 15
- 项静态检查通过
- 3
- 种响应式浏览器尺寸
- 0
- 条警告与控制台错误
已知限制
- Starter 是演示外壳，不是通用应用框架。
- 静态校验不能替代真实浏览器验收。
- 全屏功能依赖浏览器权限与用户手势。
- 示例流程是模拟的，不会调用真实后端。
源码、许可证与发布证据放在一起。