ccg-workflow 1.8.2 → 2.0.0

package/templates/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;
+  }
+}
+```
+
+## 审查清单
+
+- [ ] 响应式适配
+- [ ] 交互状态完整
+- [ ] 无障碍支持
+- [ ] 性能优化
+- [ ] 浏览器兼容
+- [ ] 动画流畅

package/templates/skills/domains/frontend-design/engineering.md

@@ -0,0 +1,287 @@
+---
+name: frontend-engineering
+description: 前端工程化。性能优化（Web Vitals、懒加载、虚拟滚动）、测试（Vitest、Playwright、MSW）、构建工具（Vite、Webpack、esbuild）。当用户提到性能优化、前端测试、构建工具、代码分割时使用。
+---
+
+# 前端工程化 · Frontend Engineering
+
+## 一、性能优化
+
+### Core Web Vitals
+
+| 指标 | 含义 | 目标值 |
+|------|------|--------|
+| LCP | Largest Contentful Paint | < 2.5s |
+| FID | First Input Delay | < 100ms |
+| CLS | Cumulative Layout Shift | < 0.1 |
+| FCP | First Contentful Paint | < 1.8s |
+| TTI | Time to Interactive | < 3.8s |
+
+### 性能决策树
+
+```
+加载慢 → Bundle 大？代码分割 + Tree Shaking | 资源多？懒加载 + 预加载 | 网络慢？CDN + 压缩
+渲染慢 → 列表长？虚拟滚动 | 重渲染？React.memo + useMemo | 布局抖动？固定尺寸
+交互慢 → JS 阻塞？Web Worker + startTransition | 动画卡顿？CSS 动画 + rAF
+```
+
+### 代码分割
+
+```typescript
+// 路由级别 — React.lazy + Suspense
+const Dashboard = lazy(() => import('./pages/Dashboard'))
+
+// 组件级别 — 按需加载重量级组件
+const HeavyChart = lazy(() => import('./components/HeavyChart'))
+
+// Vite manualChunks
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom'],
+          'ui': ['@mui/material'],
+        },
+      },
+    },
+  },
+})
+```
+
+### 虚拟滚动
+
+```typescript
+import { FixedSizeList } from 'react-window'
+
+function VirtualList({ items }: { items: Item[] }) {
+  return (
+    <FixedSizeList height={600} itemCount={items.length} itemSize={50} width="100%">
+      {({ index, style }) => <div style={style}>{items[index].name}</div>}
+    </FixedSizeList>
+  )
+}
+```
+
+### React 性能要点
+
+```typescript
+// memo 避免重渲染
+const Row = memo(function Row({ item, onClick }: Props) {
+  return <div onClick={() => onClick(item.id)}>{item.name}</div>
+})
+
+// useMemo 缓存计算 + useCallback 缓存回调
+const filtered = useMemo(() => data.filter(x => x.name.includes(q)), [data, q])
+const handleClick = useCallback((id: string) => select(id), [])
+
+// startTransition 低优先级更新
+startTransition(() => setResults(heavySearch(query)))
+```
+
+### 资源优化 Checklist
+
+- 图片：WebP 格式 + `loading="lazy"` + 响应式 `<picture>`
+- 字体：`font-display: swap` + `preload` woff2
+- 预加载：`dns-prefetch` → `preconnect` → `preload` → `prefetch`
+- 压缩：Gzip/Brotli + HTTP/2
+
+### 性能监控
+
+```typescript
+import { onCLS, onFID, onLCP } from 'web-vitals'
+onCLS(sendToAnalytics)
+onFID(sendToAnalytics)
+onLCP(sendToAnalytics)
+
+// 自定义指标
+performance.mark('start')
+doWork()
+performance.mark('end')
+performance.measure('work', 'start', 'end')
+```
+
+## 二、测试
+
+### 测试金字塔
+
+```
+    /\       E2E (10%) — Playwright
+   /--\      集成 (20%) — Testing Library + MSW
+  /----\     单元 (70%) — Vitest
+```
+
+### Vitest 配置
+
+```typescript
+// vitest.config.ts
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './src/test/setup.ts',
+    coverage: {
+      provider: 'v8',
+      thresholds: { lines: 80, functions: 80, branches: 75 },
+    },
+  },
+})
+```
+
+### 单元测试
+
+```typescript
+describe('formatCurrency', () => {
+  it('formats number', () => expect(formatCurrency(1234.56)).toBe('$1,234.56'))
+  it('handles zero', () => expect(formatCurrency(0)).toBe('$0.00'))
+})
+```
+
+### 组件测试
+
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react'
+
+it('calls onClick', () => {
+  const fn = vi.fn()
+  render(<Button onClick={fn}>Click</Button>)
+  fireEvent.click(screen.getByText('Click'))
+  expect(fn).toHaveBeenCalledTimes(1)
+})
+```
+
+### MSW Mock
+
+```typescript
+import { http, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+
+const server = setupServer(
+  http.get('/api/users/:id', ({ params }) =>
+    HttpResponse.json({ id: params.id, name: 'John' })
+  ),
+)
+beforeAll(() => server.listen())
+afterEach(() => server.resetHandlers())
+afterAll(() => server.close())
+```
+
+### Playwright E2E
+
+```typescript
+// playwright.config.ts 核心
+export default defineConfig({
+  testDir: './e2e',
+  use: { baseURL: 'http://localhost:3000', trace: 'on-first-retry' },
+  webServer: { command: 'npm run dev', url: 'http://localhost:3000' },
+})
+
+// Page Object 模式
+class LoginPage {
+  constructor(private page: Page) {}
+  async login(email: string, password: string) {
+    await this.page.fill('[name="email"]', email)
+    await this.page.fill('[name="password"]', password)
+    await this.page.click('[type="submit"]')
+  }
+}
+```
+
+### 测试 Checklist
+
+- 遵循 AAA 模式（Arrange / Act / Assert）
+- 测试行为而非实现
+- Mock 外部依赖（API、时间）
+- 测试边界条件和错误路径
+- CI 中自动运行 + 覆盖率门禁 80%+
+
+## 三、构建工具
+
+### 选型决策
+
+```
+新项目 React/Vue → Vite | Next.js → Turbopack | 零配置 → Parcel
+库开发 → Rollup / esbuild
+老项目复杂配置 → 保持 Webpack | 可迁移 → Vite
+```
+
+### 工具对比
+
+| 工具 | 冷启动 | HMR | 生产构建 | 生态 |
+|------|--------|-----|----------|------|
+| Vite | < 1s | < 100ms | 10-30s | 成熟 |
+| Webpack | 10-30s | 1-3s | 30-60s | 最丰富 |
+| Turbopack | < 1s | < 100ms | 10-20s | 新兴 |
+| esbuild | < 1s | N/A | 5-10s | 基础 |
+
+### Vite 核心配置
+
+```typescript
+export default defineConfig({
+  plugins: [react()],
+  resolve: { alias: { '@': path.resolve(__dirname, './src') } },
+  server: {
+    port: 3000,
+    proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } },
+  },
+  build: {
+    minify: 'terser',
+    terserOptions: { compress: { drop_console: true } },
+    rollupOptions: {
+      output: {
+        manualChunks: { 'react-vendor': ['react', 'react-dom'] },
+        entryFileNames: 'assets/[name].[hash].js',
+      },
+    },
+  },
+  optimizeDeps: { include: ['react', 'react-dom'] },
+})
+```
+
+### Webpack 生产优化要点
+
+```javascript
+optimization: {
+  minimize: true,
+  minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+  splitChunks: {
+    chunks: 'all',
+    cacheGroups: {
+      react: { test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/, priority: 20 },
+      vendor: { test: /[\\/]node_modules[\\/]/, priority: 10 },
+    },
+  },
+  runtimeChunk: 'single',
+}
+```
+
+### Webpack → Vite 迁移要点
+
+1. `npm install -D vite @vitejs/plugin-react`
+2. `index.html` 移到根目录，加 `<script type="module" src="/src/main.tsx">`
+3. `REACT_APP_*` → `VITE_*`，`process.env` → `import.meta.env`
+4. `require()` → `import`
+
+### 构建 Checklist
+
+- 合理代码分割（路由级 + 第三方库分组）
+- Tree Shaking + 压缩（terser / esbuild）
+- 文件名哈希实现长期缓存
+- Source map 仅 dev 或 hidden
+- 定期 `webpack-bundle-analyzer` / `rollup-plugin-visualizer` 审计
+- CI 缓存 `node_modules` + 构建产物
+
+## 工具速查
+
+| 类别 | 推荐工具 |
+|------|----------|
+| 构建 | Vite (新项目) / Webpack (复杂项目) |
+| 单元测试 | Vitest |
+| 组件测试 | Testing Library |
+| E2E | Playwright |
+| API Mock | MSW |
+| 性能监控 | web-vitals + Lighthouse |
+| Bundle 分析 | webpack-bundle-analyzer / rollup-plugin-visualizer |
+| 视觉回归 | Playwright screenshots / Chromatic |
+
+---

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

@@ -0,0 +1,140 @@
+---
+name: glassmorphism
+description: Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
+license: MIT
+user-invocable: false
+disable-model-invocation: false
+---
+
+# Glassmorphism Design Spec
+
+## 4 Core Elements
+
+1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
+2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
+3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
+4. **Shadow** — Soft layered `box-shadow` for depth separation from background
+
+## CSS Tokens
+
+Reference: [references/tokens.css](references/tokens.css)
+
+Use CSS custom properties from `tokens.css` for consistent theming:
+
+```css
+@import 'references/tokens.css';
+
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+}
+```
+
+## Component Examples
+
+### Card
+```css
+.glass-card {
+  background: var(--glass-bg);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  box-shadow: var(--glass-shadow);
+  padding: 1.5rem;
+}
+```
+
+### Navbar
+```css
+.glass-nav {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border-bottom: var(--glass-border);
+  box-shadow: var(--glass-shadow);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+```
+
+### Modal Overlay
+```css
+.glass-modal-backdrop {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(4px);
+}
+.glass-modal {
+  background: var(--glass-bg-heavy);
+  backdrop-filter: var(--glass-blur-strong);
+  -webkit-backdrop-filter: var(--glass-blur-strong);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius-lg);
+  box-shadow: var(--glass-shadow-elevated);
+}
+```
+
+### Button
+```css
+.glass-btn {
+  background: var(--glass-bg-light);
+  backdrop-filter: var(--glass-blur-light);
+  -webkit-backdrop-filter: var(--glass-blur-light);
+  border: var(--glass-border);
+  border-radius: var(--glass-radius);
+  transition: background 0.2s;
+}
+.glass-btn:hover {
+  background: var(--glass-bg);
+}
+```
+
+## Browser Compatibility
+
+| Feature | Chrome | Firefox | Safari | Edge |
+|---------|--------|---------|--------|------|
+| `backdrop-filter` | 76+ | 103+ | 9+ (`-webkit-`) | 79+ |
+| `rgba()` backgrounds | All | All | All | All |
+
+- Always include `-webkit-backdrop-filter` for Safari support
+- Firefox <103: use `@supports` fallback with solid semi-transparent bg
+- Fallback pattern:
+
+```css
+.glass-card {
+  background: rgba(255, 255, 255, 0.85); /* fallback */
+}
+@supports (backdrop-filter: blur(1px)) {
+  .glass-card {
+    background: var(--glass-bg);
+    backdrop-filter: var(--glass-blur);
+  }
+}
+```
+
+## Accessibility Notes
+
+- Ensure **contrast ratio ≥ 4.5:1** for text over glass surfaces — test against all possible backgrounds
+- Provide `prefers-reduced-transparency` media query to disable blur/transparency for users who need it
+- Avoid placing critical text on highly transparent surfaces without a fallback
+- Use `prefers-contrast: more` to increase border opacity and reduce transparency
+
+```css
+@media (prefers-reduced-transparency: reduce) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: none;
+  }
+}
+@media (prefers-contrast: more) {
+  .glass-card {
+    background: rgba(255, 255, 255, 0.85);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+  }
+}
+```

package/templates/skills/domains/frontend-design/glassmorphism/references/tokens.css

@@ -0,0 +1,32 @@
+:root {
+  /* Backgrounds */
+  --glass-bg-light: rgba(255, 255, 255, 0.08);
+  --glass-bg: rgba(255, 255, 255, 0.15);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.25);
+
+  /* Blur */
+  --glass-blur-light: blur(8px);
+  --glass-blur: blur(16px);
+  --glass-blur-strong: blur(32px);
+
+  /* Border */
+  --glass-border: 1px solid rgba(255, 255, 255, 0.18);
+
+  /* Radius */
+  --glass-radius: 12px;
+  --glass-radius-lg: 20px;
+
+  /* Shadow */
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.15);
+}
+
+/* Dark theme overrides */
+[data-theme="dark"] {
+  --glass-bg-light: rgba(255, 255, 255, 0.04);
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-bg-heavy: rgba(255, 255, 255, 0.14);
+  --glass-border: 1px solid rgba(255, 255, 255, 0.12);
+  --glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+  --glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);
+}