本技能面向 Web 组件的交互状态管理，核心是让组件具备清晰、可访问的视觉反馈。
用途：为按钮、输入框、卡片、标签页、复选框、进度指示器等交互元素定义各状态样式，确保组件响应灵敏且符合无障碍要求。
主要能力：覆盖基础状态（默认、hover、focus、active、disabled）与扩展状态（loading、selected/toggle、当前导航、错误、成功、锁定/不可用，以及 Web Components 的 undefined 状态）。focus 使用 :focus-visible，配合 CSS 变量与 outline 或 box-shadow 呈现焦点环；loading 结合 aria-busy 与 CSS 动画；错误与成功通过 aria-invalid、data-valid 等属性驱动；自定义元素可用 :not(:defined) 隐藏或预留空间以避免 FOUC 与布局偏移。还给出状态切换过渡与 prefers-reduced-motion 的适配方式。
使用方式：通过 CSS 伪类与属性选择器（如 :hover:not(:disabled)、[aria-busy="true"]、[aria-invalid="true"]）配合 ARIA 与 data-* 属性实现；在 Web Components 中，于构造函数创建并保存元素直接引用，通过 attributeChangedCallback 同步 disabled、loading、selected 等状态，避免使用 querySelector。自定义元素先注册后使用，例如 customElements.define('interactive-button', InteractiveComponent)。
适用场景：设计系统、组件库、表单、导航、进度流程等需要统一交互反馈的前端项目。
限制：资料未提供安装命令、运行环境、框架适配、浏览器兼容范围与性能数据；具体实现需结合项目自身标记与样式体系。