code-abyss 1.6.15 → 1.7.0

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 |
+
+---

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

@@ -0,0 +1,138 @@
+---
+name: glassmorphism
+description: Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
+license: MIT
+---
+
+# 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/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);
+}

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

@@ -0,0 +1,135 @@
+---
+name: liquid-glass
+description: Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
+license: MIT
+---
+
+# Liquid Glass Design System
+
+Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
+
+## Core Principles
+
+1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
+2. **Depth** — Elements float on distinct z-layers with realistic shadows
+3. **Ambient Response** — Glass tints shift based on underlying content color
+4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
+5. **Motion** — Transitions feel physical: spring-based, with inertia
+
+## Usage
+
+Import the token file in your CSS:
+
+```css
+@import 'references/tokens.css';
+```
+
+## CSS Tokens Reference
+
+All tokens are defined in `references/tokens.css`. Key categories:
+
+| Category | Prefix | Example |
+|---|---|---|
+| Glass backgrounds | `--lg-bg-*` | `--lg-bg-primary` |
+| Blur | `--lg-blur-*` | `--lg-blur-md` |
+| Borders | `--lg-border-*` | `--lg-border-color` |
+| Shadows | `--lg-shadow-*` | `--lg-shadow-elevated` |
+| Radius | `--lg-radius-*` | `--lg-radius-lg` |
+| Animation | `--lg-duration-*` | `--lg-duration-normal` |
+
+## Component Patterns
+
+### Glass Card
+
+```css
+.glass-card {
+  background: var(--lg-bg-primary);
+  backdrop-filter: blur(var(--lg-blur-md));
+  -webkit-backdrop-filter: blur(var(--lg-blur-md));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-lg);
+  box-shadow: var(--lg-shadow-elevated);
+  transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
+}
+
+.glass-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+### Glass Toolbar
+
+```css
+.glass-toolbar {
+  background: var(--lg-bg-toolbar);
+  backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  -webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
+  border-bottom: 1px solid var(--lg-border-subtle);
+}
+```
+
+### Glass Button
+
+```css
+.glass-btn {
+  background: var(--lg-bg-interactive);
+  backdrop-filter: blur(var(--lg-blur-sm));
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-md);
+  transition: all var(--lg-duration-fast) var(--lg-easing-spring);
+}
+
+.glass-btn:active {
+  transform: scale(0.97);
+  background: var(--lg-bg-pressed);
+}
+```
+
+### Glass Modal Overlay
+
+```css
+.glass-overlay {
+  background: var(--lg-bg-scrim);
+  backdrop-filter: blur(var(--lg-blur-xl));
+}
+
+.glass-modal {
+  background: var(--lg-bg-elevated);
+  border: 1px solid var(--lg-border-color);
+  border-radius: var(--lg-radius-xl);
+  box-shadow: var(--lg-shadow-high);
+}
+```
+
+## Dark / Light Mode
+
+Tokens auto-switch via `prefers-color-scheme`. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.
+
+```css
+/* Force a mode on a subtree */
+.light-glass { color-scheme: light; }
+.dark-glass  { color-scheme: dark; }
+```
+
+## Animations
+
+Use spring-based easing for physical feel:
+
+```css
+/* Entry */
+@keyframes glass-enter {
+  from { opacity: 0; transform: scale(0.95) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.glass-animate-in {
+  animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
+}
+```
+
+## Accessibility
+
+- Ensure `contrast-ratio ≥ 4.5:1` for text over glass surfaces
+- Respect `prefers-reduced-motion` — disable blur animations, use opacity-only transitions
+- Provide `prefers-contrast: high` overrides that replace translucent backgrounds with solid ones

package/skills/domains/frontend-design/liquid-glass/references/tokens.css

@@ -0,0 +1,81 @@
+/* Liquid Glass Design Tokens */
+
+:root {
+  color-scheme: light dark;
+
+  /* Blur */
+  --lg-blur-sm: 8px;
+  --lg-blur-md: 16px;
+  --lg-blur-lg: 32px;
+  --lg-blur-xl: 48px;
+
+  /* Saturation */
+  --lg-saturate: 1.8;
+
+  /* Radius */
+  --lg-radius-sm: 8px;
+  --lg-radius-md: 12px;
+  --lg-radius-lg: 16px;
+  --lg-radius-xl: 24px;
+
+  /* Shadows */
+  --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.08);
+  --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
+  --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.15);
+
+  /* Animation */
+  --lg-duration-fast: 150ms;
+  --lg-duration-normal: 300ms;
+  --lg-duration-slow: 500ms;
+  --lg-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Light mode (default) */
+  --lg-bg-primary: rgba(255,255,255,0.72);
+  --lg-bg-elevated: rgba(255,255,255,0.82);
+  --lg-bg-toolbar: rgba(255,255,255,0.65);
+  --lg-bg-interactive: rgba(255,255,255,0.5);
+  --lg-bg-pressed: rgba(255,255,255,0.35);
+  --lg-bg-scrim: rgba(0,0,0,0.25);
+  --lg-border-color: rgba(255,255,255,0.45);
+  --lg-border-subtle: rgba(0,0,0,0.06);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(30,30,30,0.65);
+    --lg-bg-elevated: rgba(40,40,40,0.75);
+    --lg-bg-toolbar: rgba(25,25,25,0.6);
+    --lg-bg-interactive: rgba(255,255,255,0.1);
+    --lg-bg-pressed: rgba(255,255,255,0.06);
+    --lg-bg-scrim: rgba(0,0,0,0.5);
+    --lg-border-color: rgba(255,255,255,0.12);
+    --lg-border-subtle: rgba(255,255,255,0.06);
+    --lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.3);
+    --lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.4);
+    --lg-shadow-high: 0 8px 32px rgba(0,0,0,0.5);
+  }
+}
+
+@media (prefers-contrast: high) {
+  :root {
+    --lg-bg-primary: rgba(255,255,255,0.95);
+    --lg-bg-elevated: rgba(255,255,255,0.98);
+    --lg-border-color: rgba(0,0,0,0.3);
+  }
+}
+
+@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
+  :root {
+    --lg-bg-primary: rgba(20,20,20,0.95);
+    --lg-bg-elevated: rgba(25,25,25,0.98);
+    --lg-border-color: rgba(255,255,255,0.3);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --lg-duration-fast: 0ms;
+    --lg-duration-normal: 0ms;
+    --lg-duration-slow: 0ms;
+  }
+}