ui-freezelisted

Protects design and theme files from unintended changes. Locks tailwind.config, global CSS, and theme variables. Requires explicit confirmation before modifying UI components. Activate on changes to CSS, theme config, or layout components.
freitasp1/claude-code-skills · ★ 8 · Web & Frontend · score 68

Install: claude install-skill freitasp1/claude-code-skills

# 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: 1. **STOP** - Don't automatically make changes 2. **SHOW** - Display exactly what would change 3. **JUSTIFY** - Why is this change needed? 4. **IMPACT** - Which components are affected? 5. **PREVIEW** - If possible, show visual diff 6. **CONFIRM** - Explicit "Yes, change design" ### On Changes to WARNING Files: 1. **NOTE** - "This file affects the UI" 2. **JUSTIFY** - Brief explanation of change 3. **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