What happens to the old code after normalization?

The skill includes a 'Clean Up' phase that deletes unused implementations and orphaned styles, ensuring your codebase remains DRY and maintainable.

How does the Normalize skill understand my specific design system?

The skill performs an initial 'Discovery' phase where it greps for documentation, style guides, and component libraries within your repository to learn your specific patterns and tokens.

Does it support accessibility compliance?

Normalization includes a mandatory check for accessibility, ensuring that contrast ratios, focus states, and ARIA labels match your design system's requirements.

Can this skill replace custom CSS with Tailwind or CSS variables?

Yes, it is designed to replace hard-coded values with your project's specific design tokens, whether they are Tailwind classes, CSS variables, or JS-based theme objects.

Design System Normalizer

Name: Design System Normalizer
Author: Moliboy5000

byMoliboy5000

0•

Design Tools

Aligns frontend features with established design systems to ensure UI consistency and professional UX standards.

The Normalize skill acts as an automated design auditor and refactoring engine for frontend applications. It systematically scans existing codebases to identify deviations from design system patterns, such as hard-coded colors, inconsistent spacing, or non-standard typography. By discovering your specific UI guidelines and design tokens, it refactors custom implementations into standardized components and patterns. This tool is essential for maintaining a cohesive user experience across large-scale projects, ensuring that every feature—regardless of who built it—adheres to the same aesthetic and functional standards, including accessibility and responsive behavior.

Key Features

01Refactoring of one-off components into design system equivalents

02Automated discovery of local design system documentation and UI guidelines

03Verification of accessibility standards including contrast and ARIA labels

04Comprehensive audit of typography, color tokens, and spacing patterns

05Cleanup of redundant styles and orphaned frontend code post-normalization

060 GitHub stars

Use Cases

01Refactoring prototype code into production-grade, system-compliant features

02Migrating legacy UI components to a modern, tokenized design system

03Ensuring consistency in styling and UX after a large multi-developer sprint

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add moliboy5000/.claude normalize

For use in Claude.ai and ChatGPT