code-abyss 1.6.16 → 1.7.1

package/skills/domains/devops/performance.md

@@ -271,3 +271,66 @@ pool_size = (core_count * 2) + effective_spindle_count
   - [ ] 网络无丢包
 ```
 
+---
+
+## 性能测试（源自 performance-testing）
+
+### 测试类型
+
+| 类型 | 用户数 | 持续时间 | 目标 |
+|------|--------|----------|------|
+| 负载测试 | 预期峰值 | 30min-2h | 验证性能指标 |
+| 压力测试 | 超出峰值 | 1-3h | 找到崩溃点 |
+| 浸泡测试 | 正常负载 | 8-72h | 检测内存泄漏 |
+| 峰值测试 | 瞬间激增 | 短时间 | 测试弹性 |
+
+### k6 核心模式
+
+```javascript
+// 阶梯式负载
+export const options = {
+  stages: [
+    { duration: '2m', target: 100 },
+    { duration: '5m', target: 100 },
+    { duration: '2m', target: 0 },
+  ],
+  thresholds: {
+    http_req_duration: ['p(95)<500'],
+    http_req_failed: ['rate<0.01'],
+  },
+};
+```
+
+### 性能基准阈值
+
+| 场景 | P95响应时间 | 错误率 | 吞吐量 |
+|------|-------------|--------|--------|
+| API查询 | <200ms | <0.1% | >1000 RPS |
+| API写入 | <500ms | <0.5% | >500 RPS |
+| 页面加载 | <2s | <1% | >100 RPS |
+
+### 工具选型
+
+| 工具 | 语言 | 适用场景 |
+|------|------|----------|
+| k6 | JavaScript | 现代化、DevOps集成、云原生 |
+| JMeter | Java/GUI | 功能全面、插件丰富 |
+| Gatling | Scala | 高性能、大规模测试 |
+| Locust | Python | Python生态、分布式 |
+
+### 渐进式测试流程
+
+```
+1. 基准测试 → 单用户建立基准
+2. 负载测试 → 预期负载验证性能
+3. 压力测试 → 超出负载找极限
+4. 浸泡测试 → 长时间检测泄漏
+```
+
+### 测试环境要求
+
+- 独立环境，配置与生产一致
+- 数据分布模拟真实：70%轻度 / 20%中度 / 10%重度用户
+- 数据隔离：`user_${__VU}_${__ITER}`
+- CI集成：k6 GitHub Action + 阈值门禁
+

package/skills/domains/devops/testing.md

@@ -184,3 +184,100 @@ AAA:
 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

@@ -1,6 +1,7 @@
 ---
 name: frontend-design
 description: 前端设计美学秘典。UI美学、组件模式、UX原则。当魔尊需要前端设计、UI/UX指导、组件设计时使用。
+license: MIT
 user-invocable: true
 ---
 
@@ -14,9 +15,16 @@ user-invocable: true
 | 组件模式 | [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、性能优化 |
-| 性能优化 | [performance.md](performance.md) | 懒加载、代码分割、虚拟滚动、Web Vitals、资源优化 |
-| 前端测试 | [testing.md](testing.md) | Vitest、Playwright、单元测试、E2E测试、视觉回归 |
-| 构建工具 | [build-tools.md](build-tools.md) | Vite、Webpack、Turbopack、esbuild、构建优化 |
+| 前端工程化 | [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 液态玻璃、半透明深度感知、弹簧动画、环境响应 |
 
 ## 使用场景
 
@@ -26,3 +34,4 @@ user-invocable: true
 - 无障碍改进
 - 响应式布局
 - 交互动画设计
+- 设计风格选型（Claymorphism / Glassmorphism / Neubrutalism / Liquid Glass）

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

@@ -0,0 +1,117 @@
+---
+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
+---
+
+# 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/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 |
+
+---