micro-interaction-adder

用途：为前端代码（新建或已有）叠加生产级 CSS 微交互，让用户触及的元素有响应，使界面显得生动、精致、可信。微交互用于确认意图、传达状态（加载、禁用、选中、错误）、奖励关注、建立层级。\n\n主要能力：提供核心 CSS 变量（时长、缓动、焦点环、阴影）、交互模式库（悬停缩放、按钮按压、焦点环、链接下划线扫过、卡片抬升、图标抖动、复选框弹性、输入聚焦扩展、骨架屏、淡入滑入、涟漪、切换开关、进度条填充、提示浮现）以及无障碍降级方案。\n\n使用方式：先审计界面中的可交互元素、状态承载元素和可加入场动画的结构元素；再从模式库挑选契合的 3–5 个高价值时刻；把过渡加在基础状态而非 :hover/:focus 上以保证平滑退出；用 CSS 自定义属性保持一致；交互 CSS 与组件样式就近放置。变量可注入 :root：\n:root {\n --duration-instant: 100ms;\n --duration-fast: 150ms;\n --duration-base: 200ms;\n --duration-slow: 300ms;\n --duration-enter: 400ms;\n --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);\n --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n --ease-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94);\n --color-focus-ring: #3b82f6;\n --focus-ring-width: 3px;\n --focus-ring-offset: 2px;\n --shadow-resting: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);\n --shadow-hover: 0 4px 12px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.10);\n --shadow-active: 0 1px 2px rgba(0,0,0,0.10);\n}\n框架说明：原生 HTML/CSS 直接用模式库；React 入场动画用类名加 useState 切换或 motion 库，避免 useEffect+setTimeout；Tailwind 用 transition、duration-{n}、ease-{type}、hover:scale-{n}、active:scale-{n}、focus-visible:ring-{n}；Vue/Svelte 用 Transition 或 transition: 指令。\n\n适用场景：按钮、链接、输入框、复选框、卡片、导航项、模态、下拉、Toast 等需要手感与状态反馈的界面。\n\n限制与校验：时长多数 UI 150–300ms，入场 400–600ms，交互反馈不超过 800ms；始终尊重 prefers-reduced-motion；确保键盘焦点 :focus-visible 生效，禁用态抑制过渡，避免布局偏移（只用 transform 与 opacity）。常见错误包括 transition: all、仅把过渡写在 :hover、transform 与 position: fixed 组合、大量元素 box-shadow 过渡、遗漏 focus-visible、列表中无限旋转动画。参考资料 references/pattern-library.md 与 references/react-patterns.md；价格、平台支持等暂未提供。