Borrowing it
Nothing to install: this file belongs to Peiiii/nextclaw. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/Peiiii/nextclaw/master/.agents/skills/frontend-interaction-quality/SKILL.mdgit clone --depth 1 https://github.com/Peiiii/nextclawWrote 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/peiiii/nextclaw/frontend-interaction-quality)<a href="https://agentmods.dev/skills/peiiii/nextclaw/frontend-interaction-quality"><img src="https://agentmods.dev/badge/skills/peiiii/nextclaw/frontend-interaction-quality.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
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.00057 | $0.01440 |
| Opus 5 | $0.00028 | $0.00720 |
| Sonnet 5 | $0.00011 | $0.00288 |
| Haiku 4.5 | $0.00006 | $0.00144 |
Grade A, and why
frontend-interaction-quality 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 8d 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.
How it starts
The opening of the file, as written. The whole thing — 45 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端交互体验质量
先确定 owner 是通用 primitive、共享组件、业务组件还是页面编排。重复操作骨架复用 shared primitive；紧凑、hover、禁用或图标态由组件自己负责，不由宿主 CSS 补洞。先保证可理解和可达，再做视觉精致度。
参考体验
用户指定成熟产品时，拆解信息架构、选择/导航模型、空间层级、鼠标/键盘行为和反馈；不能用“按钮都有”代替体验对齐。平台能力确实不可复制时列为非目标，但其余交互标准不降级。验收必须包含真实页面完整任务和视觉检查。
控件合同
- URL、路由、文档和来源使用
<a>/Link/NavLink，状态修改、命令和无稳定 URL 面板使用<button>。站内目标保留真实 href 并由 Router 接管普通左键，避免整页刷新。 - 禁止交互元素嵌套、clickable span 和伪语义。普通文本链接默认态就有链接线索；按钮式链接只用于明确 CTA/下载/鉴权/卡片操作，底层仍保持链接语义。
- 外链/方向图标只在语义成立时使用。重复导航收敛到 shared primitive，统一焦点、target/rel 和桌面宿主行为。
- icon-only 控件同时提供可访问名称、tooltip/popover 和 focus-visible；tooltip 在 floating/fullscreen/portal 中仍可见。disabled 控件需要解释原因时，用可触发 tooltip 的 wrapper。
- modal overlay/content 都高于触发面板，content 高于 overlay，不能只有遮罩可见。
- 紧凑模式保留操作含义或当前值；直接动作优先 tooltip，选项/二级动作优先 popover/menu/select。
- hover、focus-visible、active、disabled、selected 表达一致层级。文本输入框例外：光标和选区已表达焦点，聚焦前后容器背景、边框、阴影和 ring 不变。
- Hover 反馈跟随承载 surface：同一背景、同一层级里的同级按钮、列表项和图标动作复用同一反馈色阶，默认在原 surface 上做轻微加深或提亮，不切换成 card、popover、background 等另一层实体表面。Shared primitive 用语义 tone 承载差异，宿主只选择 tone，不复制临时颜色；选中、危险和浮层状态按自身语义例外处理。
- 状态强度匹配任务权重：次级视图切换、筛选和排序只在原 surface 内使用同色系 tonal fill，不获得 card/popover 级亮度、白色浮面或 elevation；只有主任务、需要持续定位的重要选择，或真实浮层对象才提升表面层级。
- hover 浮动操作默认零视觉、零占位、零 hit target，显示后恢复命中；浮层在触发面外时提供不可见 hover bridge。
- 危险、不可逆、跨系统或可能丢数据的操作有清晰文案、确认或撤销；普通导航不滥用确认。
常见复合交互
- 高数据量表格与列表：只要结果可能超过单页可读范围，默认态必须分页或虚拟化，不能把全部记录直接铺在页面上。管理员需要先浏览全貌时，优先提供稳定排序、当前范围/总数、上一页/下一页和每页大小；默认每页 10 条，除非任务或既有惯例证明更高密度更合适，常用上限为 20 条。可按名称、类别、平台或状态定位的数据集必须提供与任务相符的搜索和筛选；筛选、搜索、每页大小变化后回到第 1 页，空结果说明当前条件没有匹配项。数据可能持续增长时，筛选与分页参数由 API/D1 等数据 owner 处理，前端不得全量加载后伪分页。验收需覆盖超过一页、筛选命中/无结果、换页、每页大小变化、刷新后返回当前条件，以及窄容器横向阅读与键盘焦点。
- 触发式输入面板：只有用户真实插入
/、@等 marker 才创建 session；Esc、选中、blur 或离开范围后销毁，文本同步/删除/selection change 不得自动复活。active index、键盘高亮和滚动归面板实例。 - 对象操作菜单：更多按钮和右键共享一份菜单模型、分组和 primitive；右键只是效率入口，显式入口仍可发现、可聚焦。disabled、危险态、焦点移交一致，菜单关闭不得抢回已移交焦点。
- 可折叠行/卡片：整个 header 是点击目标，箭头只是提示；折叠态保留关键预览。行内独立控件通过稳定隔离合同避免冒泡误展开，并为 hover/展开提供明确反馈。
密度与反馈
- 窄容器优先保留主任务、当前值和主要动作；次要说明可收起，入口不能消失。
- loading、pending、success、error、empty、disabled 有即时可见反馈，不只靠变灰。
- 移动端不能只证明无横向溢出；检查关键视口首屏主任务、chrome 占用、导航探索成本、唯一主滚动面和触控可达。
- 用户文案说结果，不暴露内部 state 名。
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.
- 8d ago First seen · 45 lines · 57 tokens per session scan A 0dc74cb4d1ce
frontend-interaction-quality is a skill published in the GitHub repository Peiiii/nextclaw (256 stars, last pushed today), licensed MIT. It adds 57 tokens to every session and 1,440 once invoked, about $0.0003 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-30.
Other skills, from other repositories
frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
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.
component-design
Apply a coherent visual system, responsive behavior, interaction states, and accessibility to Kun components.
component
Create and publish one focused interactive UI component or choose a governed Kun visualization.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
infographic
A guide for creating infographics with only HTML and CSS. Infographics present structured information visually, such as timelines, comparisons, funnels and organisation charts.