@tinkcarlos/skillora 0.2.0

package/.claude/skills/frontend-design/references/style-modification-rules.md

@@ -0,0 +1,335 @@
+# 样式修改规则 (Style Modification Rules)
+
+本文档定义前端样式修改的边界、规则和禁止操作，确保只修改视觉表现而不影响业务逻辑。
+
+## 目录
+
+- [1. 核心原则](#1-核心原则)
+- [2. 允许修改的范围](#2-允许修改的范围)
+- [3. 禁止操作清单](#3-禁止操作清单)
+- [4. 深层页面覆盖清单](#4-深层页面覆盖清单)
+- [5. 样式一致性检查](#5-样式一致性检查)
+- [6. 修改前检查流程](#6-修改前检查流程)
+
+---
+
+## 1. 核心原则
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  🔴 样式修改黄金法则                                              │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                  │
+│  ✅ 只改外观 (HOW it looks)                                      │
+│  ❌ 不改行为 (WHAT it does)                                      │
+│                                                                  │
+│  ✅ 修改：颜色、字体、间距、动画、布局位置                        │
+│  ❌ 不改：事件处理、数据流、API调用、状态管理、路由逻辑           │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+**判断标准**：如果删除这行代码，功能是否还能正常工作？
+- 是 → 可以修改（纯样式）
+- 否 → 禁止修改（涉及逻辑）
+
+---
+
+## 2. 允许修改的范围
+
+### 2.1 CSS/样式文件 (✅ 完全允许)
+
+| 类型 | 示例 | 说明 |
+|------|------|------|
+| 颜色 | `color`, `background`, `border-color` | 所有颜色属性 |
+| 字体 | `font-family`, `font-size`, `font-weight` | 排版相关 |
+| 间距 | `margin`, `padding`, `gap` | 空间布局 |
+| 尺寸 | `width`, `height`, `max-width` | 元素大小 |
+| 边框 | `border`, `border-radius`, `outline` | 边框样式 |
+| 阴影 | `box-shadow`, `text-shadow` | 阴影效果 |
+| 动画 | `transition`, `animation`, `transform` | 过渡动画 |
+| 布局 | `display`, `flex`, `grid`, `position` | 布局方式 |
+| 背景 | `background-image`, `gradient` | 背景效果 |
+| 滤镜 | `filter`, `backdrop-filter`, `opacity` | 视觉滤镜 |
+
+### 2.2 HTML/JSX 结构 (⚠️ 有限允许)
+
+| 允许 | 禁止 |
+|------|------|
+| 添加/修改 `className` | 修改 `onClick` 等事件 |
+| 添加/修改 `style` 属性 | 修改 `href`/`src` 等资源路径 |
+| 添加装饰性元素 (图标、分隔线) | 删除功能性元素 |
+| 调整元素顺序 (纯视觉) | 修改表单 `name`/`id` |
+| 添加 `aria-*` 无障碍属性 | 修改 `data-*` 业务属性 |
+
+### 2.3 组件 Props (⚠️ 仅样式相关)
+
+```jsx
+// ✅ 允许修改
+<Button variant="primary" size="lg" className="custom-btn" />
+<Card shadow="md" rounded="xl" />
+
+// ❌ 禁止修改
+<Button onClick={handleSubmit} disabled={isLoading} />
+<Input value={formData.email} onChange={handleChange} />
+```
+
+---
+
+## 3. 禁止操作清单
+
+### 3.1 🔴 绝对禁止 (会破坏功能)
+
+| 禁止操作 | 原因 | 示例 |
+|----------|------|------|
+| 修改事件处理函数 | 改变业务逻辑 | `onClick`, `onSubmit`, `onChange` |
+| 修改状态管理代码 | 破坏数据流 | `useState`, `useReducer`, Redux |
+| 修改 API 调用 | 影响数据获取 | `fetch`, `axios`, GraphQL queries |
+| 修改路由配置 | 破坏导航 | `react-router`, `next/router` |
+| 修改表单验证逻辑 | 影响数据校验 | `yup`, `zod`, 自定义验证 |
+| 删除条件渲染逻辑 | 破坏显示逻辑 | `{isLoading && <Spinner />}` |
+| 修改 `key` 属性 | 破坏 React 渲染 | `key={item.id}` |
+| 修改环境变量引用 | 破坏配置 | `process.env.API_URL` |
+
+### 3.2 ⚠️ 需要确认 (可能影响功能)
+
+| 操作 | 风险 | 处理方式 |
+|------|------|----------|
+| 修改 `z-index` | 可能遮挡功能元素 | 测试所有弹窗/下拉 |
+| 修改 `display: none` | 可能隐藏功能 | 确认是纯装饰元素 |
+| 修改 `pointer-events` | 可能禁用交互 | 仅用于装饰层 |
+| 修改 `overflow` | 可能裁剪内容 | 测试滚动行为 |
+| 修改 `position: fixed` | 可能影响布局 | 测试各屏幕尺寸 |
+
+### 3.3 代码识别模式
+
+```javascript
+// 🔴 看到这些关键词 → 不要修改
+const [state, setState] = useState()  // 状态
+useEffect(() => {})                    // 副作用
+fetch('/api/...')                      // API
+router.push()                          // 路由
+dispatch(action)                       // Redux
+emit('event')                          // 事件
+validate()                             // 验证
+submit()                               // 提交
+
+// ✅ 看到这些关键词 → 可以修改
+className="..."                        // 类名
+style={{...}}                          // 内联样式
+variants={{...}}                       // 动画变体
+theme={{...}}                          // 主题配置
+```
+
+---
+
+## 4. 深层页面覆盖清单
+
+修改 UI 时，必须检查并统一以下所有元素的样式：
+
+### 4.1 弹窗类 (Modals & Dialogs)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Modal/Dialog | 背景遮罩、圆角、阴影、标题样式、关闭按钮 |
+| Drawer/Sidebar | 滑入动画、背景、宽度、头部样式 |
+| Popover | 箭头样式、背景、边框、阴影 |
+| Dropdown | 菜单项样式、hover 状态、分隔线 |
+| Context Menu | 右键菜单样式、图标对齐 |
+
+### 4.2 提示类 (Notifications)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Toast | 位置、动画、图标、颜色变体 (success/error/warning/info) |
+| Alert | 边框、背景、图标、关闭按钮 |
+| Tooltip | 背景色、箭头、字体大小、延迟 |
+| Badge | 大小、颜色、位置、动画 |
+| Progress | 颜色、高度、动画、标签 |
+
+### 4.3 表单类 (Form Elements)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Input | 边框、focus 状态、placeholder、错误状态 |
+| Select | 下拉箭头、选项样式、多选标签 |
+| Checkbox/Radio | 选中状态、大小、颜色 |
+| Switch/Toggle | 轨道颜色、滑块样式、动画 |
+| Slider | 轨道、滑块、刻度、标签 |
+| DatePicker | 日历样式、选中日期、导航按钮 |
+
+### 4.4 数据展示类 (Data Display)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Table | 表头、行 hover、边框、分页 |
+| Card | 阴影、圆角、头部、底部 |
+| List | 分隔线、图标、hover 状态 |
+| Avatar | 大小、边框、状态指示器 |
+| Tag/Chip | 颜色变体、关闭按钮、大小 |
+
+### 4.5 导航类 (Navigation)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Navbar | 背景、阴影、logo、菜单项 |
+| Sidebar | 宽度、折叠状态、菜单项、图标 |
+| Tabs | 选中状态、下划线、图标 |
+| Breadcrumb | 分隔符、链接样式、当前项 |
+| Pagination | 按钮样式、当前页、禁用状态 |
+
+### 4.6 反馈类 (Feedback)
+
+| 组件 | 需要统一的样式 |
+|------|----------------|
+| Loading/Spinner | 大小、颜色、动画 |
+| Skeleton | 颜色、动画、形状 |
+| Empty State | 图标、文字、操作按钮 |
+| Error Page | 布局、图标、返回按钮 |
+
+---
+
+## 5. 样式一致性检查
+
+### 5.1 颜色一致性
+
+```css
+/* 定义 CSS 变量 */
+:root {
+  /* 主色 */
+  --color-primary: #6366F1;
+  --color-primary-hover: #4F46E5;
+  --color-primary-light: #EEF2FF;
+
+  /* 语义色 */
+  --color-success: #10B981;
+  --color-warning: #F59E0B;
+  --color-error: #EF4444;
+  --color-info: #3B82F6;
+
+  /* 中性色 */
+  --color-text-primary: #111827;
+  --color-text-secondary: #6B7280;
+  --color-border: #E5E7EB;
+  --color-background: #F9FAFB;
+}
+```
+
+**检查清单**：
+- [ ] 所有主色使用 `--color-primary`
+- [ ] 所有成功状态使用 `--color-success`
+- [ ] 所有错误状态使用 `--color-error`
+- [ ] 所有边框使用 `--color-border`
+
+### 5.2 字体一致性
+
+```css
+:root {
+  /* 字体族 */
+  --font-display: 'Clash Display', sans-serif;
+  --font-body: 'Satoshi', sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+
+  /* 字号 */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 1rem;     /* 16px */
+  --text-lg: 1.125rem;   /* 18px */
+  --text-xl: 1.25rem;    /* 20px */
+  --text-2xl: 1.5rem;    /* 24px */
+  --text-3xl: 1.875rem;  /* 30px */
+  --text-4xl: 2.25rem;   /* 36px */
+}
+```
+
+**检查清单**：
+- [ ] 标题使用 `--font-display`
+- [ ] 正文使用 `--font-body`
+- [ ] 代码使用 `--font-mono`
+- [ ] 字号使用变量而非硬编码
+
+### 5.3 间距一致性
+
+```css
+:root {
+  --space-1: 0.25rem;   /* 4px */
+  --space-2: 0.5rem;    /* 8px */
+  --space-3: 0.75rem;   /* 12px */
+  --space-4: 1rem;      /* 16px */
+  --space-5: 1.25rem;   /* 20px */
+  --space-6: 1.5rem;    /* 24px */
+  --space-8: 2rem;      /* 32px */
+  --space-10: 2.5rem;   /* 40px */
+  --space-12: 3rem;     /* 48px */
+}
+```
+
+### 5.4 圆角一致性
+
+```css
+:root {
+  --radius-sm: 0.25rem;   /* 4px - 小元素 */
+  --radius-md: 0.5rem;    /* 8px - 按钮、输入框 */
+  --radius-lg: 0.75rem;   /* 12px - 卡片 */
+  --radius-xl: 1rem;      /* 16px - 大卡片、弹窗 */
+  --radius-full: 9999px;  /* 圆形 */
+}
+```
+
+---
+
+## 6. 修改前检查流程
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  样式修改前检查流程                                               │
+├─────────────────────────────────────────────────────────────────┤
+│                                                                  │
+│  Step 1: 识别修改范围                                            │
+│  ├─ 列出所有需要修改的文件                                       │
+│  ├─ 标记每个文件的类型 (CSS/组件/配置)                           │
+│  └─ 确认没有遗漏深层页面组件                                     │
+│                                                                  │
+│  Step 2: 检查禁止操作                                            │
+│  ├─ 搜索事件处理函数 (onClick, onChange...)                      │
+│  ├─ 搜索状态管理代码 (useState, Redux...)                        │
+│  └─ 确认不会修改这些代码                                         │
+│                                                                  │
+│  Step 3: 提取设计变量                                            │
+│  ├─ 定义颜色变量                                                 │
+│  ├─ 定义字体变量                                                 │
+│  ├─ 定义间距变量                                                 │
+│  └─ 确保所有组件使用这些变量                                     │
+│                                                                  │
+│  Step 4: 执行修改                                                │
+│  ├─ 按组件类型分批修改                                           │
+│  ├─ 每批修改后测试功能                                           │
+│  └─ 记录所有变更                                                 │
+│                                                                  │
+│  Step 5: 验证一致性                                              │
+│  ├─ 检查所有弹窗/提示样式统一                                    │
+│  ├─ 检查所有表单元素样式统一                                     │
+│  └─ 检查响应式布局正常                                           │
+│                                                                  │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 快速参考卡片
+
+```
+╔═══════════════════════════════════════════════════════════════╗
+║  样式修改速查                                                   ║
+╠═══════════════════════════════════════════════════════════════╣
+║                                                                ║
+║  ✅ 可以改: CSS属性、className、style、装饰元素、动画          ║
+║  ❌ 不能改: onClick、useState、fetch、router、validate         ║
+║                                                                ║
+║  必须覆盖: Modal、Toast、Tooltip、Form、Table、Nav             ║
+║  必须统一: 颜色变量、字体变量、间距变量、圆角变量               ║
+║                                                                ║
+║  修改前: 列范围 → 查禁止 → 提变量 → 执行 → 验证                ║
+║                                                                ║
+╚═══════════════════════════════════════════════════════════════╝
+```