name: ui-freeze description: 保护设计和主题文件免受意外更改。锁定tailwind.config、全局CSS和主题变量。在修改UI组件前需要明确确认。当CSS、主题配置或布局组件发生更改时激活。

UI 保护锁定

用于保护设计和主题文件免受意外更改的技能

触发条件

此技能在以下更改时自动激活：

关键主题文件（锁定）

tailwind.config.* - Tailwind配置
**/index.css - 全局样式
**/globals.css - 全局CSS变量
**/theme.css - 主题变量
**/variables.css - CSS自定义属性

重要UI组件（警告）

**/Header.* - 导航和品牌
**/Footer.* - 页脚和法律链接
**/App.* - 根布局和主题提供者
**/Layout.* - 主布局包装器

规则

对锁定文件的更改：

停止 - 不要自动进行更改
显示 - 准确显示会更改的内容
理由 - 为什么需要此更改？
影响 - 哪些组件会受到影响？
预览 - 如果可能，显示视觉差异
确认 - 明确的“是，更改设计”

对警告文件的更改：

注意 - “此文件影响UI”
理由 - 简要说明更改原因
继续 - 无需明确确认即可继续

示例对话

用户: “将背景颜色更改为灰色”

Claude（使用此技能）:

UI 保护锁定激活

您想修改主题文件。这将影响：
- 文件：tailwind.config.ts
- 更改：backgroundColor从#0f172a到#374151
- 受影响的页面：所有（全局样式）

最后稳定版本：v1.0-stable-ui

预览：
- 之前：深蓝色背景（#0f172a）
- 之后：灰色背景（#374151）

是否继续？（用“是，更改设计”回答）
替代方案：“显示前后对比截图”

黄金截图（参考）

为视觉回归定义基线截图：

页面	文件	最后检查
登录	`tests/screenshots/login-baseline.png`	-
仪表板	`tests/screenshots/dashboard-baseline.png`	-
设置	`tests/screenshots/settings-baseline.png`	-

CSS变量（单一真实来源）

所有颜色必须通过CSS变量定义：

/* 正确 - 在theme.css或tailwind.config中 */
--color-primary: #3B82F6;
--color-background: #0f172a;

/* 错误 - 组件中的硬编码值 */
background-color: #0f172a; /* 不允许 */
className="bg-[#0f172a]"   /* 不允许 */

与视觉回归集成

每次批准的设计更改后：

运行 npx playwright test --update-snapshots
提交新的基线截图
更新发布标签（例如，v1.1-ui-gray-theme）

紧急回滚

如果设计被意外更改：

# 恢复最后稳定状态
git checkout <last-stable-tag> -- tailwind.config.ts src/index.css

# 或：重置所有主题文件
git checkout <last-stable-tag> -- $(git diff --name-only HEAD <last-stable-tag> | grep -E '\.(css|config)')

配置

添加到您的CLAUDE.md：

### UI保护

锁定文件：
- tailwind.config.*
- src/index.css
- src/globals.css

最后稳定UI标签：v1.0-stable-ui

设计系统：
- 主要颜色： #3B82F6
- 背景颜色： #0f172a
- 仅使用CSS变量

起源

最初为fabrikIQ开发 - AI驱动的制造数据分析。

许可证

MIT - 免费使用和修改