How does UI Freeze prevent accidental changes?

It monitors critical configuration files like tailwind.config and global CSS, stopping Claude from applying changes until the user provides an explicit 'Yes, change design' confirmation and justification.

Why does the skill enforce CSS variables?

To ensure a single source of truth for styles, the skill flags hard-coded values in components and requires all colors to be defined via CSS variables in the theme configuration.

What happens if a design change is accidentally approved?

The skill includes pre-defined emergency rollback commands to quickly restore the last stable UI state using git tags and file-specific resets.

Can I customize which files are locked?

Yes, you can define specific Locked Files and Warning Files within your CLAUDE.md configuration to suit your specific project structure and directory naming.

Does this skill help with visual regression testing?

Yes, it provides a structured workflow for running Playwright tests, updating snapshots, and tagging stable UI releases after approved design changes.

UI Protection & Design System Guardrails

Name: UI Protection & Design System Guardrails
Author: Svenja-dev

bySvenja-dev

•

デザインツール

Protects design systems and global styles from unintended modifications by enforcing strict confirmation workflows for theme-level changes.

The ui-freeze skill acts as a specialized quality gate for your application's visual identity, preventing Claude from making accidental or sweeping changes to global CSS, Tailwind configurations, and core layout components. By locking critical theme files and requiring explicit justification and impact analysis for UI modifications, it ensures that your design system remains consistent across the entire codebase. This is particularly useful for B2B SaaS teams who need to maintain strict brand standards while utilizing AI-driven development to build new features.

主な機能

01Visual regression testing integration via Playwright support

02Impact analysis reporting for style and layout changes

0329 GitHub stars

04Automated locking of tailwind.config and global CSS files

05Emergency rollback commands for accidental UI design drift

06Enforcement of CSS variable usage over hard-coded values

ユースケース

01Maintaining design system integrity across large-scale B2B SaaS applications

02Managing global layout and typography changes with explicit justification

03Preventing accidental color palette shifts during routine feature development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add svenja-dev/claude-code-skills ui-freeze

For use in Claude.ai and ChatGPT

Download Skill