# Interaction States Pass

> 检查按钮、链接、表单、切换器、导航和自定义控件是否具备适用的 default、hover、active、disabled、focus、loading 状态，以及过渡、成功和错误反馈。用户要求“补全交互状态”“检查 hover/focus/loading”“交互看起来像坏的”或交付前状态检查时使用；状态应按控件实际能力选择，不能机械要求六种全部存在。

- Skill: `onevium/interaction-states-pass` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/interaction-states-pass`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/interaction-states-pass/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/interaction-states-pass

---


# 交互状态检查

让每个操作在静止、交互中和完成后都提供清晰反馈。状态集合取决于控件行为：没有异步动作的链接不需要 loading，没有禁用语义的控件不应凭空添加 disabled。

## 1. 建立控件清单

列出按钮、链接、表单控件、切换器、可点击卡片或行、选项卡、侧栏、面包屑、菜单、折叠面板、对话框和其他自定义控件，并记录真实行为。

## 2. 检查适用状态

- **Default**：静止时能识别为可交互元素，不依赖 hover 才显形。
- **Hover**：指针设备上有一致反馈；不要只降低透明度造成“已禁用”错觉。
- **Active / pressed**：操作触发时有即时反馈，且不会与选中状态混淆。
- **Disabled**：只在业务确实禁止操作时使用，同时表达原因并阻止事件；不要只改颜色。
- **Focus**：键盘焦点清晰可见，优先 `:focus-visible`；删除默认轮廓时必须提供等效或更强替代。
- **Loading**：异步操作期间防止重复提交、显示进度并在成功或失败后恢复。

## 3. 过渡与减少动效

微交互通常使用约 `0.15–0.3s`，进入或退出可稍长；具体值应复用设计 token。动效不得拖慢操作，且应尊重 `prefers-reduced-motion`。不要为了“更有质感”给所有控件添加位移或缩放。

## 4. 行为反馈

提交、保存、删除、筛选和切换必须产生可见结果。成功、失败和字段校验信息要与触发操作关联；当前页面、选中项、活动筛选和排序状态也要可识别。

## 5. 输出或修复

用户只要求检查时，按控件列出缺失状态、行为风险和修复建议。获准修改时复用已有 token，补全必要状态，并用键盘、指针、触屏和减少动效模式重新走一遍关键路径。

## 示例

**输入：**“检查 Save 按钮的交互状态并补齐。”

**输出：**保留默认样式，增加与设计系统一致的 hover 和 pressed 反馈、可见 `:focus-visible`、提交期间 disabled + loading、成功与失败消息，并验证重复点击不会触发二次提交。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。