How does UI Freeze prevent design regressions?

It monitors changes to critical files like tailwind.config.ts and global CSS, stopping Claude from applying changes until the developer provides explicit confirmation and justification.

Which files are protected by this skill?

It locks Tailwind configurations, index.css, and globals.css, while providing warnings for changes to root layout components like Header, Footer, and App files.

Does it support visual regression testing?

Yes, the skill includes a workflow for integrating with Playwright to update baseline screenshots and verify visual changes after approved design modifications.

Can I use hardcoded hex values with this skill active?

The skill discourages hardcoded values and enforces the use of CSS variables to maintain a single source of truth for your design system.

UI Freeze

Name: UI Freeze
Author: freitasp1

byfreitasp1

•

Design Tools

Protects critical design system files and global CSS from accidental modifications by requiring explicit confirmation and impact analysis.

UI Freeze acts as a protective layer for your frontend architecture, preventing Claude from making silent or unintended changes to core design files like Tailwind configurations, global CSS variables, and layout components. It ensures visual consistency across B2B SaaS applications by enforcing a strict workflow that includes justification, impact assessment, and explicit human confirmation before any global styling changes are applied, making it indispensable for maintaining production-grade design systems.

Key Features

01Automatic locking of Tailwind and global CSS configuration files

02Mandatory impact analysis and justification for design changes

032 GitHub stars

04Visual regression workflow integration with Playwright reference checks

05Enforcement of CSS variables as the single source of truth for styles

06Emergency rollback procedures for accidental UI modifications

Use Cases

01Preventing accidental global style regressions in large Tailwind CSS projects

02Maintaining brand consistency across complex B2B SaaS dashboard layouts

03Enforcing design system governance during rapid AI-assisted prototyping

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add freitasp1/claude-code-skills ui-freeze

For use in Claude.ai and ChatGPT

Download Skill