ccgx-workflow 1.0.0 → 1.0.1

package/templates/skills/domains/frontend-design/ui-aesthetics.md

@@ -1,110 +1,110 @@
-# UI 美学
-
-## 色彩理论
-
-### 色彩体系设计
-60-30-10配色法则：主色60%、辅色30%、强调色10%。使用HSL而非RGB便于调整。建立语义化色彩令牌（primary/success/danger）。
-
-```css
-:root {
-  --primary-h: 220;
-  --primary-s: 90%;
-  --primary-l: 50%;
-  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
-  --primary-dark: hsl(var(--primary-h) var(--primary-s) 40%);
-  --primary-light: hsl(var(--primary-h) var(--primary-s) 60%);
-}
-```
-
-## 排版系统
-
-### 排版层级规范
-使用模块化比例（1.25/1.333/1.5）。基准16px，标题用比例放大，正文14-18px。行高1.5-1.8。限制字体族≤3种。
-
-```css
-:root {
-  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
-  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
-  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
-}
-body {
-  font-size: var(--fs-base);
-  line-height: 1.6;
-}
-```
-
-## 间距系统
-
-### 8px网格间距体系
-基准8px，建立4/8/12/16/24/32/48/64px间距令牌。组件内用小间距(4-12)，组件间用中间距(16-32)，区块间用大间距(48+)。
-
-```css
-:root {
-  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
-  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
-}
-.stack-sm > * + * { margin-top: var(--sp-2); }
-.stack-md > * + * { margin-top: var(--sp-4); }
-```
-
-## 视觉层次
-
-### 视觉层次四原则
-1. 对比：大小/粗细/颜色差异
-2. 对齐：统一对齐建立秩序
-3. 重复：一致性建立认知
-4. 亲密性：相关元素靠近
-
-## 设计令牌
-
-### Design Token架构
-三层架构：基础令牌(颜色/字号原始值)→语义令牌(primary/heading)→组件令牌(button-bg)。
-
-```css
-:root {
-  --color-gray-50: #f9fafb;
-  --color-gray-900: #111827;
-  --color-primary: var(--color-blue-600);
-  --text-primary: var(--color-gray-900);
-  --bg-surface: white;
-  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
-}
-```
-
-## 暗色模式
-
-### 暗色模式设计规范
-背景用深灰(#121212)非纯黑。降低白色文本亮度至#e0e0e0。提升表面层级用更亮灰色。注意色彩对比度WCAG AA。
-
-```css
-:root { --bg: white; --text: #111; }
-@media (prefers-color-scheme: dark) {
-  :root { --bg: #121212; --text: #e0e0e0; }
-}
-[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }
-body { background: var(--bg); color: var(--text); }
-```
-
-## 阴影与层级
-
-### 阴影层级体系
-5级阴影：1-贴地(1px) 2-悬浮(2-4px) 3-浮起(8-12px) 4-弹出(16-24px) 5-模态(24-32px)。
-
-```css
-:root {
-  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
-  --shadow-2: 0 2px 4px rgba(0,0,0,0.08);
-  --shadow-3: 0 8px 16px rgba(0,0,0,0.12);
-  --shadow-4: 0 16px 24px rgba(0,0,0,0.16);
-  --shadow-5: 0 24px 32px rgba(0,0,0,0.2);
-}
-```
-
-## 审查清单
-
-- [ ] 色彩对比度≥4.5:1
-- [ ] 字体≤3种
-- [ ] 间距符合8px网格
-- [ ] 视觉层级清晰
-- [ ] 暗色模式适配
-- [ ] 阴影层级合理
+# UI 美学
+
+## 色彩理论
+
+### 色彩体系设计
+60-30-10配色法则：主色60%、辅色30%、强调色10%。使用HSL而非RGB便于调整。建立语义化色彩令牌（primary/success/danger）。
+
+```css
+:root {
+  --primary-h: 220;
+  --primary-s: 90%;
+  --primary-l: 50%;
+  --primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
+  --primary-dark: hsl(var(--primary-h) var(--primary-s) 40%);
+  --primary-light: hsl(var(--primary-h) var(--primary-s) 60%);
+}
+```
+
+## 排版系统
+
+### 排版层级规范
+使用模块化比例（1.25/1.333/1.5）。基准16px，标题用比例放大，正文14-18px。行高1.5-1.8。限制字体族≤3种。
+
+```css
+:root {
+  --fs-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
+  --fs-h1: clamp(2rem, 1.5rem + 2vw, 3rem);
+  --fs-h2: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
+}
+body {
+  font-size: var(--fs-base);
+  line-height: 1.6;
+}
+```
+
+## 间距系统
+
+### 8px网格间距体系
+基准8px，建立4/8/12/16/24/32/48/64px间距令牌。组件内用小间距(4-12)，组件间用中间距(16-32)，区块间用大间距(48+)。
+
+```css
+:root {
+  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
+  --sp-6: 1.5rem; --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem;
+}
+.stack-sm > * + * { margin-top: var(--sp-2); }
+.stack-md > * + * { margin-top: var(--sp-4); }
+```
+
+## 视觉层次
+
+### 视觉层次四原则
+1. 对比：大小/粗细/颜色差异
+2. 对齐：统一对齐建立秩序
+3. 重复：一致性建立认知
+4. 亲密性：相关元素靠近
+
+## 设计令牌
+
+### Design Token架构
+三层架构：基础令牌(颜色/字号原始值)→语义令牌(primary/heading)→组件令牌(button-bg)。
+
+```css
+:root {
+  --color-gray-50: #f9fafb;
+  --color-gray-900: #111827;
+  --color-primary: var(--color-blue-600);
+  --text-primary: var(--color-gray-900);
+  --bg-surface: white;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
+}
+```
+
+## 暗色模式
+
+### 暗色模式设计规范
+背景用深灰(#121212)非纯黑。降低白色文本亮度至#e0e0e0。提升表面层级用更亮灰色。注意色彩对比度WCAG AA。
+
+```css
+:root { --bg: white; --text: #111; }
+@media (prefers-color-scheme: dark) {
+  :root { --bg: #121212; --text: #e0e0e0; }
+}
+[data-theme="dark"] { --bg: #121212; --text: #e0e0e0; }
+body { background: var(--bg); color: var(--text); }
+```
+
+## 阴影与层级
+
+### 阴影层级体系
+5级阴影：1-贴地(1px) 2-悬浮(2-4px) 3-浮起(8-12px) 4-弹出(16-24px) 5-模态(24-32px)。
+
+```css
+:root {
+  --shadow-1: 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-2: 0 2px 4px rgba(0,0,0,0.08);
+  --shadow-3: 0 8px 16px rgba(0,0,0,0.12);
+  --shadow-4: 0 16px 24px rgba(0,0,0,0.16);
+  --shadow-5: 0 24px 32px rgba(0,0,0,0.2);
+}
+```
+
+## 审查清单
+
+- [ ] 色彩对比度≥4.5:1
+- [ ] 字体≤3种
+- [ ] 间距符合8px网格
+- [ ] 视觉层级清晰
+- [ ] 暗色模式适配
+- [ ] 阴影层级合理

package/templates/skills/domains/frontend-design/ux-principles.md

@@ -1,156 +1,156 @@
-# UX 原则
-
-## 可用性
-
-### Nielsen十大可用性原则
-1. 系统状态可见
-2. 系统匹配现实
-3. 用户控制自由
-4. 一致性标准
-5. 防错
-6. 识别优于回忆
-7. 灵活高效
-8. 美学简约
-9. 帮助识别错误
-10. 帮助文档
-
-## 无障碍
-
-### WCAG 2.1速查
-- **可感知**：文本替代、时基媒体、适配性、可辨别
-- **可操作**：键盘、足够时间、无癫痫、导航
-- **可理解**：可读、可预测、输入辅助
-- **健壮**：兼容性
-
-### ARIA标签最佳实践
-```html
-<button aria-label="关闭对话框">
-  <svg aria-hidden="true">...</svg>
-</button>
-<nav aria-label="主导航">
-  <ul role="list">...</ul>
-</nav>
-<div role="alert" aria-live="assertive">错误消息</div>
-```
-
-### 键盘导航支持
-```javascript
-element.addEventListener("keydown", e => {
-  if (e.key === "Enter" || e.key === " ") {
-    e.preventDefault();
-    handleClick();
-  }
-  if (e.key === "Escape") {
-    closeModal();
-  }
-});
-element.setAttribute("tabindex", "0");
-```
-
-## 信息架构
-
-### 信息架构设计模式
-- 层级结构(树形)
-- 顺序结构(线性)
-- 矩阵结构(网格)
-- 数据库结构(标签)
-
-导航深度≤3层，广度5±2项。
-
-## 用户流程
-
-### 用户流程设计原则
-减少步骤、清晰进度、允许跳过、保存状态、提供退出、即时反馈。关键流程≤3步。
-
-## 加载体验
-
-### 骨架屏与加载策略
-优先级：骨架屏>进度条>加载动画>空白。首屏<1s，交互<100ms，加载>1s显示进度。
-
-```css
-.skeleton {
-  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-  background-size: 200% 100%;
-  animation: loading 1.5s ease-in-out infinite;
-}
-@keyframes loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-```
-
-## 反馈设计
-
-### 用户反馈模式
-- **Toast**(临时提示)
-- **Alert**(重要警告)
-- **Modal**(阻断操作)
-- **Inline**(表单验证)
-
-成功绿、警告黄、错误红、信息蓝。
-
-```css
-.toast {
-  position: fixed;
-  bottom: 2rem;
-  right: 2rem;
-  padding: 1rem 1.5rem;
-  background: white;
-  border-radius: 8px;
-  box-shadow: var(--shadow-4);
-  animation: slideInRight 0.3s ease;
-}
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-```
-
-## 移动端优先
-
-### 移动端设计原则
-触摸目标≥44px、拇指热区、避免悬停、简化导航、减少输入、优化性能、考虑单手操作。
-
-```css
-.btn-touch {
-  min-height: 44px;
-  min-width: 44px;
-  padding: 0.75rem 1.5rem;
-  font-size: 1rem;
-  -webkit-tap-highlight-color: transparent;
-  touch-action: manipulation;
-}
-@media (hover: hover) {
-  .btn-touch:hover {
-    background: var(--primary-dark);
-  }
-}
-```
-
-## 性能感知
-
-### 感知性能优化
-骨架屏、乐观更新、预加载、懒加载、渐进增强。让用户感觉快比实际快更重要。
-
-## 审查清单
-
-- [ ] 符合Nielsen原则
-- [ ] WCAG AA达标
-- [ ] 键盘可访问
-- [ ] 移动端友好
-- [ ] 加载状态清晰
-- [ ] 反馈及时
-
-## 最佳实践
-
-1. 用户优先于技术
-2. 简单优于复杂
-3. 一致性建立信任
-4. 反馈建立信心
-5. 可访问性非可选
+# UX 原则
+
+## 可用性
+
+### Nielsen十大可用性原则
+1. 系统状态可见
+2. 系统匹配现实
+3. 用户控制自由
+4. 一致性标准
+5. 防错
+6. 识别优于回忆
+7. 灵活高效
+8. 美学简约
+9. 帮助识别错误
+10. 帮助文档
+
+## 无障碍
+
+### WCAG 2.1速查
+- **可感知**：文本替代、时基媒体、适配性、可辨别
+- **可操作**：键盘、足够时间、无癫痫、导航
+- **可理解**：可读、可预测、输入辅助
+- **健壮**：兼容性
+
+### ARIA标签最佳实践
+```html
+<button aria-label="关闭对话框">
+  <svg aria-hidden="true">...</svg>
+</button>
+<nav aria-label="主导航">
+  <ul role="list">...</ul>
+</nav>
+<div role="alert" aria-live="assertive">错误消息</div>
+```
+
+### 键盘导航支持
+```javascript
+element.addEventListener("keydown", e => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    handleClick();
+  }
+  if (e.key === "Escape") {
+    closeModal();
+  }
+});
+element.setAttribute("tabindex", "0");
+```
+
+## 信息架构
+
+### 信息架构设计模式
+- 层级结构(树形)
+- 顺序结构(线性)
+- 矩阵结构(网格)
+- 数据库结构(标签)
+
+导航深度≤3层，广度5±2项。
+
+## 用户流程
+
+### 用户流程设计原则
+减少步骤、清晰进度、允许跳过、保存状态、提供退出、即时反馈。关键流程≤3步。
+
+## 加载体验
+
+### 骨架屏与加载策略
+优先级：骨架屏>进度条>加载动画>空白。首屏<1s，交互<100ms，加载>1s显示进度。
+
+```css
+.skeleton {
+  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+  background-size: 200% 100%;
+  animation: loading 1.5s ease-in-out infinite;
+}
+@keyframes loading {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+```
+
+## 反馈设计
+
+### 用户反馈模式
+- **Toast**(临时提示)
+- **Alert**(重要警告)
+- **Modal**(阻断操作)
+- **Inline**(表单验证)
+
+成功绿、警告黄、错误红、信息蓝。
+
+```css
+.toast {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  padding: 1rem 1.5rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: var(--shadow-4);
+  animation: slideInRight 0.3s ease;
+}
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+```
+
+## 移动端优先
+
+### 移动端设计原则
+触摸目标≥44px、拇指热区、避免悬停、简化导航、减少输入、优化性能、考虑单手操作。
+
+```css
+.btn-touch {
+  min-height: 44px;
+  min-width: 44px;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+@media (hover: hover) {
+  .btn-touch:hover {
+    background: var(--primary-dark);
+  }
+}
+```
+
+## 性能感知
+
+### 感知性能优化
+骨架屏、乐观更新、预加载、懒加载、渐进增强。让用户感觉快比实际快更重要。
+
+## 审查清单
+
+- [ ] 符合Nielsen原则
+- [ ] WCAG AA达标
+- [ ] 键盘可访问
+- [ ] 移动端友好
+- [ ] 加载状态清晰
+- [ ] 反馈及时
+
+## 最佳实践
+
+1. 用户优先于技术
+2. 简单优于复杂
+3. 一致性建立信任
+4. 反馈建立信心
+5. 可访问性非可选