skills.rest
Catsofsuffering
CatsofsufferingCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Replace hard-coded UI styles with design tokens and system components.

5|1|Updated Apr 8, 2026
Search Tags:#accessibility#frontend#design-system#spacing#design-tokens#component-refactor#ui-normalization
One-click install
npx skills add https://github.com/Catsofsuffering/CCGS --skill normalize-catsofsuffering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Catsofsuffering/CCGS/tree/main/templates/skills/impeccable/normalize
Command: npx skills add https://github.com/Catsofsuffering/CCGS --skill normalize-catsofsuffering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalizes and realigns UI features that have drifted away from the established design system by replacing one-off styles, correcting spacing and tokens, and restoring consistent component patterns and interactions to improve usability and maintainability.

Core Features & Use Cases

  • Design system discovery: Locate and interpret design tokens, component patterns, and style guidelines before making changes.
  • Gap analysis & plan: Identify deviations, root causes, and a prioritized normalization plan covering typography, color, spacing, components, motion, responsiveness, and accessibility.
  • Execution & cleanup: Replace hard-coded values with tokens, swap custom implementations for design-system components, verify accessibility and responsive behavior, and remove orphaned code or duplicates.

Quick Start

Normalize the pricing page to match the design system by replacing hard-coded styles with tokens, swapping custom components for system components, and fixing spacing and accessibility issues.

Frequently Asked Questions about normalize

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix UI design drift and realign components to my design system?▼

Replace hard-coded styles with design tokens and swap custom implementations for standard design-system components to realign drifted UI and eliminate inconsistent styles.

What's the best way to normalize frontend spacing and typography anomalies?▼

Normalize frontend spacing and typography by discovering your project's design tokens, identifying deviations through gap analysis, and substituting hard-coded values with the correct design system patterns.

Does UI normalization help with accessibility and responsive behavior?▼

UI normalization improves accessibility and responsive behavior by verifying component interactions against design system standards and replacing mismatched one-off implementations with validated patterns.

How do I clean up orphaned code and duplicate styles during a component refactor?▼

Clean up orphaned code and duplicates during a component refactor by swapping custom implementations for design-system components, verifying token alignment, and removing unused styles left from drift.

When should I perform a design system gap analysis during frontend maintenance?▼

Perform a design system gap analysis during frontend maintenance when pages exhibit design drift, mismatched tokens, or spacing anomalies, requiring a prioritized normalization plan for typography, color, and components.

Related Skills

Explore More Design & Creative Skills→
Tresillo2017Tresillo2017
4

normalize

Normalize frontend UI components to align with design-system tokens and patterns.

Community
Intermediate
santychuycomsantychuycom

normalize

Refactor UI elements to align with predefined design tokens and components.

Official
Advanced
notbozhonotbozho

testing-library

Validate UI component behavior across React, Vue, and Svelte using Testing Library queries and user events.

Community
Intermediate
nielpattinnielpattin

normalize

Audit and realign UI components to match design system standards.

Community
Advanced