用途：当技法源自文章或提示词包时，应改用 article-prompts-to-skills；当效果是你自己写出来、且知识困在单一文件里时，使用本技能将其提炼为可复用的 Web 设计技能。技能本身作为所有 web-technique 技能的“活质量契约”，每次创建或修订时也要审计它，若发现缺失的保真规则、失败模式、打包约束或验证步骤，应在同一次改动中更新契约。
主要能力与做法：
- 每技能只提取一个机制。用一句话命名机制：删掉它效果就失效。写下这句话再动笔；写不出说明只有外观没有机制。用换主题、换配色、换布局来检验句子是否仍成立。
- 命名演示并公开技术栈。可见 h1 与浏览器 title 用具体技法名（如 Wisps、Cursor Ripples）。标题上下按顺序写明运行时/框架、渲染器或浏览器 API、技法层（如 GLSL、Three.js、GSAP、ScrollTrigger）。不得凭外观猜测，须核对 import、渲染器构造与上下文创建；视觉可被误认时明确声明“无 WebGL、着色器或 Three.js”；效果栈与界面栈不同时要分开写。
- 分离机制与布景。机制（数学、状态模型、顺序约束、预算）进技能；配色、文案、图像、页面布局、品牌留在演示；选择器名、字体选择、一次性资源路径舍弃。
- 每条规则锚定它防止的失败，写错的结果而非形容词；常量给真实数字而非“微妙”；给出各层或状态的取值范围、时序与缓动、尺寸间距、预算（dt 钳制、DPR 上限、实例数）等，参数多时用表格。
- 保留昂贵陷阱：颜色空间、布局时机、层叠与合成、顺序、平台怪癖，以症状开头写成独立规则。
- 在开头声明边界：指出最接近的既有技能及何时改用；先搜索 agent-skills///SKILL.md，已有覆盖则扩展而非近似重复。
- 纳入无障碍与生命周期：prefers-reduced-motion 下渲染设计好的静止帧而非隐藏元素，控件保持可用；document.hidden 与离开视口时暂停，恢复时重置时间基准；dt 钳制约 1/30 秒，DPR 上限 2；用 ResizeObserver 测尺寸并防止零视口；控件用真实表单元素、键盘可达、焦点可见、变更用 live region 播报。
- 诚实说明开销，先测量再声明；记录设计来源一行，说明原项目与机制在其中的作用；不拥有的内容（客户品牌、授权字体、购买或第三方素材）必须替换。
- 演示即唯一证据：以参考为验收目标，逐层还原首帧、布局几何、配色、字体处理、素材尺度、氛围与动效层级；用移植生成器代码的方式复用参考素材；首屏即展示机制；跨时间或滚动的机制要验证正向、反向、快速跳过与深层重载。
- 质量底线：刻意的字阶、统一节奏的间距、克制配色加一个有意义强调色、所有控件含焦点态、真实具体文案、单文件或最小本地素材包、390px 到 1440px、语义 HTML、可见焦点、干净的 console。
- 浏览器中验证后再报告：在 1440×900 与 390×844 加载，核对标题与技术栈，实操主交互，遍历所有状态，Tab 检查焦点，跑 reduced-motion 路径，确认 console 干净，按共享尺寸截图，与源并排比对，先修结构性漂移再打磨。
- 打包与提交：目录为 agent-skills/<category>/<skill-name>/ 下的 SKILL.md、agents/openai.yaml、demo/（index.html、PROMPT.md、preview.jpg，可选 reference.*）；SKILL.md 用祈使句，frontmatter 只含 name 和 description，触发短语全放 description；PROMPT.md 含 Minimal prompt、Recreate the demo、Remix prompt 三个标题。只暂存新文件夹及其图库行，提交前查看 git diff --cached --stat。
限制：本资料未提供该技能的收费、价格、平台或安装命令等事实，暂未提供。