Can I integrate this with my testing suite?

Absolutely. It includes procedures for updating Playwright snapshots and committing new baseline screenshots after approved design changes.

What files are protected by UI Freeze?

It locks critical theme files like tailwind.config, index.css, and globals.css, while providing warnings for layout components like Header, Footer, and App wrappers.

What happens if an unintended design change is committed?

The skill provides emergency rollback commands to quickly restore theme files to their last stable state using Git tags.

Does this skill enforce specific coding standards?

Yes, it enforces a 'Single Source of Truth' policy where colors and styles must be defined via CSS variables rather than hardcoded hex codes or utility classes.

How does the confirmation process work?

When a locked file is targeted, Claude must display the exact change, justify the need, assess the impact, and require the user to explicitly type 'Yes, change design' before proceeding.

UI Freeze & Design Protection

Name: UI Freeze & Design Protection
Author: mwathiben

bymwathiben

0•

设计工具

Safeguards frontend design systems and theme configurations by preventing unintended global style modifications without explicit confirmation.

UI Freeze is a specialized Claude Code skill designed to maintain design system integrity by locking critical theme files and UI components. It prevents Claude from making accidental or destructive changes to Tailwind configurations, global CSS, and layout structures by enforcing a strict 'Stop-Show-Justify' workflow. This skill is essential for developers working on production applications who want to ensure their brand identity and visual consistency remain intact while using AI assistance for feature development and refactoring.

主要功能

010 GitHub stars

02Automatic locking of Tailwind and global CSS configuration files

03Mandatory impact assessment and justification for design-altering changes

04Visual diff and preview prompts before modifying critical layout components

05Integration with visual regression testing and emergency rollback commands

06Enforcement of CSS variable usage over hardcoded style values

使用场景

01Preventing accidental global style regressions during large-scale refactors

02Maintaining design system consistency across multiple team members using AI

03Auditing UI changes to ensure they align with established brand guidelines and CSS variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mwathiben/hush-private-bookmarks ui-freeze

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Automatic locking of Tailwind and global CSS configuration files

03Mandatory impact assessment and justification for design-altering changes

04Visual diff and preview prompts before modifying critical layout components

05Integration with visual regression testing and emergency rollback commands

06Enforcement of CSS variable usage over hardcoded style values

使用场景

01Preventing accidental global style regressions during large-scale refactors

02Maintaining design system consistency across multiple team members using AI

03Auditing UI changes to ensure they align with established brand guidelines and CSS variables

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mwathiben/hush-private-bookmarks ui-freeze

For use in Claude.ai and ChatGPT