sumulige-claude 1.5.0 → 1.5.2

package/.claude/rules/web-design-standard.md

@@ -0,0 +1,218 @@
+# Web 设计标准
+
+> 定义什么是好的设计，而非仅提供资源
+
+## 优先级说明
+
+| 标签 | 含义 | 处理方式 |
+|------|------|----------|
+| 🔴 CRITICAL | 必须遵守 | 违反将显著影响用户体验 |
+| 🟠 HIGH | 应该遵守 | 设计审查必查 |
+| 🟡 MEDIUM | 建议遵守 | 提升设计质量 |
+| 🟢 LOW | 可选遵守 | 风格偏好 |
+
+---
+
+## 🟠 HIGH: 核心哲学 [DESIGN-001]
+
+```
+"Visual design is not about expressing yourself.
+ The key thing is the information you're trying to get across."
+                                        — Garry Tan (YC CEO)
+```
+
+**奥卡姆剃刀**：能删则删。文字、线条、边框——如果移除不影响含义，就移除它。
+
+## 🔴 CRITICAL: 三大铁律 [DESIGN-002]
+
+| 铁律 | 含义 | 检查方式 |
+|------|------|----------|
+| **对比 = 重要性** | 粗/大/色 = 重要 | 如果都粗，就都不粗 |
+| **接近 = 相关性** | 靠近的被感知为一组 | 相关内容放一起 |
+| **视觉层级** | 对比 + 接近 = 导航路标 | 眯眼测试：第一眼看哪？ |
+
+## 🟠 HIGH: 设计决策流程 [DESIGN-003]
+
+```
+需求 → 信息层级 → 排版 → 颜色 → 间距 → 交互 → 验证
+```
+
+### Step 1: 信息层级 (🔴)
+
+```
+问自己：
+1. 用户必须看到什么？（主标题）
+2. 用户应该看到什么？（副标题、CTA）
+3. 用户可能看到什么？（详情、辅助）
+4. 什么可以删除？（装饰、冗余）
+```
+
+### Step 2: 排版系统 (🟠)
+
+| 元素 | 规则 |
+|------|------|
+| **字号** | 使用模块化标度 (1.25 / 1.333 / 1.414) |
+| **行高** | 正文 1.4-1.6，标题 1.1-1.3 |
+| **行长** | 45-75 字符，max-width + padding |
+| **单位** | rem/em，永不 px（除 1px 边框） |
+
+```scss
+// 模块化标度示例
+$scale: 1.25;
+$base: 1rem;
+
+$text-sm: $base / $scale;      // 0.8rem
+$text-base: $base;              // 1rem
+$text-lg: $base * $scale;       // 1.25rem
+$text-xl: $base * $scale * $scale; // 1.5625rem
+```
+
+### Step 3: 颜色系统
+
+| 原则 | 说明 |
+|------|------|
+| **克制** | 2-3 主色 + 中性色 |
+| **深灰非纯黑** | 正文用 #333 而非 #000 |
+| **对比度** | WCAG AA 最低 4.5:1 |
+| **语义化** | 成功/警告/错误 一致 |
+
+### Step 4: 间距系统
+
+```scss
+// 8px 基础单位
+$space-1: 0.25rem;  // 4px
+$space-2: 0.5rem;   // 8px
+$space-3: 0.75rem;  // 12px
+$space-4: 1rem;     // 16px
+$space-6: 1.5rem;   // 24px
+$space-8: 2rem;     // 32px
+$space-12: 3rem;    // 48px
+$space-16: 4rem;    // 64px
+```
+
+**90% 情况**：网格 + padding/margin + 好标题 + 对比 = 足够
+
+### Step 5: 交互状态
+
+| 状态 | 必须有 |
+|------|--------|
+| **默认** | 基础样式 |
+| **悬停** | hover 反馈 |
+| **焦点** | focus-visible:ring |
+| **激活** | active 按下感 |
+| **禁用** | disabled 视觉弱化 |
+| **加载** | 骨架屏 / 进度 |
+
+## 反模式检查
+
+| 反模式 | 信号 | 正确做法 |
+|--------|------|----------|
+| **装饰过度** | 渐变+阴影+圆角+动画 | 每个元素只用一种强调 |
+| **AI 审美** | Inter + 蓝紫渐变 + 16px 圆角 | 建立独特品牌 |
+| **信息过载** | 首屏塞满内容 | 留白是设计元素 |
+| **一致性缺失** | 3 种按钮样式 | 组件库 + 设计令牌 |
+| **忽视移动端** | 桌面优先 | 移动优先 |
+
+## 组件标准
+
+### 导航栏 (Navbar)
+
+```
+✅ 固定高度 (56-64px)
+✅ Logo 左侧
+✅ 主导航居中或右侧
+✅ CTA 按钮突出
+✅ 移动端汉堡菜单
+```
+
+### 英雄区 (Hero)
+
+```
+✅ 一句话价值主张
+✅ 副标题解释
+✅ 明确 CTA
+✅ 留白充足
+❌ 轮播图 (用户不看)
+```
+
+### 表单 (Form)
+
+```
+✅ 标签在输入框上方
+✅ 实时验证
+✅ 错误信息在字段下方
+✅ 移除不必要字段
+❌ 占位符替代标签
+❌ 冒号 (:) 后缀
+```
+
+### 卡片 (Card)
+
+```
+✅ 清晰边界 (边框或阴影)
+✅ 内容层级 (标题 > 描述 > 操作)
+✅ 一致间距
+❌ 过多操作按钮
+```
+
+## 与现有 Skills 的关系
+
+```
+web-design-standard.md (本文件)
+├── 定义原则和标准
+└── 引用以下 Skills 执行具体任务：
+
+/skills/web-design-guidelines
+├── Vercel Web Interface Guidelines
+├── 用于：UI 代码审查
+└── 触发："/review my UI"
+
+/skills/react-best-practices
+├── 45 条 React/Next.js 性能规则
+├── 用于：组件代码优化
+└── 触发：性能问题
+
+/skills/threejs-fundamentals
+├── 3D 场景/相机/渲染器
+├── 用于：数据可视化
+└── 触发：3D 图表需求
+```
+
+## 审查输出格式
+
+```
+【眯眼测试】
+第一眼看到：[元素]
+期望第一眼：[元素] → ✅匹配 / ❌不匹配
+
+【层级检查】
+- 主层级：[是否清晰]
+- 次层级：[是否区分]
+- 视觉噪音：[可删除项]
+
+【对比度】
+- 正文：[比值] → ✅ / ❌
+- 链接：[比值] → ✅ / ❌
+
+【一致性】
+- 间距：[8px 倍数?]
+- 字号：[模块化标度?]
+- 颜色：[系统化?]
+
+【移动端】
+- 触摸目标：≥44px?
+- 行长：合理?
+- 可读性：字号?
+```
+
+## 资源索引
+
+| 类型 | 推荐 |
+|------|------|
+| **导航栏** | bentogrids.com |
+| **标题** | h1gallery.com |
+| **CTA** | cta.gallery |
+| **页脚** | footer.design |
+| **404** | 404s.design |
+| **图标** | icoon.co |
+| **原型** | framer.com |

package/.claude/skills/algorithmic-art/metadata.yaml

@@ -0,0 +1,28 @@
+name: algorithmic-art
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration.
+  Use this when users request creating art using code, generative art, algorithmic art, flow fields,
+  or particle systems. Create original algorithmic art rather than copying existing artists' work.
+
+tags:
+  - generative-art
+  - p5js
+  - creative-coding
+  - visualization
+  - interactive
+
+triggers:
+  - algorithmic art
+  - generative art
+  - p5.js
+  - flow fields
+  - particle systems
+  - creative coding
+  - procedural art
+
+dependencies:
+  - p5.js
+
+difficulty: advanced

package/.claude/skills/api-tester/SKILL.md

@@ -0,0 +1,61 @@
+# Api Tester
+
+> 简短描述这个技能的作用（一句话）
+
+**版本**: 1.0.0
+**作者**: @username
+**标签**: [category1, category2]
+**难度**: 初级/中级/高级
+
+---
+
+## 概述
+
+详细描述这个技能的功能和用途。
+
+## 适用场景
+
+- 场景 1
+- 场景 2
+- 场景 3
+
+## 触发关键词
+
+```
+keyword1, keyword2, "exact phrase"
+```
+
+## 使用方法
+
+### 基础用法
+
+```bash
+# 示例命令
+your-command-here
+```
+
+### 高级用法
+
+```yaml
+# 配置示例
+key: value
+```
+
+## 输出格式
+
+描述这个技能的输出结果格式。
+
+## 注意事项
+
+- 注意事项 1
+- 注意事项 2
+
+## 相关技能
+
+- [related-skill](../related-skill/)
+- [another-skill](../another-skill/)
+
+## 更新日志
+
+### 1.0.0 (YYYY-MM-DD)
+- 初始版本

package/.claude/skills/api-tester/examples/basic.md

@@ -0,0 +1,3 @@
+# Basic Example for api-tester
+
+Replace this with your actual example.

package/.claude/skills/api-tester/metadata.yaml

@@ -0,0 +1,30 @@
+# Skill Metadata
+# 这个文件定义技能的基本信息，用于自动发现和索引
+
+name: api-tester
+version: 1.0.0
+author: @username
+description: 简短描述技能功能
+
+tags:
+  - category1
+  - category2
+
+triggers:
+  - keyword1
+  - keyword2
+  - "exact phrase"
+
+dependencies: []  # 依赖的其他技能
+
+difficulty: beginner  # beginner | intermediate | advanced
+
+# 模板文件
+templates:
+  - name: default
+    file: templates/default.md
+
+# 示例文件
+examples:
+  - name: basic
+    file: examples/basic.md

package/.claude/skills/api-tester/templates/default.md

@@ -0,0 +1,3 @@
+# Default Template for api-tester
+
+Replace this with your actual template.

package/.claude/skills/brand-guidelines/metadata.yaml

@@ -0,0 +1,26 @@
+name: brand-guidelines
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Applies Anthropic's official brand colors and typography to any sort of artifact.
+  Use when brand colors, style guidelines, visual formatting, or company design standards apply.
+  Supports smart font application and accent colors for shapes.
+
+tags:
+  - branding
+  - design
+  - typography
+  - colors
+  - anthropic
+
+triggers:
+  - brand colors
+  - brand guidelines
+  - Anthropic style
+  - corporate identity
+  - visual identity
+  - typography
+
+dependencies: []
+
+difficulty: beginner

package/.claude/skills/canvas-design/metadata.yaml

@@ -0,0 +1,27 @@
+name: canvas-design
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Create beautiful visual art in .png and .pdf documents using design philosophy.
+  Use when the user asks to create a poster, piece of art, design, or other static piece.
+  Creates original visual designs with museum-quality craftsmanship.
+
+tags:
+  - design
+  - visual-art
+  - poster
+  - pdf
+  - png
+  - creative
+
+triggers:
+  - create poster
+  - visual art
+  - canvas design
+  - pdf design
+  - art creation
+  - graphic design
+
+dependencies: []
+
+difficulty: advanced

package/.claude/skills/code-reviewer-123/SKILL.md

@@ -0,0 +1,61 @@
+# Code Reviewer 123
+
+> 简短描述这个技能的作用（一句话）
+
+**版本**: 1.0.0
+**作者**: @username
+**标签**: [category1, category2]
+**难度**: 初级/中级/高级
+
+---
+
+## 概述
+
+详细描述这个技能的功能和用途。
+
+## 适用场景
+
+- 场景 1
+- 场景 2
+- 场景 3
+
+## 触发关键词
+
+```
+keyword1, keyword2, "exact phrase"
+```
+
+## 使用方法
+
+### 基础用法
+
+```bash
+# 示例命令
+your-command-here
+```
+
+### 高级用法
+
+```yaml
+# 配置示例
+key: value
+```
+
+## 输出格式
+
+描述这个技能的输出结果格式。
+
+## 注意事项
+
+- 注意事项 1
+- 注意事项 2
+
+## 相关技能
+
+- [related-skill](../related-skill/)
+- [another-skill](../another-skill/)
+
+## 更新日志
+
+### 1.0.0 (YYYY-MM-DD)
+- 初始版本

package/.claude/skills/code-reviewer-123/examples/basic.md

@@ -0,0 +1,3 @@
+# Basic Example for code-reviewer-123
+
+Replace this with your actual example.

package/.claude/skills/code-reviewer-123/metadata.yaml

@@ -0,0 +1,30 @@
+# Skill Metadata
+# 这个文件定义技能的基本信息，用于自动发现和索引
+
+name: code-reviewer-123
+version: 1.0.0
+author: @username
+description: 简短描述技能功能
+
+tags:
+  - category1
+  - category2
+
+triggers:
+  - keyword1
+  - keyword2
+  - "exact phrase"
+
+dependencies: []  # 依赖的其他技能
+
+difficulty: beginner  # beginner | intermediate | advanced
+
+# 模板文件
+templates:
+  - name: default
+    file: templates/default.md
+
+# 示例文件
+examples:
+  - name: basic
+    file: examples/basic.md

package/.claude/skills/code-reviewer-123/templates/default.md

@@ -0,0 +1,3 @@
+# Default Template for code-reviewer-123
+
+Replace this with your actual template.

package/.claude/skills/doc-coauthoring/metadata.yaml

@@ -0,0 +1,27 @@
+name: doc-coauthoring
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Guide users through a structured workflow for co-authoring documentation.
+  Use when user wants to write documentation, proposals, technical specs, decision docs,
+  or similar structured content. Three stages: Context Gathering, Refinement, Reader Testing.
+
+tags:
+  - documentation
+  - writing
+  - collaboration
+  - technical-writing
+  - workflow
+
+triggers:
+  - write docs
+  - draft proposal
+  - create spec
+  - technical spec
+  - decision doc
+  - PRD
+  - RFC
+
+dependencies: []
+
+difficulty: intermediate

package/.claude/skills/docx/metadata.yaml

@@ -0,0 +1,30 @@
+name: docx
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Comprehensive document creation, editing, and analysis with support for tracked changes,
+  comments, formatting preservation, and text extraction. Use when working with .docx files
+  for creating, modifying, or analyzing professional documents.
+
+tags:
+  - document
+  - word
+  - docx
+  - office
+  - editing
+  - tracked-changes
+
+triggers:
+  - docx file
+  - word document
+  - create document
+  - edit document
+  - tracked changes
+  - redline
+
+dependencies:
+  - pandoc
+  - docx-js
+  - defusedxml
+
+difficulty: intermediate

package/.claude/skills/frontend-design/metadata.yaml

@@ -0,0 +1,28 @@
+name: frontend-design
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Create distinctive, production-grade frontend interfaces with high design quality.
+  Use when building web components, pages, artifacts, dashboards, React components,
+  or styling any web UI. Generates creative, polished code avoiding generic AI aesthetics.
+
+tags:
+  - frontend
+  - design
+  - ui
+  - web
+  - react
+  - css
+
+triggers:
+  - build website
+  - landing page
+  - dashboard
+  - React component
+  - web design
+  - UI design
+  - frontend interface
+
+dependencies: []
+
+difficulty: intermediate

package/.claude/skills/internal-comms/metadata.yaml

@@ -0,0 +1,28 @@
+name: internal-comms
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Resources to write all kinds of internal communications using company formats.
+  Use for status reports, leadership updates, 3P updates, company newsletters,
+  FAQs, incident reports, project updates, and similar internal content.
+
+tags:
+  - communications
+  - internal
+  - reports
+  - newsletter
+  - updates
+  - business
+
+triggers:
+  - 3P update
+  - company newsletter
+  - status report
+  - leadership update
+  - incident report
+  - internal comms
+  - weekly update
+
+dependencies: []
+
+difficulty: beginner

package/.claude/skills/mcp-builder/metadata.yaml

@@ -0,0 +1,26 @@
+name: mcp-builder
+version: 1.0.0
+author: "@sumulige"
+description: |
+  Guide for creating high-quality MCP (Model Context Protocol) servers that enable
+  LLMs to interact with external services through well-designed tools.
+  Use when building MCP servers in Python (FastMCP) or Node/TypeScript (MCP SDK).
+
+tags:
+  - mcp
+  - server
+  - api
+  - integration
+  - typescript
+  - python
+
+triggers:
+  - MCP server
+  - Model Context Protocol
+  - build MCP
+  - API integration
+  - tool integration
+
+dependencies: []
+
+difficulty: advanced

package/.claude/skills/my-skill/SKILL.md

@@ -0,0 +1,61 @@
+# My Skill
+
+> 简短描述这个技能的作用（一句话）
+
+**版本**: 1.0.0
+**作者**: @username
+**标签**: [category1, category2]
+**难度**: 初级/中级/高级
+
+---
+
+## 概述
+
+详细描述这个技能的功能和用途。
+
+## 适用场景
+
+- 场景 1
+- 场景 2
+- 场景 3
+
+## 触发关键词
+
+```
+keyword1, keyword2, "exact phrase"
+```
+
+## 使用方法
+
+### 基础用法
+
+```bash
+# 示例命令
+your-command-here
+```
+
+### 高级用法
+
+```yaml
+# 配置示例
+key: value
+```
+
+## 输出格式
+
+描述这个技能的输出结果格式。
+
+## 注意事项
+
+- 注意事项 1
+- 注意事项 2
+
+## 相关技能
+
+- [related-skill](../related-skill/)
+- [another-skill](../another-skill/)
+
+## 更新日志
+
+### 1.0.0 (YYYY-MM-DD)
+- 初始版本