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 倉庫。
