@gong-ym/ai-spec-auto 0.2.13 → 0.2.15

package/.agents/skills/domains/web/ui-verification/rules/workflow-reflection.md

@@ -1,44 +1,44 @@
----
-title: 反思分析不足模板
-impact: MEDIUM
-impactDescription: 反哺 design-analysis，减少同类遗漏
-tags: workflow, reflection, design-analysis
----
-
-## 反思分析不足（反哺 design-analysis）
-
-### 为什么要反思
-
-UI 问题常暴露「设计稿分析」阶段的遗漏或描述不清。把「哪些问题是因为分析没做到位」总结下来，可补充到 **design-analysis** 的检查项与文档结构中，减少同类遗漏。
-
-### 反思要回答的问题
-
-1. **清单遗漏**：有哪些问题是「分析清单里根本没写」导致的？
-2. **描述不清**：有哪些是「分析清单写了但不具体」导致的？
-3. **步骤或模板**：design-analysis 的步骤或分析清单模板，应做哪些补充或修改？
-4. **设计常识缺失**：有哪些问题是「编写时缺乏主流网页设计常识」导致的？详见 `rules/writing-*.md` 和 `rules/errors-*.md`
-5. **CSS 优先级问题**：是否有组件样式被页面级样式覆盖的问题？详见 `rules/errors-css-priority.md`
-6. **浏览器验证缺失**：哪些细节问题是因为未用浏览器工具实际查看导致的？详见 `rules/tools-browser-navigation.md`
-
-### 反思输出方式
-
-- **短期**：在本次「UI 问题清单」文档末尾增加一节「分析不足反思」，按上面几问简要写出结论
-- **长期**：将共性结论沉淀到 `.agents/skills/design-analysis/SKILL.md`（常见遗漏检查点、文档结构等）
-
-### 反思记录模板
-
-```markdown
-## 分析不足反思（用于完善 design-analysis）
-
-### 清单遗漏
-- 问题：xxx
-- 建议：design-analysis 中增加 xxx
-
-### 描述不清
-- 问题：xxx
-- 建议：分析清单中必填 xxx
-
-### 对 design-analysis 的补充建议
-- [ ] 在常见遗漏检查点中增加：……
-- [ ] 在文档结构中增加：……
-```
+---
+title: 反思分析不足模板
+impact: MEDIUM
+impactDescription: 反哺 design-analysis，减少同类遗漏
+tags: workflow, reflection, design-analysis
+---
+
+## 反思分析不足（反哺 design-analysis）
+
+### 为什么要反思
+
+UI 问题常暴露「设计稿分析」阶段的遗漏或描述不清。把「哪些问题是因为分析没做到位」总结下来，可补充到 **design-analysis** 的检查项与文档结构中，减少同类遗漏。
+
+### 反思要回答的问题
+
+1. **清单遗漏**：有哪些问题是「分析清单里根本没写」导致的？
+2. **描述不清**：有哪些是「分析清单写了但不具体」导致的？
+3. **步骤或模板**：design-analysis 的步骤或分析清单模板，应做哪些补充或修改？
+4. **设计常识缺失**：有哪些问题是「编写时缺乏主流网页设计常识」导致的？详见 `rules/writing-*.md` 和 `rules/errors-*.md`
+5. **CSS 优先级问题**：是否有组件样式被页面级样式覆盖的问题？详见 `rules/errors-css-priority.md`
+6. **浏览器验证缺失**：哪些细节问题是因为未用浏览器工具实际查看导致的？详见 `rules/tools-browser-navigation.md`
+
+### 反思输出方式
+
+- **短期**：在本次「UI 问题清单」文档末尾增加一节「分析不足反思」，按上面几问简要写出结论
+- **长期**：将共性结论沉淀到 `.agents/skills/design-analysis/SKILL.md`（常见遗漏检查点、文档结构等）
+
+### 反思记录模板
+
+```markdown
+## 分析不足反思（用于完善 design-analysis）
+
+### 清单遗漏
+- 问题：xxx
+- 建议：design-analysis 中增加 xxx
+
+### 描述不清
+- 问题：xxx
+- 建议：分析清单中必填 xxx
+
+### 对 design-analysis 的补充建议
+- [ ] 在常见遗漏检查点中增加：……
+- [ ] 在文档结构中增加：……
+```

package/.agents/skills/domains/web/ui-verification/rules/writing-alignment.md

@@ -1,44 +1,44 @@
----
-title: 对齐方式规则
-impact: MEDIUM
-impactDescription: 确保图标与文本、按钮等元素的对齐正确
-tags: writing, alignment, flexbox, icon, text
----
-
-## 对齐方式规则
-
-验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
-
-**核心原则**：
-- ✅ **图标与文本的对齐**：检查 `align-items` 值，常见应为 `center`（水平居中）而非 `flex-start`（顶部对齐）
-- ✅ **按钮、卡片等元素的定位**：仔细对照设计稿的 `padding`、`margin`、定位规则
-
-**Incorrect（图标与文本顶部对齐）：**
-
-```css
-.icon-text {
-  display: flex;
-  align-items: flex-start; /* 顶部对齐，视觉不协调 */
-}
-```
-
-**Correct（图标与文本居中对齐）：**
-
-```css
-.icon-text {
-  display: flex;
-  align-items: center; /* 水平居中，视觉协调 */
-}
-```
-
-**验收时检查**：
-- [ ] 图标与文本的对齐方式是否正确（`align-items: center` 而非 `flex-start`）？
-- [ ] 按钮、卡片的 padding、margin、定位是否符合设计稿？
-- [ ] 绝对定位的元素是否正确设置了 `left`、`right`、`top`、`bottom`？
-
-**验收时特别关注**：
-- 必须用浏览器工具实际查看渲染效果（特别是按钮、对齐等细节）
-- 检查对齐方式是否正确设置
-
-**相关规则**：
-- `errors-alignment.md` - 对齐方式错误
+---
+title: 对齐方式规则
+impact: MEDIUM
+impactDescription: 确保图标与文本、按钮等元素的对齐正确
+tags: writing, alignment, flexbox, icon, text
+---
+
+## 对齐方式规则
+
+验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
+
+**核心原则**：
+- ✅ **图标与文本的对齐**：检查 `align-items` 值，常见应为 `center`（水平居中）而非 `flex-start`（顶部对齐）
+- ✅ **按钮、卡片等元素的定位**：仔细对照设计稿的 `padding`、`margin`、定位规则
+
+**Incorrect（图标与文本顶部对齐）：**
+
+```css
+.icon-text {
+  display: flex;
+  align-items: flex-start; /* 顶部对齐，视觉不协调 */
+}
+```
+
+**Correct（图标与文本居中对齐）：**
+
+```css
+.icon-text {
+  display: flex;
+  align-items: center; /* 水平居中，视觉协调 */
+}
+```
+
+**验收时检查**：
+- [ ] 图标与文本的对齐方式是否正确（`align-items: center` 而非 `flex-start`）？
+- [ ] 按钮、卡片的 padding、margin、定位是否符合设计稿？
+- [ ] 绝对定位的元素是否正确设置了 `left`、`right`、`top`、`bottom`？
+
+**验收时特别关注**：
+- 必须用浏览器工具实际查看渲染效果（特别是按钮、对齐等细节）
+- 检查对齐方式是否正确设置
+
+**相关规则**：
+- `errors-alignment.md` - 对齐方式错误

package/.agents/skills/domains/web/ui-verification/rules/writing-element-completeness.md

@@ -1,63 +1,63 @@
----
-title: 元素展示完整性规则
-impact: MEDIUM
-impactDescription: 避免展示不完整的元素，提升视觉体验
-tags: writing, layout, element, overflow, completeness
----
-
-## 元素展示完整性规则
-
-验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
-
-**核心原则**：
-- ❌ **不应展示不完整的元素**（如半截卡片、被裁切的按钮）
-- ✅ **要么完整展示，要么完全不展示**（使用 `overflow: hidden` 配合数量控制，而非视觉截断）
-
-**Incorrect（元素被截断显示）：**
-
-```tsx
-function CardList({ items }: { items: Item[] }) {
-  return (
-    <div className="card-list">
-      {items.map(item => (
-        <Card key={item.id} item={item} />
-      ))}
-    </div>
-  )
-}
-
-/* CSS: 没有控制，导致半截卡片显示 */
-.card-list {
-  display: flex;
-  overflow-x: auto; /* 横向滚动，可能显示半截卡片 */
-}
-```
-
-**Correct（完整展示或完全不展示）：**
-
-```tsx
-function CardList({ items }: { items: Item[] }) {
-  const visibleCount = Math.floor(containerWidth / cardWidth)
-  const visibleItems = items.slice(0, visibleCount)
-  
-  return (
-    <div className="card-list">
-      {visibleItems.map(item => (
-        <Card key={item.id} item={item} />
-      ))}
-    </div>
-  )
-}
-
-/* CSS: 使用 overflow: hidden 配合数量控制 */
-.card-list {
-  display: flex;
-  overflow: hidden; /* 隐藏超出部分 */
-}
-```
-
-**验收时检查**：
-- [ ] 是否有元素被截断显示（半截卡片等）？
-
-**看到设计稿时，默认不会出现以下反审美的效果**：
-- 元素截断
+---
+title: 元素展示完整性规则
+impact: MEDIUM
+impactDescription: 避免展示不完整的元素，提升视觉体验
+tags: writing, layout, element, overflow, completeness
+---
+
+## 元素展示完整性规则
+
+验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
+
+**核心原则**：
+- ❌ **不应展示不完整的元素**（如半截卡片、被裁切的按钮）
+- ✅ **要么完整展示，要么完全不展示**（使用 `overflow: hidden` 配合数量控制，而非视觉截断）
+
+**Incorrect（元素被截断显示）：**
+
+```tsx
+function CardList({ items }: { items: Item[] }) {
+  return (
+    <div className="card-list">
+      {items.map(item => (
+        <Card key={item.id} item={item} />
+      ))}
+    </div>
+  )
+}
+
+/* CSS: 没有控制，导致半截卡片显示 */
+.card-list {
+  display: flex;
+  overflow-x: auto; /* 横向滚动，可能显示半截卡片 */
+}
+```
+
+**Correct（完整展示或完全不展示）：**
+
+```tsx
+function CardList({ items }: { items: Item[] }) {
+  const visibleCount = Math.floor(containerWidth / cardWidth)
+  const visibleItems = items.slice(0, visibleCount)
+  
+  return (
+    <div className="card-list">
+      {visibleItems.map(item => (
+        <Card key={item.id} item={item} />
+      ))}
+    </div>
+  )
+}
+
+/* CSS: 使用 overflow: hidden 配合数量控制 */
+.card-list {
+  display: flex;
+  overflow: hidden; /* 隐藏超出部分 */
+}
+```
+
+**验收时检查**：
+- [ ] 是否有元素被截断显示（半截卡片等）？
+
+**看到设计稿时，默认不会出现以下反审美的效果**：
+- 元素截断

package/.agents/skills/domains/web/ui-verification/rules/writing-list-layout.md

@@ -1,75 +1,75 @@
----
-title: 横向列表布局规则
-impact: HIGH
-impactDescription: 确保列表铺满宽度，换行后列宽一致
-tags: writing, layout, grid, flex, list
----
-
-## 横向列表布局规则
-
-验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
-
-**核心原则**：
-- ❌ **不应限制一行几个元素而留空白**（如固定列数导致右侧大片空白）
-- ❌ **不应出现元素被截断**（如半截卡片显示）
-- ✅ **应铺满可用宽度**，能放几个就放几个，不够再换行
-- ✅ **换行后应保持列宽一致**（使用 Grid 而非 Flex）
-
-**布局选择指导**：
-
-**Grid**：适合等列宽、多行一致的情况
-
-```css
-/* Correct: 使用 Grid 实现自适应列数 */
-.grid-container {
-  width: 100%; /* 必须明确宽度 */
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-```
-
-**Flex**：适合自适应但每行独立计算的情况
-
-```css
-/* Correct: Flex 需要铺满时使用 flex-grow */
-.flex-container {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.flex-item {
-  flex: 1 1 minmax(280px, 1fr); /* 允许增长 */
-  /* 不要用 flex: 0 1 fixed-width */
-}
-```
-
-**Incorrect（Grid 容器宽度不确定）：**
-
-```css
-.grid-container {
-  /* 缺少 width，auto-fill 可能只算出一列 */
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-}
-```
-
-**Incorrect（Flex 不铺满，留空白）：**
-
-```css
-.flex-item {
-  flex: 0 1 280px; /* 不允许增长，右侧留空白 */
-}
-```
-
-**验收时检查**：
-- [ ] 横向列表是否铺满宽度，不会留大片空白？
-- [ ] 列表换行后列宽是否一致（使用 Grid）？
-- [ ] 是否有元素被截断显示（半截卡片等）？
-- [ ] Grid 容器是否有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列？
-- [ ] Flex 布局需要铺满时是否使用了 `flex-grow: 1`，而非 `flex: 0 1 fixed-width`？
-
-**相关规则**：
-- `errors-grid-container-width.md` - Grid 容器宽度问题
-- `errors-flex-layout.md` - Flex 布局问题
-- `errors-flex-column-width.md` - 换行后列宽不一致
+---
+title: 横向列表布局规则
+impact: HIGH
+impactDescription: 确保列表铺满宽度，换行后列宽一致
+tags: writing, layout, grid, flex, list
+---
+
+## 横向列表布局规则
+
+验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
+
+**核心原则**：
+- ❌ **不应限制一行几个元素而留空白**（如固定列数导致右侧大片空白）
+- ❌ **不应出现元素被截断**（如半截卡片显示）
+- ✅ **应铺满可用宽度**，能放几个就放几个，不够再换行
+- ✅ **换行后应保持列宽一致**（使用 Grid 而非 Flex）
+
+**布局选择指导**：
+
+**Grid**：适合等列宽、多行一致的情况
+
+```css
+/* Correct: 使用 Grid 实现自适应列数 */
+.grid-container {
+  width: 100%; /* 必须明确宽度 */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+```
+
+**Flex**：适合自适应但每行独立计算的情况
+
+```css
+/* Correct: Flex 需要铺满时使用 flex-grow */
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-item {
+  flex: 1 1 minmax(280px, 1fr); /* 允许增长 */
+  /* 不要用 flex: 0 1 fixed-width */
+}
+```
+
+**Incorrect（Grid 容器宽度不确定）：**
+
+```css
+.grid-container {
+  /* 缺少 width，auto-fill 可能只算出一列 */
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+}
+```
+
+**Incorrect（Flex 不铺满，留空白）：**
+
+```css
+.flex-item {
+  flex: 0 1 280px; /* 不允许增长，右侧留空白 */
+}
+```
+
+**验收时检查**：
+- [ ] 横向列表是否铺满宽度，不会留大片空白？
+- [ ] 列表换行后列宽是否一致（使用 Grid）？
+- [ ] 是否有元素被截断显示（半截卡片等）？
+- [ ] Grid 容器是否有明确宽度（如 `width: 100%`），否则 `auto-fill` 可能只算出一列？
+- [ ] Flex 布局需要铺满时是否使用了 `flex-grow: 1`，而非 `flex: 0 1 fixed-width`？
+
+**相关规则**：
+- `errors-grid-container-width.md` - Grid 容器宽度问题
+- `errors-flex-layout.md` - Flex 布局问题
+- `errors-flex-column-width.md` - 换行后列宽不一致

package/.agents/skills/domains/web/ui-verification/rules/writing-page-container-width.md

@@ -1,37 +1,37 @@
----
-title: 页面容器宽度规则
-impact: HIGH
-impactDescription: 避免右侧大片留白，提升页面自适应能力
-tags: writing, layout, container, responsive, max-width
----
-
-## 页面容器宽度规则
-
-验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
-
-**核心原则**：页面应自适应视口宽度，避免割裂的留白效果。除非设计稿明确要求固定宽度，否则默认不限制 `max-width`。
-
-**Incorrect（写死 max-width 导致右侧大片留白）：**
-
-```css
-.page-container {
-  max-width: 1200px; /* 写死宽度，未考虑响应式 */
-  margin: 0 auto;
-}
-```
-
-**Correct（自适应视口宽度）：**
-
-```css
-.page-container {
-  width: 100%; /* 自适应视口宽度 */
-  padding: 0 16px; /* 可选：添加内边距 */
-}
-```
-
-**验收时检查**：
-- [ ] 页面容器是否有不必要的 `max-width` 限制？
-- [ ] 是否有右侧大片留白的问题？
-
-**相关规则**：
-- `errors-page-container-width.md` - 页面容器宽度限制错误
+---
+title: 页面容器宽度规则
+impact: HIGH
+impactDescription: 避免右侧大片留白，提升页面自适应能力
+tags: writing, layout, container, responsive, max-width
+---
+
+## 页面容器宽度规则
+
+验收时发现的问题，很多是**编写代码时缺乏主流网页设计常识**导致的。应在实现阶段就主动避免这些反审美的效果，而不是等到验收才发现。
+
+**核心原则**：页面应自适应视口宽度，避免割裂的留白效果。除非设计稿明确要求固定宽度，否则默认不限制 `max-width`。
+
+**Incorrect（写死 max-width 导致右侧大片留白）：**
+
+```css
+.page-container {
+  max-width: 1200px; /* 写死宽度，未考虑响应式 */
+  margin: 0 auto;
+}
+```
+
+**Correct（自适应视口宽度）：**
+
+```css
+.page-container {
+  width: 100%; /* 自适应视口宽度 */
+  padding: 0 16px; /* 可选：添加内边距 */
+}
+```
+
+**验收时检查**：
+- [ ] 页面容器是否有不必要的 `max-width` 限制？
+- [ ] 是否有右侧大片留白的问题？
+
+**相关规则**：
+- `errors-page-container-width.md` - 页面容器宽度限制错误

package/.agents/skills/domains/web/web-design-guidelines/SKILL.md

@@ -1,40 +1,40 @@
----
-name: web-design-guidelines
-description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-compatibility: Requires network access to fetch the latest Web Interface Guidelines and local file access to the code or patterns being reviewed.
-metadata:
-  author: vercel
-  version: "1.0.0"
-  argument-hint: <file-or-pattern>
----
-
-# Web Interface Guidelines
-
-Review files for compliance with Web Interface Guidelines.
-
-## How It Works
-
-1. Fetch the latest guidelines from the source URL below
-2. Read the specified files (or prompt user for files/pattern)
-3. Check against all rules in the fetched guidelines
-4. Output findings in the terse `file:line` format
-
-## Guidelines Source
-
-Fetch fresh guidelines before each review:
-
-```
-https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
-```
-
-Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
-
-## Usage
-
-When a user provides a file or pattern argument:
-1. Fetch guidelines from the source URL above
-2. Read the specified files
-3. Apply all rules from the fetched guidelines
-4. Output findings using the format specified in the guidelines
-
-If no files specified, ask the user which files to review.
+---
+name: web-design-guidelines
+description: Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
+compatibility: Requires network access to fetch the latest Web Interface Guidelines and local file access to the code or patterns being reviewed.
+metadata:
+  author: vercel
+  version: "1.0.0"
+  argument-hint: <file-or-pattern>
+---
+
+# Web Interface Guidelines
+
+Review files for compliance with Web Interface Guidelines.
+
+## How It Works
+
+1. Fetch the latest guidelines from the source URL below
+2. Read the specified files (or prompt user for files/pattern)
+3. Check against all rules in the fetched guidelines
+4. Output findings in the terse `file:line` format
+
+## Guidelines Source
+
+Fetch fresh guidelines before each review:
+
+```
+https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
+```
+
+Use WebFetch to retrieve the latest rules. The fetched content contains all the rules and output format instructions.
+
+## Usage
+
+When a user provides a file or pattern argument:
+1. Fetch guidelines from the source URL above
+2. Read the specified files
+3. Apply all rules from the fetched guidelines
+4. Output findings using the format specified in the guidelines
+
+If no files specified, ask the user which files to review.

package/.agents/skills/profiles/nestjs/README.md

@@ -1,4 +1,4 @@
-# NestJS Profile Skills
-
-当前版本暂未内置 NestJS 专属技能目录内容，本目录仅作为 profile（技术栈）占位入口，
-用于保持 registry（注册表）引用完整并通过同步校验。
+# NestJS Profile Skills
+
+当前版本暂未内置 NestJS 专属技能目录内容，本目录仅作为 profile（技术栈）占位入口，
+用于保持 registry（注册表）引用完整并通过同步校验。

package/.agents/skills/profiles/node-tooling/README.md

@@ -1,9 +1,9 @@
-# Node.js Tooling Profile Skills
-
-此目录存放 Node.js Tooling profile 专属技能。
-
-当前已规划（待实现）的技能：
-
-- `create-command` — 按团队规范创建 CLI 命令及参数定义
-- `create-contract` — 按团队规范创建 Contract / Schema 文件
-- `create-worker` — 按团队规范创建 Worker 任务
+# Node.js Tooling Profile Skills
+
+此目录存放 Node.js Tooling profile 专属技能。
+
+当前已规划（待实现）的技能：
+
+- `create-command` — 按团队规范创建 CLI 命令及参数定义
+- `create-contract` — 按团队规范创建 Contract / Schema 文件
+- `create-worker` — 按团队规范创建 Worker 任务