interaction-specification

Name: interaction-specification
Author: echoVic

554stars48forks

How to install interaction-specification?

echovic/boss-skill/interaction-specification

$npx -y skills add echoVic/boss-skill --skill interaction-specification

Installs into the current project.

Summary

交互规范，定义加载状态、空状态、反馈机制、动效、无障碍等交互细节

Files · 1

View on GitHub

SKILL.md

1	# 交互规范
2
3	## 适用场景
4
5	定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。
6
7	## 交互设计原则
8
9	1. 及时反馈：用户操作后立即给予反馈
10	2. 清晰引导：明确告诉用户下一步该做什么
11	3. 容错性：允许用户撤销、修改操作
12	4. 一致性：相同操作在不同场景下行为一致
13	5. 可访问性：支持键盘、屏幕阅读器等辅助技术
14
15	## 交互规范
16
17	### 1. 加载状态
18
19	#### 加载场景
20
21	\| 场景 \| 处理方式 \| 时机 \| 视觉表现 \|
22	\|------\|----------\|------\|----------\|
23	\| 页面首次加载 \| 骨架屏 \| 首次进入页面 \| 灰色占位块，模拟内容结构 \|
24	\| 页面刷新 \| 顶部进度条 \| 刷新页面 \| 蓝色进度条，从左到右 \|
25	\| 按钮提交 \| 按钮内 spinner \| 点击提交按钮后 \| 按钮内显示旋转图标，文字隐藏 \|
26	\| 列表加载更多 \| 底部 spinner \| 滚动到底部 \| 底部显示"加载中..." \|
27	\| 局部刷新 \| 区域内 spinner \| 刷新某个区域 \| 区域内显示旋转图标 \|
28	\| 搜索 \| 输入框内 spinner \| 输入后延迟搜索 \| 输入框右侧显示旋转图标 \|
29
30	#### 骨架屏设计
31
32	```
33	┌─────────────────────────────────────┐
34	│ ████████ │ ← 标题占位
35	│ ████████████ │ ← 描述占位
36	│ │
37	│ ████ ████████████████ │ ← 列表项占位
38	│ ████ ████████████████ │
39	│ ████ ████████████████ │
40	└─────────────────────────────────────┘
41	```
42
43	骨架屏原则：
44	- 模拟真实内容的结构和布局
45	- 使用灰色占位块（Gray-200）
46	- 添加微妙的动画（shimmer效果）
47	- 不要显示真实数据的占位符
48
49	#### Spinner设计
50
51	\| 尺寸 \| 大小 \| 线宽 \| 用途 \|
52	\|------\|------\|------\|------\|
53	\| sm \| 16px \| 2px \| 按钮内、输入框内 \|
54	\| md \| 24px \| 2.5px \| 卡片内、区域内 \|
55	\| lg \| 32px \| 3px \| 页面级加载 \|
56
57	颜色：
58	- 主色（Primary）：主要操作的加载
59	- 灰色（Gray-400）：次要操作的加载
60	- 白色（White）：深色背景上的加载
61
62	### 2. 空状态
63
64	#### 空状态场景
65
66	\| 场景 \| 展示内容 \| 操作引导 \|
67	\|------\|----------\|----------\|
68	\| 无数据 \| 插图 + "暂无数据" \| "创建第一个项目" 按钮 \|
69	\| 搜索无结果 \| 插图 + "未找到相关内容" \| "尝试其他关键词" 提示 \|
70	\| 网络错误 \| 插图 + "网络连接失败" \| "重试" 按钮 \|
71	\| 权限不足 \| 插图 + "无权访问" \| "返回首页" 按钮 \|
72	\| 404页面 \| 插图 + "页面不存在" \| "返回首页" 按钮 \|
73
74	#### 空状态设计
75
76	```
77	┌─────────────────────────────────────┐
78	│ │
79	│ [插图/图标] │
80	│ │
81	│ 暂无数据 │
82	│ 您还没有创建任何项目 │
83	│ │
84	│ [创建项目] 按钮 │
85	│ │
86	└─────────────────────────────────────┘
87	```
88
89	空状态原则：
90	- 使用友好的插图或图标
91	- 说明为什么是空的
92	- 提供明确的操作引导
93	- 不要让用户感到困惑或沮丧
94
95	### 3. 反馈机制
96
97	#### Toast通知
98
99	\| 类型 \| 颜色 \| 图标 \| 持续时间 \| 位置 \|
100	\|------\|------\|------\|----------\|------\|
101	\| Success \| `Success` \| ✓ \| 3秒 \| 顶部居中 \|
102	\| Warning \| `Warning` \| ⚠ \| 4秒 \| 顶部居中 \|
103	\| Error \| `Error` \| ✕ \| 5秒 \| 顶部居中 \|
104	\| Info \| `Info` \| ℹ \| 3秒 \| 顶部居中 \|
105
106	Toast设计：
107	```
108	┌─────────────────────────────────────┐
109	│ [图标] 操作成功 │
110	└─────────────────────────────────────┘
111	```
112
113	- 背景：对应语义色
114	- 文字：白色
115	- 圆角：radius-md
116	- 阴影：shadow-lg
117	- 最大宽度：400px
118	- 可手动关闭（右侧×按钮）
119
120	#### Modal确认框
121
122	\| 类型 \| 用途 \| 按钮 \|
123	\|------\|------\|------\|
124	\| 确认 \| 危险操作（删除、清空） \| "取消" + "确认" \|
125	\| 警告 \| 重要提示 \| "我知道了" \|
126	\| 信息 \| 详细说明 \| "关闭" \|
127
128	Modal设计：
129	```
130	┌─────────────────────────────────────┐
131	│ 标题 [×] │
132	├─────────────────────────────────────┤
133	│ │
134	│ 内容区域 │
135	│ │
136	├─────────────────────────────────────┤
137	│ [取消] [确认] │
138	└─────────────────────────────────────┘
139	```
140
141	- 背景：White
142	- 圆角：radius-xl
143	- 阴影：shadow-2xl
144	- 最大宽度：480px
145	- 遮罩：rgba(0,0,0,0.5)
146
147	#### 表单验证
148
149	\| 时机 \| 验证方式 \| 反馈位置 \|
150	\|------\|----------\|----------\|
151	\| 输入时 \| 实时验证（延迟300ms） \| 输入框下方 \|
152	\| 失焦时 \| 立即验证 \| 输入框下方 \|
153	\| 提交时 \| 全部验证 \| 输入框下方 + Toast \|
154
155	错误提示：
156	- 颜色：Error
157	- 字号：14px
158	- 图标：✕
159	- 位置：输入框下方，space-2间距
160
161	### 4. 动效规范
162
163	#### 页面过渡
164
165	\| 场景 \| 动效 \| 参数 \|
166	\|------\|------\|------\|
167	\| 页面进入 \| 淡入 \| 300ms ease-out, opacity 0→1 \|
168	\| 页面退出 \| 淡出 \| 200ms ease-in, opacity 1→0 \|
169	\| 路由切换 \| 淡入淡出 \| 250ms ease-in-out \|
170
171	#### 弹窗动效
172
173	\| 场景 \| 动效 \| 参数 \|
174	\|------\|------\|------\|
175	\| Modal出现 \| 淡入 + 缩放 \| 250ms ease-out, scale 0.95→1, opacity 0→1 \|
176	\| Modal消失 \| 淡出 + 缩放 \| 200ms ease-in, scale 1→0.95, opacity 1→0 \|
177	\| Drawer出现 \| 滑入 \| 300ms ease-out, translateX -100%→0 \|
178	\| Drawer消失 \| 滑出 \| 250ms ease-in, translateX 0→-100% \|
179
180	#### 微交互
181
182	\| 场景 \| 动效 \| 参数 \|
183	\|------\|------\|------\|
184	\| 按钮悬停 \| 背景色渐变 \| 150ms ease-out \|
185	\| 按钮按下 \| 缩放 \| 100ms ease-out, scale 0.98 \|
186	\| 卡片悬停 \| 阴影加深 \| 200ms ease-out \|
187	\| 展开收起 \| 高度动画 \| 250ms ease-in-out \|
188	\| 淡入淡出 \| 透明度 \| 200ms ease-in-out \|
189
190	动效原则：
191	- 动效要有意义，不要为了炫技
192	- 保持克制，不要过度动画
193	- 微交互要快（150ms），大动画可以慢（300ms）
194	- 提供关闭动画的选项（尊重用户偏好）
195
196	### 5. 无障碍设计
197
198	#### 颜色对比度
199
200	\| 组合 \| 对比度 \| 是否合规（WCAG AA） \|
201	\|------\|--------\|---------------------\|
202	\| Gray-900 / White \| 16.1:1 \| ✅ \|
203	\| Gray-700 / White \| 9.5:1 \| ✅ \|
204	\| Gray-500 / White \| 4.6:1 \| ✅ \|
205	\| Primary / White \| 需计算 \| 需≥4.5:1 \|
206
207	对比度要求：
208	- 正文文字：≥4.5:1（WCAG AA）
209	- 大文字（18px+）：≥3:1（WCAG AA）
210	- 图标、UI组件：≥3:1
211
212	#### 键盘导航
213
214	\| 按键 \| 功能 \|
215	\|------\|------\|
216	\| Tab \| 移动到下一个可聚焦元素 \|
217	\| Shift + Tab \| 移动到上一个可聚焦元素 \|
218	\| Enter \| 激活按钮、链接、提交表单 \|
219	\| Space \| 切换复选框、单选框、开关 \|
220	\| Escape \| 关闭弹窗、下拉菜单、取消操作 \|
221	\| 方向键 \| 在列表、菜单、选项卡中导航 \|
222	\| Home / End \| 跳到列表开头/结尾 \|
223
224	聚焦指示：
225	- 所有可交互元素必须有明显的聚焦状态
226	- 聚焦样式：2px Primary 外发光
227	- 不要移除默认的 outline
228
229	#### 屏幕阅读器
230
231	\| 元素 \| ARIA 属性 \| 说明 \|
232	\|------\|-----------\|----

People who liked this also viewed

6 picks

Type

web-design-guidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".SkillsJul 2026483k29k
lark-slides飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 SkillsJul 2026332k16k
design-taste-frontendTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop SkillsJul 2026280k66k
ui-ux-pro-maxUI/UX design intelligence for web and mobile. Searchable local database with 84 styles, 192 color palettes, 74 font pairings, 192 product types, 98 UX guidelines, 104 icon entries, 16 GSAP motion presSkillsJul 2026280k109k
caveman-helpQuick-reference card for all caveman modes, skills, and commands. One-shot display, not a persistent mode. Trigger: /caveman-help, "caveman help", "what caveman commands", "how do I use caveman".SkillsJul 2026249k92k
codebase-designShared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-nSkillsJul 2026225k182k

interaction-specification

554stars48forks

View on GitHub

How to install interaction-specification?

echovic/boss-skill/interaction-specification

$npx -y skills add echoVic/boss-skill --skill interaction-specification

Installs into the current project.

Summary

交互规范，定义加载状态、空状态、反馈机制、动效、无障碍等交互细节

Files · 1

View on GitHub

SKILL.md

1	# 交互规范
2
3	## 适用场景
4
5	定义用户与界面交互的细节，包括加载状态、空状态、反馈机制、动效、无障碍等，确保交互流畅、友好、可访问。
6
7	## 交互设计原则
8
9	1. 及时反馈：用户操作后立即给予反馈
10	2. 清晰引导：明确告诉用户下一步该做什么
11	3. 容错性：允许用户撤销、修改操作
12	4. 一致性：相同操作在不同场景下行为一致
13	5. 可访问性：支持键盘、屏幕阅读器等辅助技术
14
15	## 交互规范
16
17	### 1. 加载状态
18
19	#### 加载场景
20
21	\| 场景 \| 处理方式 \| 时机 \| 视觉表现 \|
22	\|------\|----------\|------\|----------\|
23	\| 页面首次加载 \| 骨架屏 \| 首次进入页面 \| 灰色占位块，模拟内容结构 \|
24	\| 页面刷新 \| 顶部进度条 \| 刷新页面 \| 蓝色进度条，从左到右 \|
25	\| 按钮提交 \| 按钮内 spinner \| 点击提交按钮后 \| 按钮内显示旋转图标，文字隐藏 \|
26	\| 列表加载更多 \| 底部 spinner \| 滚动到底部 \| 底部显示"加载中..." \|
27	\| 局部刷新 \| 区域内 spinner \| 刷新某个区域 \| 区域内显示旋转图标 \|
28	\| 搜索 \| 输入框内 spinner \| 输入后延迟搜索 \| 输入框右侧显示旋转图标 \|
29
30	#### 骨架屏设计
31
32	```
33	┌─────────────────────────────────────┐
34	│ ████████ │ ← 标题占位
35	│ ████████████ │ ← 描述占位
36	│ │
37	│ ████ ████████████████ │ ← 列表项占位
38	│ ████ ████████████████ │
39	│ ████ ████████████████ │
40	└─────────────────────────────────────┘
41	```
42
43	骨架屏原则：
44	- 模拟真实内容的结构和布局
45	- 使用灰色占位块（Gray-200）
46	- 添加微妙的动画（shimmer效果）
47	- 不要显示真实数据的占位符
48
49	#### Spinner设计
50
51	\| 尺寸 \| 大小 \| 线宽 \| 用途 \|
52	\|------\|------\|------\|------\|
53	\| sm \| 16px \| 2px \| 按钮内、输入框内 \|
54	\| md \| 24px \| 2.5px \| 卡片内、区域内 \|
55	\| lg \| 32px \| 3px \| 页面级加载 \|
56
57	颜色：
58	- 主色（Primary）：主要操作的加载
59	- 灰色（Gray-400）：次要操作的加载
60	- 白色（White）：深色背景上的加载
61
62	### 2. 空状态
63
64	#### 空状态场景
65
66	\| 场景 \| 展示内容 \| 操作引导 \|
67	\|------\|----------\|----------\|
68	\| 无数据 \| 插图 + "暂无数据" \| "创建第一个项目" 按钮 \|
69	\| 搜索无结果 \| 插图 + "未找到相关内容" \| "尝试其他关键词" 提示 \|
70	\| 网络错误 \| 插图 + "网络连接失败" \| "重试" 按钮 \|
71	\| 权限不足 \| 插图 + "无权访问" \| "返回首页" 按钮 \|
72	\| 404页面 \| 插图 + "页面不存在" \| "返回首页" 按钮 \|
73
74	#### 空状态设计
75
76	```
77	┌─────────────────────────────────────┐
78	│ │
79	│ [插图/图标] │
80	│ │
81	│ 暂无数据 │
82	│ 您还没有创建任何项目 │
83	│ │
84	│ [创建项目] 按钮 │
85	│ │
86	└─────────────────────────────────────┘
87	```
88
89	空状态原则：
90	- 使用友好的插图或图标
91	- 说明为什么是空的
92	- 提供明确的操作引导
93	- 不要让用户感到困惑或沮丧
94
95	### 3. 反馈机制
96
97	#### Toast通知
98
99	\| 类型 \| 颜色 \| 图标 \| 持续时间 \| 位置 \|
100	\|------\|------\|------\|----------\|------\|
101	\| Success \| `Success` \| ✓ \| 3秒 \| 顶部居中 \|
102	\| Warning \| `Warning` \| ⚠ \| 4秒 \| 顶部居中 \|
103	\| Error \| `Error` \| ✕ \| 5秒 \| 顶部居中 \|
104	\| Info \| `Info` \| ℹ \| 3秒 \| 顶部居中 \|
105
106	Toast设计：
107	```
108	┌─────────────────────────────────────┐
109	│ [图标] 操作成功 │
110	└─────────────────────────────────────┘
111	```
112
113	- 背景：对应语义色
114	- 文字：白色
115	- 圆角：radius-md
116	- 阴影：shadow-lg
117	- 最大宽度：400px
118	- 可手动关闭（右侧×按钮）
119
120	#### Modal确认框
121
122	\| 类型 \| 用途 \| 按钮 \|
123	\|------\|------\|------\|
124	\| 确认 \| 危险操作（删除、清空） \| "取消" + "确认" \|
125	\| 警告 \| 重要提示 \| "我知道了" \|
126	\| 信息 \| 详细说明 \| "关闭" \|
127
128	Modal设计：
129	```
130	┌─────────────────────────────────────┐
131	│ 标题 [×] │
132	├─────────────────────────────────────┤
133	│ │
134	│ 内容区域 │
135	│ │
136	├─────────────────────────────────────┤
137	│ [取消] [确认] │
138	└─────────────────────────────────────┘
139	```
140
141	- 背景：White
142	- 圆角：radius-xl
143	- 阴影：shadow-2xl
144	- 最大宽度：480px
145	- 遮罩：rgba(0,0,0,0.5)
146
147	#### 表单验证
148
149	\| 时机 \| 验证方式 \| 反馈位置 \|
150	\|------\|----------\|----------\|
151	\| 输入时 \| 实时验证（延迟300ms） \| 输入框下方 \|
152	\| 失焦时 \| 立即验证 \| 输入框下方 \|
153	\| 提交时 \| 全部验证 \| 输入框下方 + Toast \|
154
155	错误提示：
156	- 颜色：Error
157	- 字号：14px
158	- 图标：✕
159	- 位置：输入框下方，space-2间距
160
161	### 4. 动效规范
162
163	#### 页面过渡
164
165	\| 场景 \| 动效 \| 参数 \|
166	\|------\|------\|------\|
167	\| 页面进入 \| 淡入 \| 300ms ease-out, opacity 0→1 \|
168	\| 页面退出 \| 淡出 \| 200ms ease-in, opacity 1→0 \|
169	\| 路由切换 \| 淡入淡出 \| 250ms ease-in-out \|
170
171	#### 弹窗动效
172
173	\| 场景 \| 动效 \| 参数 \|
174	\|------\|------\|------\|
175	\| Modal出现 \| 淡入 + 缩放 \| 250ms ease-out, scale 0.95→1, opacity 0→1 \|
176	\| Modal消失 \| 淡出 + 缩放 \| 200ms ease-in, scale 1→0.95, opacity 1→0 \|
177	\| Drawer出现 \| 滑入 \| 300ms ease-out, translateX -100%→0 \|
178	\| Drawer消失 \| 滑出 \| 250ms ease-in, translateX 0→-100% \|
179
180	#### 微交互
181
182	\| 场景 \| 动效 \| 参数 \|
183	\|------\|------\|------\|
184	\| 按钮悬停 \| 背景色渐变 \| 150ms ease-out \|
185	\| 按钮按下 \| 缩放 \| 100ms ease-out, scale 0.98 \|
186	\| 卡片悬停 \| 阴影加深 \| 200ms ease-out \|
187	\| 展开收起 \| 高度动画 \| 250ms ease-in-out \|
188	\| 淡入淡出 \| 透明度 \| 200ms ease-in-out \|
189
190	动效原则：
191	- 动效要有意义，不要为了炫技
192	- 保持克制，不要过度动画
193	- 微交互要快（150ms），大动画可以慢（300ms）
194	- 提供关闭动画的选项（尊重用户偏好）
195
196	### 5. 无障碍设计
197
198	#### 颜色对比度
199
200	\| 组合 \| 对比度 \| 是否合规（WCAG AA） \|
201	\|------\|--------\|---------------------\|
202	\| Gray-900 / White \| 16.1:1 \| ✅ \|
203	\| Gray-700 / White \| 9.5:1 \| ✅ \|
204	\| Gray-500 / White \| 4.6:1 \| ✅ \|
205	\| Primary / White \| 需计算 \| 需≥4.5:1 \|
206
207	对比度要求：
208	- 正文文字：≥4.5:1（WCAG AA）
209	- 大文字（18px+）：≥3:1（WCAG AA）
210	- 图标、UI组件：≥3:1
211
212	#### 键盘导航
213
214	\| 按键 \| 功能 \|
215	\|------\|------\|
216	\| Tab \| 移动到下一个可聚焦元素 \|
217	\| Shift + Tab \| 移动到上一个可聚焦元素 \|
218	\| Enter \| 激活按钮、链接、提交表单 \|
219	\| Space \| 切换复选框、单选框、开关 \|
220	\| Escape \| 关闭弹窗、下拉菜单、取消操作 \|
221	\| 方向键 \| 在列表、菜单、选项卡中导航 \|
222	\| Home / End \| 跳到列表开头/结尾 \|
223
224	聚焦指示：
225	- 所有可交互元素必须有明显的聚焦状态
226	- 聚焦样式：2px Primary 外发光
227	- 不要移除默认的 outline
228
229	#### 屏幕阅读器
230
231	\| 元素 \| ARIA 属性 \| 说明 \|
232	\|------\|-----------\|----

People who liked this also viewed

6 picks

Type