DeepSeek Harness (DSH) 的核心理念是“一切皆插件”。在处理前端任务时，集成第三方交互组件（如 WebGL 背景、滚动驱动动画）往往容易在适配过程中悄悄改变渲染逻辑，导致页面“看起来差不多”，但实际表现与官方实现偏离。interactive-component-integration 是一个用于生产级交互前端集成的公开 agent skill，兼容 Codex 和 DeepSeek Harness (DSH)。
是什么¶
该插件由 Duoasa 维护，采用 MIT 许可证。它是一个专用的 agent skill，而非通用前端工具，旨在解决第三方组件在集成、适配或验证过程中的渲染契约偏离问题。
核心功能¶
该 skill 提供了一套针对复杂前端交互的约束与验证机制：
- 忠实集成：处理 canvas、WebGL、shader、滚动驱动、指针响应以及第三方动画组件的集成。
- 源码保真优先：检查权威源码和默认值，先复刻真实渲染管线，再进行视觉调优。
- 明确记录偏差：记录每个有意改动的原因、可见影响和验证方式。
- 生产边界控制：将组件代码、资源、选择器、实验页面和缓存行为限制在所属页面或组件范围内。
- 性能与降级处理：明确 DPR 上限、动画循环、resize、页面可见性、reduced motion 和 API 不可用时的 fallback。
- 基于证据的 QA：统一 viewport 与状态进行比较，覆盖相关响应式和交互场景，不把未执行的检查写成通过。
安装与启用¶
该仓库同时是一个原生 DSH bundle，安装过程无需市场列表或构建权限。
1、使用 DSH 安装到 web profile：
dsh plugin --profile web add github:Duoasa/interactive-component-integration
2、启动 DSH：
dsh --profile web
3、对供应链安全要求较高时，可以固定到已审核的 commit：
dsh plugin --profile web add github:Duoasa/interactive-component-integration#<commit>
典型用法¶
在任务描述中显式调用该 skill：
Use $interactive-component-integration to integrate this WebGL background, preserve the source rendering contract, and verify it in the production page.
或者，当任务匹配 SKILL.md 中的触发条件时，agent 可以自动加载该 skill。
适用场景与注意¶
该 skill 的触发范围刻意保持一致，仅针对涉及复杂交互和动画的任务：
- 适用场景：canvas/WebGL/shader 视觉效果；post-processing 或动态背景；滚动驱动或指针响应效果；传感器/摄像头等输入响应组件；creative coding 代码片段或组件库导出代码；需要集成、适配、调试或验收的第三方动画组件。
- 不适用场景：普通页面维护、页面隔离和常规视觉 QA 不会单独触发该 skill，除非它们属于交互组件集成的一部分。
注意事项：
* 任何人都可以在 MIT 许可证下使用、修改和分发该插件。
* 插件以当前 dsh 进程权限运行，安装前应检查源码与许可证。
总结¶
通过强制执行源码保真度、边界控制和基于证据的 QA，该 skill 有助于确保第三方组件在生产环境中按预期工作，避免因适配不当导致的视觉或功能偏差。完整文档和源代码位于其 GitHub 仓库。
