Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add Onevium/awesome-claude-skills --skill interaction-states-passgit clone --depth 1 https://github.com/Onevium/awesome-claude-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/onevium/awesome-claude-skills/interaction-states-pass)<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/interaction-states-pass"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/interaction-states-pass/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/onevium/awesome-claude-skills/interaction-states-pass"><img src="https://agentmods.dev/badge/skills/onevium/awesome-claude-skills/interaction-states-pass.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00100 | $0.00798 |
| Opus 5 | $0.00050 | $0.00399 |
| Sonnet 5 | $0.00020 | $0.00160 |
| Haiku 4.5 | $0.00010 | $0.00080 |
Grade A, and why
interaction-states-pass scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
交互状态检查
让每个操作在静止、交互中和完成后都提供清晰反馈。状态集合取决于控件行为：没有异步动作的链接不需要 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 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 11d ago First seen · 48 lines · 100 tokens per session scan A 4e83774b5abb
interaction-states-pass is a skill published in the GitHub repository Onevium/awesome-claude-skills (1 stars, last pushed 14d ago), licensed MIT. It adds 100 tokens to every session and 798 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
accesslint-audit
Find and fix WCAG 2.2 accessibility issues. Two modes — report (sweep a codebase or page, produce a prioritized written report, no edits) and fix (audit→edit→verify loop on a target). Prefers direct-CDP live-DOM auditing; falls back to a browser-MCP composition or HTML-string audits.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
accesslint-scan
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
frontend-design
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
software-in-worten
Übersetzt zwischen Benutzeroberfläche und Text — in beide Richtungen. Aus einer beschriebenen Oberfläche wird ein Skill; aus einem Skill wird eine Oberfläche. Nutzen, wenn eine Anwendung entworfen wird und der Ablauf noch unklar ist, wenn ein bestehendes Werkzeug als Skill verfügbar gemacht werden soll, wenn…
image-to-code
Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards…