code-abyss 1.6.5 → 1.6.7

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

@@ -0,0 +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网格
+- [ ] 视觉层级清晰
+- [ ] 暗色模式适配
+- [ ] 阴影层级合理

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

@@ -0,0 +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. 可访问性非可选

package/skills/domains/infrastructure/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: infrastructure
+description: 云原生基础设施。Kubernetes、Helm、Kustomize、Operator、CRD、GitOps、ArgoCD、Flux、IaC、Terraform、Pulumi、CDK、基础设施即代码。当用户提到 K8s、Helm、GitOps、IaC、基础设施即代码时路由到此。
+---
+
+# 云原生基础设施 · Infrastructure
+
+## 秘典矩阵
+
+| 秘典 | 核心神通 | 触发词 |
+|------|----------|--------|
+| [kubernetes](kubernetes.md) | Helm/Kustomize/Operator/CRD | Kubernetes、K8s、Helm、Kustomize、Operator、CRD、部署策略 |
+| [gitops](gitops.md) | ArgoCD/Flux/声明式部署 | GitOps、ArgoCD、Flux、声明式部署、自动同步 |
+| [iac](iac.md) | Terraform/Pulumi/CDK/状态管理 | IaC、Terraform、Pulumi、CDK、基础设施即代码、状态管理 |
+
+## 云原生架构视角
+
+```
+                    GitOps 控制平面
+                          │
+        ┌─────────────────┼─────────────────┐
+        │                 │                 │
+    ArgoCD/Flux      Kubernetes         IaC 层
+        │                 │                 │
+   Git Repo ──────> Helm/Kustomize ──> Terraform/Pulumi
+        │                 │                 │
+    声明式配置        容器编排          云资源管理
+```
+
+## 快速选择
+
+### 容器编排
+- **Helm Chart 开发** → `kubernetes.md`
+- **Kustomize 配置** → `kubernetes.md`
+- **Operator 模式** → `kubernetes.md`
+- **部署策略** → `kubernetes.md`
+
+### 持续部署
+- **GitOps 流程** → `gitops.md`
+- **ArgoCD 配置** → `gitops.md`
+- **Flux 自动化** → `gitops.md`
+- **多环境管理** → `gitops.md`
+
+### 基础设施即代码
+- **Terraform 模块** → `iac.md`
+- **Pulumi 开发** → `iac.md`
+- **AWS CDK** → `iac.md`
+- **状态管理** → `iac.md`
+
+## 最佳实践
+
+| 层级 | 工具选择 | 原则 |
+|------|----------|------|
+| 应用部署 | Helm + Kustomize | 模板化 + 环境差异 |
+| 持续交付 | ArgoCD/Flux | Git 为唯一真相源 |
+| 基础设施 | Terraform/Pulumi | 声明式 + 状态管理 |
+| 配置管理 | External Secrets | 密钥外部化 |
+| 可观测性 | Prometheus + Grafana | 指标 + 可视化 |