用途：从一个已经写好、能正常运行的网页视觉或交互动效文件出发，提炼出其中的可复用技法，做成独立的 web-design skill。它强调从可运行代码而非文章描述中提炼；若来源是文章或提示词包，应使用 article-prompts-to-skills。
主要能力：要求每条 skill 只抽出一个机制（去掉它效果就失效的那一件事），并先用一句话命名；把源码拆成机制、舞台布置、偶发细节三类，skill 正文只保留机制。规则须绑定它防止的具体失败，常量用真实数字而非形容词。要保留代价高昂的坑（色彩空间、布局时序、层叠与合成、顺序、平台怪癖），并以症状开头书写。需声明与最近已有 skill 的边界，一开始检查 agent-skills///SKILL.md，已有覆盖就扩展而非新建。
使用方式：skill 头部只写 name 和 description，触发短语放进 description。演示目录为 agent-skills/<category>/<skill-name>/ 下的 SKILL.md、agents/openai.yaml、demo/index.html、PROMPT.md、preview.jpg 及可选 reference.*。演示首屏必须展示机制，并写明已验证的运行时、渲染器和主要技术库，例如 Vanilla JavaScript · Canvas 2D、Three.js · WebGL · GLSL，不能凭外观猜测，要核对 import、渲染器构建与上下文创建。演示需覆盖 390px 到 1440px，语义化 HTML，焦点可见，控制台干净。
适用场景：把单页项目中抽出的粒子、光标涟漪、液体金属边框、滚动擦除文字揭示等技法，各自打包为独立 skill。同一来源的多个技法应产出像兄弟的演示，以形成成体系的作品集。
限制：演示中不能带入非自有素材——客户品牌、授权字体、购买或第三方图片均须替换，其余按参考还原；机制跨时间或滚动时，需验证每个关键状态及正放、倒放、快进跳过、深度重载路径。需包含 prefers-reduced-motion 的静态帧、document.hidden 暂停、dt 上限约 1/30 秒、DPR 上限 2。代价声明须经测量。未提供具体安装命令、收费或平台信息。