SuperAPI AI 工具集

interactive-states

通用与其它

查看项目

更新于 10-15 21:48

技能介绍

用途:在实现按钮状态、表单字段状态或交互反馈时使用,统一处理 default、hover、active、focus、disabled、loading 等状态,保证交互一致性与可访问性。

主要能力:提供各状态的视觉与时序参考,如 Hover 缩放或变色(50-100ms)、Pressed 缩小(100-150ms)、Focus 环轮廓(即时)、Disabled 透明度 50%、Loading 显示 Spinner;给出按钮、卡片悬停和输入框状态的代码片段;提供校验清单:定义全部 5 种状态、加载有 Spinner、悬停 50-100ms、键盘用户可见聚焦、禁用阻止交互。

使用方式:资料要求实施前使用 TeamCreate 创建 3 个 agent:fuse-ai-pilot:explore-codebase 检查现有状态模式,fuse-ai-pilot:research-expert 研究 Framer Motion 状态动画;之后运行 fuse-ai-pilot:sniper 进行验证。示例使用 Framer Motion 的 whileHover、whileTap 与 transition,配合 cn 工具类控制样式;输入状态用对象映射 default、focus、valid、error、disabled 的类名;聚焦可见性使用 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary;加载时按钮 disabled 并显示旋转的 Loader2 图标。

适用场景:需要统一按钮与表单反馈、提升键盘可访问性、加入微交互动画的前端界面开发。

限制:资料未提供安装命令、依赖版本、具体项目结构或平台支持范围;TeamCreate 及各 fuse-ai-pilot 命令的具体用法暂未提供,需自行确认环境。