ccbot-cli 2.0.0 → 2.1.0

package/skills/domains/devops/testing.md

@@ -0,0 +1,283 @@
+---
+name: testing
+description: 软件测试。单元测试、集成测试、TDD、测试框架。当用户提到测试、单元测试、pytest、Jest、mock、TDD时使用。
+---
+
+# 🔧 炼器秘典 · 软件测试
+
+
+## 测试金字塔
+
+```
+        /\
+       /  \     E2E 测试 (少)
+      /----\
+     /      \   集成测试 (中)
+    /--------\
+   /          \ 单元测试 (多)
+  --------------
+```
+
+## Python (pytest)
+
+```python
+import pytest
+from myapp import calculate, UserService
+
+# 基础测试
+def test_add():
+    assert calculate.add(1, 2) == 3
+
+# 参数化
+@pytest.mark.parametrize("a,b,expected", [
+    (1, 2, 3),
+    (0, 0, 0),
+    (-1, 1, 0),
+])
+def test_add_params(a, b, expected):
+    assert calculate.add(a, b) == expected
+
+# Fixture
+@pytest.fixture
+def user_service():
+    service = UserService()
+    yield service
+    service.cleanup()
+
+def test_create_user(user_service):
+    user = user_service.create("test")
+    assert user.name == "test"
+
+# Mock
+from unittest.mock import Mock, patch
+
+@patch('myapp.requests.get')
+def test_fetch(mock_get):
+    mock_get.return_value.json.return_value = {"id": 1}
+    result = fetch_user(1)
+    assert result["id"] == 1
+
+# 异步测试
+@pytest.mark.asyncio
+async def test_async_fetch():
+    result = await async_fetch()
+    assert result is not None
+```
+
+### 运行命令
+```bash
+pytest                      # 运行所有
+pytest test_file.py         # 指定文件
+pytest -k "test_add"        # 匹配名称
+pytest -v                   # 详细输出
+pytest --cov=myapp          # 覆盖率
+pytest -x                   # 失败即停
+```
+
+## JavaScript (Jest/Vitest)
+
+```javascript
+import { describe, it, expect, vi } from 'vitest';
+
+// 基础测试
+describe('add', () => {
+  it('should add two numbers', () => {
+    expect(add(1, 2)).toBe(3);
+  });
+
+  it.each([
+    [1, 2, 3],
+    [0, 0, 0],
+    [-1, 1, 0],
+  ])('add(%i, %i) = %i', (a, b, expected) => {
+    expect(add(a, b)).toBe(expected);
+  });
+});
+
+// Mock
+vi.mock('./api', () => ({
+  getUser: vi.fn().mockResolvedValue({ id: 1, name: 'test' })
+}));
+
+it('should fetch user', async () => {
+  const user = await fetchUser(1);
+  expect(user.name).toBe('test');
+});
+
+// Spy
+const spy = vi.spyOn(console, 'log');
+doSomething();
+expect(spy).toHaveBeenCalledWith('message');
+```
+
+## Go (testing)
+
+```go
+package main
+
+import (
+    "testing"
+    "github.com/stretchr/testify/assert"
+)
+
+func TestAdd(t *testing.T) {
+    result := Add(1, 2)
+    assert.Equal(t, 3, result)
+}
+
+// 表驱动测试
+func TestAddTable(t *testing.T) {
+    tests := []struct {
+        name     string
+        a, b     int
+        expected int
+    }{
+        {"positive", 1, 2, 3},
+        {"zero", 0, 0, 0},
+        {"negative", -1, 1, 0},
+    }
+
+    for _, tt := range tests {
+        t.Run(tt.name, func(t *testing.T) {
+            assert.Equal(t, tt.expected, Add(tt.a, tt.b))
+        })
+    }
+}
+
+// Benchmark
+func BenchmarkAdd(b *testing.B) {
+    for i := 0; i < b.N; i++ {
+        Add(1, 2)
+    }
+}
+```
+
+## 测试原则
+
+```yaml
+FIRST:
+  - Fast: 快速执行
+  - Independent: 相互独立
+  - Repeatable: 可重复
+  - Self-validating: 自验证
+  - Timely: 及时编写
+
+AAA:
+  - Arrange: 准备数据
+  - Act: 执行操作
+  - Assert: 验证结果
+
+原则:
+  - 每个测试只验证一件事
+  - 测试边界条件
+  - 测试异常情况
+  - 避免测试实现细节
+```
+
+## TDD 流程
+
+```
+红 → 绿 → 重构
+
+1. 红: 写一个失败的测试
+2. 绿: 写最少代码让测试通过
+3. 重构: 优化代码，保持测试通过
+```
+
+---
+
+## 测试策略（源自 testing-strategy）
+
+### 测试金字塔比例
+
+| 层级 | 占比 | 执行时间 | 成本 |
+|------|------|----------|------|
+| 单元测试 | 70% | <1s | 低 |
+| 集成测试 | 20% | 1-10s | 中 |
+| E2E测试 | 10% | 10s-5m | 高 |
+
+### 测试左移 Checklist
+
+```yaml
+需求阶段: 可测试性评审、验收标准定义、测试用例设计
+开发阶段: TDD、单元测试同步编写、代码审查包含测试
+提交阶段: Pre-commit Hook、本地测试必过、静态分析
+CI阶段: 自动化测试、覆盖率门禁、性能基准测试
+```
+
+### 契约测试要点
+
+- 消费者驱动契约 (CDC)：Consumer 定义期望 → Provider 验证契约
+- 工具：Pact（多语言）、Spring Cloud Contract（Java）
+- 核心：Provider API <-> Contract <-> Consumer，双方独立验证
+
+### 覆盖率策略
+
+```yaml
+类型: 行覆盖率、分支覆盖率、函数覆盖率、语句覆盖率
+门禁: 全局 ≥80%，核心模块 ≥90%
+排除: tests/、migrations/、__init__.py、config 文件
+```
+
+### 变异测试
+
+- 修改源码（变异体）验证测试是否能捕获
+- 工具：Stryker (JS)、Pitest (Java)
+- 阈值：high 80% / low 60% / break 50%
+
+### 测试最佳实践
+
+- AAA 模式：Arrange → Act → Assert
+- 命名：`should [预期行为] when [条件]`
+- 单一职责：每个测试只验证一件事
+- 数据隔离：Fixture/Factory 模式，每测试独立实例
+- 并行执行：Jest `maxWorkers: '50%'`、pytest `-n auto`
+
+---
+
+## E2E 测试（源自 e2e-testing）
+
+### Playwright vs Cypress
+
+| 特性 | Playwright | Cypress |
+|------|-----------|---------|
+| 多浏览器 | Chromium/Firefox/WebKit | Chromium/Firefox/Edge |
+| 多标签页/iframe | 原生支持 | 有限 |
+| 并行执行 | 原生支持 | 需付费 |
+| 调试体验 | 一般 | 优秀 |
+
+### 选择器优先级
+
+```
+1. data-testid (推荐)
+2. role + accessible name
+3. 稳定的 class/id
+4. 文本内容 (谨慎)
+5. CSS/XPath (避免)
+```
+
+### E2E Checklist
+
+```yaml
+架构:
+  - 页面对象模式 (POM) 封装页面操作
+  - 测试独立性：通过 API 准备数据，不依赖其他测试
+  - 智能等待：waitForSelector/waitForResponse，禁止 waitForTimeout
+
+网络:
+  - Mock API：page.route() / cy.intercept() 隔离后端
+  - 等待响应：waitForResponse 确认数据加载
+
+可视化回归:
+  - Playwright: toHaveScreenshot() + mask 动态内容
+  - Percy/Chromatic: 云端截图对比
+
+认证:
+  - Playwright: storageState 复用登录态
+  - Cypress: cy.session() 缓存会话
+
+CI集成:
+  - retries: CI 环境 2 次重试
+  - artifacts: 失败时保存截图/视频/trace
+```
+

package/skills/domains/frontend-design/SKILL.md

@@ -0,0 +1,38 @@
+---
+name: frontend-design
+description: 前端设计美学秘典。UI美学、组件模式、UX原则。当魔尊需要前端设计、UI/UX指导、组件设计时使用。
+license: MIT
+user-invocable: true
+disable-model-invocation: false
+---
+
+# 🎨 前端设计美学秘典
+
+## 知识主题
+
+| 主题 | 文档 | 涵盖 |
+|------|------|------|
+| UI美学 | [ui-aesthetics.md](ui-aesthetics.md) | 色彩理论、排版系统、间距系统、视觉层次、设计令牌、暗色模式、阴影层级 |
+| 组件模式 | [component-patterns.md](component-patterns.md) | 布局模板、响应式设计、交互模式、动画、表单设计、卡片组件、导航模式 |
+| UX原则 | [ux-principles.md](ux-principles.md) | 可用性、无障碍、信息架构、用户流程、加载体验、反馈设计、移动端优先、性能感知 |
+| 状态管理 | [state-management.md](state-management.md) | Redux、Zustand、Jotai、Recoil、Context API、性能优化 |
+| 前端工程化 | [engineering.md](engineering.md) | 性能优化、Web Vitals、测试（Vitest/Playwright）、构建工具（Vite/Webpack） |
+
+## 设计风格系统
+
+| 风格 | 文档 | 涵盖 |
+|------|------|------|
+| Claymorphism | [claymorphism/SKILL.md](claymorphism/SKILL.md) | 软陶风格、大圆角、双内阴影、偏移外阴影、暗色模式 |
+| Glassmorphism | [glassmorphism/SKILL.md](glassmorphism/SKILL.md) | 毛玻璃风格、backdrop-filter、透明度、模糊层级 |
+| Neubrutalism | [neubrutalism/SKILL.md](neubrutalism/SKILL.md) | 新粗野主义、粗边框、实色偏移阴影、高饱和色彩 |
+| Liquid Glass | [liquid-glass/SKILL.md](liquid-glass/SKILL.md) | Apple 液态玻璃、半透明深度感知、弹簧动画、环境响应 |
+
+## 使用场景
+
+- 设计系统建立
+- 组件库开发
+- UI/UX审查
+- 无障碍改进
+- 响应式布局
+- 交互动画设计
+- 设计风格选型（Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass）

package/skills/domains/frontend-design/claymorphism/SKILL.md

@@ -0,0 +1,119 @@
+---
+name: claymorphism
+description: Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Claymorphism Design Spec
+
+## 3 Core Elements
+
+1. **Large Radius** — Generous `border-radius` (20–50px) for a puffy, inflated look
+2. **Dual Inner Shadows** — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
+3. **Offset Outer Shadow** — Directional `box-shadow` offset (not centered) to ground the element
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+```css
+@import 'references/tokens.css';
+
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  color: var(--clay-text);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.clay-card {
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-lg);
+  box-shadow: var(--clay-shadow);
+  padding: 1.5rem;
+  color: var(--clay-text);
+}
+```
+
+### Button
+```css
+.clay-btn {
+  background: var(--clay-bg-button);
+  border: none;
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow);
+  padding: 0.75rem 1.5rem;
+  color: var(--clay-text);
+  cursor: pointer;
+  transition: box-shadow 0.2s;
+}
+.clay-btn:hover {
+  box-shadow: var(--clay-shadow-elevated);
+}
+.clay-btn:active {
+  box-shadow: var(--clay-shadow-pressed);
+}
+```
+
+### Input
+```css
+.clay-input {
+  background: var(--clay-bg);
+  border: none;
+  border-radius: var(--clay-radius);
+  box-shadow: var(--clay-shadow-pressed);
+  padding: 0.75rem 1rem;
+  color: var(--clay-text);
+}
+.clay-input:focus {
+  outline: 2px solid var(--clay-accent);
+  outline-offset: 2px;
+}
+```
+
+### Toggle
+```css
+.clay-toggle {
+  width: 56px;
+  height: 30px;
+  background: var(--clay-bg-card);
+  border-radius: var(--clay-radius-pill);
+  box-shadow: var(--clay-shadow-pressed);
+}
+.clay-toggle-knob {
+  width: 24px;
+  height: 24px;
+  background: var(--clay-bg);
+  border-radius: 50%;
+  box-shadow: var(--clay-shadow);
+  transition: transform 0.2s;
+}
+```
+
+## Dark Mode Notes
+
+- Dark mode reduces inner highlight intensity (`rgba(255,255,255,0.05)` vs `0.6`) to avoid glowing artifacts
+- Outer shadow opacity increases to maintain depth on dark backgrounds
+- Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
+- All dark tokens are defined in `[data-theme="dark"]` in `tokens.css`
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text — clay backgrounds are muted, verify against `--clay-text`
+- Provide visible `:focus` outlines since clay shadows alone don't indicate focus
+- Use `prefers-contrast: more` to flatten shadows and increase text contrast
+
+```css
+@media (prefers-contrast: more) {
+  .clay-card {
+    box-shadow: 0 0 0 2px var(--clay-text);
+  }
+}
+```

package/skills/domains/frontend-design/claymorphism/references/tokens.css

@@ -0,0 +1,52 @@
+:root {
+  /* Backgrounds — soft, muted pastels */
+  --clay-bg: #f0e6db;
+  --clay-bg-card: #e8ddd4;
+  --clay-bg-button: #d4c4b0;
+  --clay-accent: #c4a882;
+
+  /* Radius — large, rounded, puffy */
+  --clay-radius: 20px;
+  --clay-radius-lg: 32px;
+  --clay-radius-pill: 50px;
+
+  /* Shadows — dual inner + offset outer */
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.12),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.08),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.6);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.15),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.1),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.7);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.1),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.12),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.5);
+
+  /* Text */
+  --clay-text: #4a3f35;
+  --clay-text-muted: #8a7e72;
+}
+
+/* Dark mode */
+[data-theme="dark"] {
+  --clay-bg: #2a2520;
+  --clay-bg-card: #352f28;
+  --clay-bg-button: #443c33;
+  --clay-accent: #6b5d4f;
+  --clay-shadow:
+    8px 8px 16px rgba(0, 0, 0, 0.35),
+    inset -4px -4px 8px rgba(0, 0, 0, 0.25),
+    inset 4px 4px 8px rgba(255, 255, 255, 0.05);
+  --clay-shadow-elevated:
+    12px 12px 24px rgba(0, 0, 0, 0.4),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.3),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.06);
+  --clay-shadow-pressed:
+    2px 2px 6px rgba(0, 0, 0, 0.3),
+    inset -6px -6px 12px rgba(0, 0, 0, 0.35),
+    inset 6px 6px 12px rgba(255, 255, 255, 0.04);
+  --clay-text: #d4c8bc;
+  --clay-text-muted: #8a7e72;
+}

package/skills/domains/frontend-design/component-patterns.md

@@ -0,0 +1,202 @@
+# 组件模式
+
+## 布局模板
+
+### 经典布局模式
+圣杯布局(header/nav/main/aside/footer)、卡片网格、侧边栏、仪表盘。优先使用Grid，Flexbox做一维布局。
+
+```css
+.layout {
+  display: grid;
+  grid-template:
+    "header header" auto
+    "nav main" 1fr
+    "nav aside" auto
+    "footer footer" auto
+    / 200px 1fr;
+  gap: 1rem;
+  min-height: 100vh;
+}
+@media (max-width: 768px) {
+  .layout {
+    grid-template: "header" "nav" "main" "aside" "footer" / 1fr;
+  }
+}
+```
+
+### Flexbox卡片网格
+```css
+.card-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+.card {
+  flex: 1 1 300px;
+  max-width: 400px;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: var(--shadow-2);
+}
+```
+
+## 响应式设计
+
+### 响应式断点策略
+移动优先：320px基准→640px(sm)→768px(md)→1024px(lg)→1280px(xl)。使用em单位断点(除以16)。优先容器查询。
+
+```css
+.card-container {
+  container-type: inline-size;
+}
+.card {
+  padding: 1rem;
+}
+@container (min-width: 400px) {
+  .card {
+    display: grid;
+    grid-template-columns: 150px 1fr;
+    gap: 1rem;
+  }
+}
+```
+
+## 交互模式
+
+### 微交互设计原则
+反馈即时(<100ms)、过渡流畅(200-300ms)、状态清晰(hover/active/focus)、减少认知负担。
+
+```css
+.btn {
+  transition: all 0.2s ease;
+}
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-3);
+}
+.btn:active {
+  transform: translateY(0);
+}
+.btn:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+}
+```
+
+## 动画
+
+### CSS关键帧动画
+```css
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-in {
+  animation: fadeInUp 0.4s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .animate-in {
+    animation: none;
+  }
+}
+```
+
+### Framer Motion模板
+```javascript
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4, ease: "easeOut" }
+};
+const stagger = {
+  animate: { transition: { staggerChildren: 0.1 } }
+};
+<motion.div variants={stagger}>
+  <motion.div variants={fadeInUp} />
+</motion.div>
+```
+
+## 表单设计
+
+### 表单UX模式
+标签上置、内联验证、清晰错误提示、禁用状态明显、必填标记、合理分组、自动聚焦首字段。
+
+```css
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.input {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 1rem;
+  transition: border-color 0.2s;
+}
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
+}
+```
+
+## 卡片组件
+
+### 玻璃拟态卡片
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  padding: 1.5rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+```
+
+## 导航模式
+
+### 响应式导航栏
+```css
+.nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+}
+.nav-links {
+  display: flex;
+  gap: 2rem;
+}
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
+  }
+  .nav-links.open {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    padding: 1rem;
+  }
+}
+```
+
+## 审查清单
+
+- [ ] 响应式适配
+- [ ] 交互状态完整
+- [ ] 无障碍支持
+- [ ] 性能优化
+- [ ] 浏览器兼容
+- [ ] 动画流畅