UI Freeze
Skill to protect design and theme files from unintended changes
Trigger
This skill activates automatically on changes to:
Critical Theme Files (LOCKED)
tailwind.config.*- Tailwind configuration**/index.css- Global styles**/globals.css- Global CSS variables**/theme.css- Theme variables**/variables.css- CSS custom properties
Important UI Components (WARNING)
**/Header.*- Navigation & Branding**/Footer.*- Footer & Legal Links**/App.*- Root Layout & Theme Provider**/Layout.*- Main Layout wrapper
Rules
On Changes to LOCKED Files:
- STOP - Don't automatically make changes
- SHOW - Display exactly what would change
- JUSTIFY - Why is this change needed?
- IMPACT - Which components are affected?
- PREVIEW - If possible, show visual diff
- CONFIRM - Explicit "Yes, change design"
On Changes to WARNING Files:
- NOTE - "This file affects the UI"
- JUSTIFY - Brief explanation of change
- PROCEED - Can continue without explicit confirmation
Example Dialog
User: "Change the background color to gray"
Claude (with this skill):
UI FREEZE ACTIVE
You want to modify a theme file. This affects:
- File: tailwind.config.ts
- Change: backgroundColor from #0f172a to #374151
- Affected pages: ALL (global style)
Last stable version: v1.0-stable-ui
Preview:
- Before: Dark blue background (#0f172a)
- After: Gray background (#374151)
Should I proceed? (Answer with "Yes, change design")
Alternative: "Show me a before/after screenshot"
Golden Screenshots (Reference)
Define baseline screenshots for visual regression:
| Page | File | Last Check |
|---|---|---|
| Login | tests/screenshots/login-baseline.png | - |
| Dashboard | tests/screenshots/dashboard-baseline.png | - |
| Settings | tests/screenshots/settings-baseline.png | - |
CSS Variables (Single Source of Truth)
All colors must be defined via CSS Variables:
/* CORRECT - in theme.css or tailwind.config */
--color-primary: #3B82F6;
--color-background: #0f172a;
/* WRONG - hard values in components */
background-color: #0f172a; /* Not allowed */
className="bg-[#0f172a]" /* Not allowed */
Integration with Visual Regression
After every approved design change:
- Run
npx playwright test --update-snapshots - Commit new baseline screenshots
- Update release tag (e.g.,
v1.1-ui-gray-theme)
Emergency Rollback
If design was accidentally changed:
# Restore last stable state
git checkout <last-stable-tag> -- tailwind.config.ts src/index.css
# Or: Reset all theme files
git checkout <last-stable-tag> -- $(git diff --name-only HEAD <last-stable-tag> | grep -E '\.(css|config)')
Configuration
Add to your CLAUDE.md:
### UI Protection
Locked Files:
- tailwind.config.*
- src/index.css
- src/globals.css
Last Stable UI Tag: v1.0-stable-ui
Design System:
- Primary: #3B82F6
- Background: #0f172a
- Use CSS variables only
Origin
Originally developed for fabrikIQ - AI-powered manufacturing data analysis.
License
MIT - Free to use and modify