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 agentmods add skills/echovic/boss-skill/interaction-specificationnpx skills add echoVic/boss-skill --skill interaction-specificationgit clone --depth 1 https://github.com/echoVic/boss-skillWhat 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 | $0.00033 | $0.03068 |
| Opus 5 | $0.00016 | $0.01534 |
| Sonnet 5 | $0.00007 | $0.00614 |
| Haiku 4.5 | $0.00003 | $0.00307 |
Grade A, and why
ui-designer/interaction-specification 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 2d 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 — 324 lines — stays where its author put it; the contents beside it link to each section on GitHub.
交互规范
适用场景
定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。
交互设计原则
- 及时反馈：用户操作后立即给予反馈
- 清晰引导：明确告诉用户下一步该做什么
- 容错性：允许用户撤销、修改操作
- 一致性：相同操作在不同场景下行为一致
- 可访问性：支持键盘、屏幕阅读器等辅助技术
交互规范
1. 加载状态
加载场景
| 场景 | 处理方式 | 时机 | 视觉表现 |
|---|---|---|---|
| 页面首次加载 | 骨架屏 | 首次进入页面 | 灰色占位块，模拟内容结构 |
| 页面刷新 | 顶部进度条 | 刷新页面 | 蓝色进度条，从左到右 |
| 按钮提交 | 按钮内 spinner | 点击提交按钮后 | 按钮内显示旋转图标，文字隐藏 |
| 列表加载更多 | 底部 spinner | 滚动到底部 | 底部显示"加载中..." |
| 局部刷新 | 区域内 spinner | 刷新某个区域 | 区域内显示旋转图标 |
| 搜索 | 输入框内 spinner | 输入后延迟搜索 | 输入框右侧显示旋转图标 |
骨架屏设计
┌─────────────────────────────────────┐
│ ████████ │ ← 标题占位
│ ████████████ │ ← 描述占位
│ │
│ ████ ████████████████ │ ← 列表项占位
│ ████ ████████████████ │
│ ████ ████████████████ │
└─────────────────────────────────────┘
骨架屏原则：
- 模拟真实内容的结构和布局
- 使用灰色占位块（Gray-200）
- 添加微妙的动画（shimmer效果）
- 不要显示真实数据的占位符
Spinner设计
| 尺寸 | 大小 | 线宽 | 用途 |
|---|---|---|---|
| sm | 16px | 2px | 按钮内、输入框内 |
| md | 24px | 2.5px | 卡片内、区域内 |
| lg | 32px | 3px | 页面级加载 |
颜色：
- 主色（Primary）：主要操作的加载
- 灰色（Gray-400）：次要操作的加载
- 白色（White）：深色背景上的加载
2. 空状态
空状态场景
| 场景 | 展示内容 | 操作引导 |
|---|---|---|
| 无数据 | 插图 + "暂无数据" | "创建第一个项目" 按钮 |
| 搜索无结果 | 插图 + "未找到相关内容" | "尝试其他关键词" 提示 |
| 网络错误 | 插图 + "网络连接失败" | "重试" 按钮 |
| 权限不足 | 插图 + "无权访问" | "返回首页" 按钮 |
| 404页面 | 插图 + "页面不存在" | "返回首页" 按钮 |
空状态设计
┌─────────────────────────────────────┐
│ │
│ [插图/图标] │
│ │
│ 暂无数据 │
│ 您还没有创建任何项目 │
│ │
│ [创建项目] 按钮 │
│ │
└─────────────────────────────────────┘
空状态原则：
- 使用友好的插图或图标
- 说明为什么是空的
- 提供明确的操作引导
- 不要让用户感到困惑或沮丧
3. 反馈机制
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.
- 2d ago First seen · 324 lines · 33 tokens per session scan A c760dd439f49
ui-designer/interaction-specification is a skill published in the GitHub repository echoVic/boss-skill (553 stars, last pushed 2d ago), licensed MIT. It adds 33 tokens to every session and 3,068 once invoked, about $0.0002 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
color-expert
Use when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the…
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is design-taste-frontend (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
openclaw-design-system
Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.
macos-swiftui-patterns
Build macOS SwiftUI scenes and components with desktop patterns. Use when shaping windows, commands, toolbars, settings, split views, or inspectors.
hyperframes-animation
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4…
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.