Does it automatically replace the code?

The skill identifies the legacy instances and provides the corresponding modern design system equivalents, allowing for safe, guided manual migration.

What types of components can it help standardize?

It is highly effective for standardizing form inputs, buttons, containers, and any other UI elements that rely on repetitive CSS utility patterns.

How does this skill identify legacy components?

It uses specialized scanning scripts to detect specific combinations of utility classes and legacy patterns that have been deprecated in favor of the new design system.

Can I customize the patterns it looks for?

Yes, the skill is designed to work with project-specific scripts that can be updated to target the unique legacy patterns present in your specific codebase.

UI Component Standardizer

Name: UI Component Standardizer
Author: MarchRaBBiT

byMarchRaBBiT

0•

Design Tools

Refactors legacy UI patterns and CSS utility classes into modern design system components to ensure visual consistency across frontend projects.

The UI Component Standardizer skill automates the identification and migration of outdated UI patterns within your codebase. By scanning for legacy utility classes—such as older padding, border, and rounding configurations—it provides actionable guidance and scripts to transition toward a centralized design system. This skill is particularly useful during codebase refactors or when implementing a new visual identity, ensuring that disparate UI elements like buttons and inputs adhere to the latest design specifications and standardized component libraries.

Key Features

01Consistency enforcement for form inputs, buttons, and container layouts

02Built-in scripts for identifying suspect UI code across project directories

03Integration with existing frontend component libraries for rapid refactoring

040 GitHub stars

05Guided migration from raw utility strings to Design System components

06Automated scanning for legacy CSS utility classes and patterns

Use Cases

01Consolidating disparate button and input styles into reusable component libraries

02Migrating a legacy web application to a modern Tailwind-based design system

03Auditing frontend code for visual inconsistencies before a major design release

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add marchrabbit/timekeeper standardize_ui

For use in Claude.ai and ChatGPT

Key Features

01Consistency enforcement for form inputs, buttons, and container layouts

02Built-in scripts for identifying suspect UI code across project directories

03Integration with existing frontend component libraries for rapid refactoring

040 GitHub stars

05Guided migration from raw utility strings to Design System components

06Automated scanning for legacy CSS utility classes and patterns

Use Cases

01Consolidating disparate button and input styles into reusable component libraries

02Migrating a legacy web application to a modern Tailwind-based design system

03Auditing frontend code for visual inconsistencies before a major design release

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add marchrabbit/timekeeper standardize_ui

For use in Claude.ai and ChatGPT