Interactive Component Integration
Use for integrating or repairing an identified external component or creative
effect. Ordinary frontend layout, generic animation advice, and unrelated QA do
not need this skill.
Establish the relevant contract
Inspect the requested surface, its owner, the authoritative component source and
version, and any existing local tuning. Separate source defaults, integration
settings (size, DPR, lifecycle), and intentional product design values. Preserve
the user's scope and existing authorization; local conventions cannot override
an explicit user request.
Read only the reference needed for the operation:
| Operation |
Reference |
| Initial integration, source parity, shader/color/compositing defect |
Affected layers in Rendering contract |
| Independent static/frozen page, cross-page styles/assets, deployment isolation |
Containment |
| Visual or interaction comparison, responsive regression |
Relevant scenarios in Visual verification |
Non-obvious invariants
- Omitted props use source defaults, not automatically zero or false. Demo
controls are not the full implementation contract.
- Check renderer color, alpha, post-processing, DPR, and wrappers before tuning
shader parameters to compensate for a mismatch. Preserve glow-bearing RGB.
- Compare equivalent viewport, DPR, theme, state, and timing where source fidelity
matters. Record intentional departures and their reason rather than concealing them.
- Keep lifecycle cleanup, bounded DPR, resize, reduced-motion and fallbacks
appropriate to the component. Keep content usable if the effect fails.
- Preserve page ownership and existing cache invalidation. A reusable application
component does not require duplicated files or a new isolated harness by default.
Complete the requested integration
Continue through the authorized integration, relevant checks, fixes and concise
evidence. Do not stop at an isolated demo if the request includes the real page.
Use existing test surfaces when sufficient; repeat only checks affected by new
changes or findings. A small repair need not replay an entire initial integration.
Claim visual parity only from comparable observations. If required observation
is unavailable or reserved for the owner, report that gap and complete independent
work; do not turn untested into passed. External publishing or expanding to other
page owners still requires the corresponding authorization.
1---2name: interactive-component-integration3description: Integrate or debug externally sourced interactive frontend components, preserving their rendering contract and page boundaries.4---56# Interactive Component Integration78Use for integrating or repairing an identified external component or creative9effect. Ordinary frontend layout, generic animation advice, and unrelated QA do10not need this skill.1112## Establish the relevant contract1314Inspect the requested surface, its owner, the authoritative component source and15version, and any existing local tuning. Separate source defaults, integration16settings (size, DPR, lifecycle), and intentional product design values. Preserve17the user's scope and existing authorization; local conventions cannot override18an explicit user request.1920Read only the reference needed for the operation:2122| Operation | Reference |23|---|---|24| Initial integration, source parity, shader/color/compositing defect | Affected layers in [Rendering contract](references/rendering-contract.md) |25| Independent static/frozen page, cross-page styles/assets, deployment isolation | [Containment](references/containment.md) |26| Visual or interaction comparison, responsive regression | Relevant scenarios in [Visual verification](references/visual-verification.md) |2728## Non-obvious invariants2930- Omitted props use source defaults, not automatically zero or false. Demo31 controls are not the full implementation contract.32- Check renderer color, alpha, post-processing, DPR, and wrappers before tuning33 shader parameters to compensate for a mismatch. Preserve glow-bearing RGB.34- Compare equivalent viewport, DPR, theme, state, and timing where source fidelity35 matters. Record intentional departures and their reason rather than concealing them.36- Keep lifecycle cleanup, bounded DPR, resize, reduced-motion and fallbacks37 appropriate to the component. Keep content usable if the effect fails.38- Preserve page ownership and existing cache invalidation. A reusable application39 component does not require duplicated files or a new isolated harness by default.4041## Complete the requested integration4243Continue through the authorized integration, relevant checks, fixes and concise44evidence. Do not stop at an isolated demo if the request includes the real page.45Use existing test surfaces when sufficient; repeat only checks affected by new46changes or findings. A small repair need not replay an entire initial integration.4748Claim visual parity only from comparable observations. If required observation49is unavailable or reserved for the owner, report that gap and complete independent50work; do not turn untested into passed. External publishing or expanding to other51page owners still requires the corresponding authorization.
Duoasa