Duoasa/interactive-component-integration

交互式组件集成

English · 中文

用于生产级交互式前端集成的公共 agent 技能。兼容 Codex 和 DeepSeek Harness（DSH）。任何人都可在 MIT 许可证下自由使用、修改和再分发。

任务规模的指导

该技能适用于已识别的外部交互式组件。其入口点仅在需要时路由到渲染、页面隔离或视觉验证细节。小型修复使用受影响的检查；初始源码集成仍保留渲染契约，而视觉一致性需要可比较的证据。

English

interactive-component-integration 帮助 agent 集成第三方交互式和动画前端组件，而不会在不知不觉中改变它们的实际渲染方式。

它针对一种常见的失败模式：某个适配版本看起来大致正确，但其默认值、渲染器设置、颜色管线、alpha 行为、DPR 策略、后处理链、生命周期或无障碍契约已经偏离了权威实现。

何时激活

当任务涉及以下内容时使用此技能：

- canvas、WebGL 或基于着色器的视觉效果；
- 后处理或动画背景；
- 滚动驱动或指针响应式效果；
- 传感器、摄像头或其他输入响应式组件；
- 创意编程代码片段或组件库导出；
- 必须集成、适配、调试或验证的第三方动画组件。

名称和触发范围是有意保持一致的。这不是一个通用的前端技能：普通的页面维护、页面隔离和视觉 QA 不会触发它，除非它们是交互式组件集成的一部分。

它强制执行的内容

1. 源码保真优先 —— 检查权威源码，保留默认值，并在视觉调优之前复现真实的渲染管线。
2. 显式偏差 —— 记录每一处有意的差异、其原因、可见影响以及验证方法。
3. 生产边界 —— 将组件代码、资源、选择器、实验和缓存行为限制在所属范围内。
4. 性能与回退行为 —— 约束 DPR、动画循环、resize 工作、可见性处理、减少动态效果以及 API 失败路径。
5. 基于证据的 QA —— 比较归一化的视口状态，测试相关宽度和交互，绝不将未经测试的行为报告为通过。

使用 Codex 安装

让 Codex 安装独立的技能目录：

Use $skill-installer to install the skill from:
https://github.com/Duoasa/interactive-component-integration/tree/main/resources/skills/interactive-component-integration

Codex 还可以从受支持的用户级和仓库级技能目录中发现技能。有关当前位置和调用行为，请参阅官方 OpenAI 技能文档。

使用 DSH 安装
该仓库同时也是一个原生 DSH 包。可以直接从 GitHub 将其安装到某个配置文件中：

dsh plugin --profile web add github:Duoasa/interactive-component-integration

然后像往常一样使用该配置文件启动 DSH：

dsh --profile web

无需上架市场或构建权限。该包以纯 JavaScript 形式发布，通过 dsh.bundle.patch 声明其包层，并在运行时通过 ctx.skills.register 注册同一个规范技能。

对于对供应链敏感的环境，请固定到一个经过审查的提交：

dsh plugin --profile web add github:Duoasa/interactive-component-integration#

有关当前的 DSH 安装和插件文档，请参阅 DeepSeek Harness 仓库。

使用

显式调用该技能：

Use $interactive-component-integration to integrate this WebGL background,
preserve the source rendering contract, and verify it in the production page.

当任务与 SKILL.md 中的触发描述匹配时，智能体也可以自动激活它。

一个来源，两条分发路径

interactive-component-integration/
├── package.json                 # DSH bundle manifest
├── cordis.patch.yml             # DSH activation layer
├── index.js                     # DSH runtime registration
├── LICENSE
├── README.md
└── resources/
└── skills/
└── interactive-component-integration/
├── SKILL.md         # canonical skill instructions
└── agents/
└── openai.yaml

Codex 安装规范技能目录。DSH 将整个 GitHub 仓库作为包安装，并注册完全相同的 SKILL.md。不存在会在平台之间产生偏差的重复指令正文。

验证

该技能通过了官方 skill-creator 结构验证器。它还针对以下情况进行了前向测试：

- 一个 WebGL 移植，存在损坏的默认值、缺失的 bloom、渲染器/DPR 漂移、CSS 滤镜替换，以及未受管理的动画循环；
- 一个第三方滚动驱动效果，从试验场迁移到隔离的生产页面，且浏览器覆盖不完整。

测试确认，该技能能够识别渲染契约漂移，并将不完整的 QA 报告为 not tested 或 blocked，而不是声称成功。

起源

这个可复用工作流是从 Duoasa Design 中的生产规则中提取并泛化而来的：

- 外部交互组件集成指南
- 案例研究页面独立性规则
- 移动端 Hero 设计 QA

许可证

MIT。任何人都可以在遵守许可证条款的前提下使用、复制、修改、发布和再分发该技能。

中文
interactive-component-integration 是一个公开、可复用的 agent skill，用于把第三方交互与动画组件可靠地集成到前端项目中，并避免适配过程悄悄改变其真实渲染机制。

它解决的典型问题是：页面“看起来差不多”，但组件的默认参数、渲染器配置、色彩管线、透明度与混合、DPR、后处理链、生命周期或无障碍行为已经偏离权威实现。

本 skill 同时兼容 Codex 与 DeepSeek Harness（DSH），并以 MIT 许可证公开发布，任何人都可以使用、修改与再分发。

触发场景

这个 skill 适用于涉及以下内容的任务：

- canvas、WebGL 或 shader 视觉效果；
- post-processing 或动态背景；
- 滚动驱动或指针响应效果；
- 陀螺仪、摄像头或其他输入响应组件；
- creative coding 代码片段或组件库导出代码；
- 需要集成、适配、调试或验收的第三方动画组件。

名称与触发范围刻意保持一致。它不是通用前端 skill：普通页面维护、页面隔离和常规视觉 QA 不会单独触发，只有当这些工作属于交互组件集成的一部分时才会加载。

核心约束

1. 先保证官方机制一致 —— 检查权威源码和默认值，先复刻真实渲染管线，再进行视觉调优。
2. 明确记录偏差 —— 记录每个有意改动、改动原因、可见影响和验证方式。
3. 控制生产边界 —— 将组件代码、资源、选择器、实验页面和缓存行为限制在所属页面或组件范围内。
4. 覆盖性能与降级 —— 明确 DPR 上限、动画循环、resize、页面可见性、reduced motion 和 API 不可用时的 fallback。
5. 用证据完成验收 —— 统一 viewport 与状态进行比较，覆盖相关响应式和交互场景，不把未执行的检查写成通过。

在 Codex 中安装

让 Codex 安装仓库中的独立 skill 目录：

使用 $skill-installer 安装以下路径中的 skill：
https://github.com/Duoasa/interactive-component-integration/tree/main/resources/skills/interactive-component-integration

Codex 也支持从用户级和仓库级目录发现 skill。当前扫描位置与调用方式请参考 OpenAI 官方 skill 文档。

在 DSH 中安装

本仓库同时是一个原生 DSH bundle。按照示例，直接用一条命令从 GitHub 安装到 profile：

dsh plugin --profile web add github:Duoasa/interactive-component-integration

然后照常启动该 profile：

dsh --profile web

不需要进入任何市场，也不需要允许安装时构建脚本。仓库直接提交可运行的 JavaScript，通过 dsh.bundle.patch 声明配置层，并使用 ctx.skills.register 在运行时注册同一份 canonical skill。

对供应链安全要求较高时，可以固定到已审核的 commit：

dsh plugin --profile web add github:Duoasa/interactive-component-integration#

当前 DSH 的安装和插件机制请参考 DeepSeek Harness 官方仓库。

使用

显式调用示例：

使用 $interactive-component-integration 集成这个 WebGL 背景，
保留官方渲染管线，并在真实生产页面中完成验证。

当任务匹配 SKILL.md 中的触发条件时，agent 也可以自动加载这个 skill。

一份内容，两种分发路径

interactive-component-integration/
├── package.json                 # DSH bundle manifest
├── cordis.patch.yml             # DSH 激活层
├── index.js                     # DSH 运行时注册
├── LICENSE
├── README.md
└── resources/
└── skills/
└── interactive-component-integration/
├── SKILL.md         # 唯一的 skill 指令源
└── agents/
└── openai.yaml

Codex 安装 canonical skill 目录；DSH 把整个 GitHub 仓库作为 bundle 安装，并注册完全相同的 SKILL.md。两套平台之间没有重复的指令正文，因此不会产生版本漂移。

验证情况

该 skill 已通过官方 skill-creator 结构校验，并完成两组独立前向测试：

- 检查一个默认值错误、缺少 bloom、渲染器与 DPR 漂移、用 CSS filter 假替代真实效果、且动画循环未清理的 WebGL 适配；
- 将第三方滚动驱动效果从 playground 迁移到独立生产页面，同时面对浏览器覆盖不完整的情况。

测试确认：skill 能识别渲染管线偏差，并会把未完成的验收明确标记为 not tested 或 blocked，而不是直接宣称成功。

来源

这套通用工作流提炼自 Duoasa Design 的生产规则：

- 外部交互组件集成规范
- 案例页面隔离规则
- 移动端 Hero 视觉 QA

许可证

MIT。任何人都可以在遵守许可证条款的前提下使用、复制、修改、发布与再分发本 skill。