normalize

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

7|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/Davie521/claude-skills --skill normalize-davie521
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Davie521/claude-skills/tree/main/plugins/design/skills/normalize
Command: npx skills add https://github.com/Davie521/claude-skills --skill normalize-davie521

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalizes a UI component or feature to align with the design system, addressing drift in typography, spacing, color, and patterns.

Core Features & Use Cases

  • Audit current UI against tokens and patterns to identify deviations.
  • Propose and apply token-based updates to typography, spacing, color, and components.
  • Use Case: bring a drifting feature back in line with system guidelines after refactors.

Quick Start

Describe the feature you want normalized and I will begin the design-system alignment process.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I realign UI components to design-system tokens after refactoring?▼

To realign UI components to design-system tokens, audit current typography, spacing, and color usage against system patterns, then apply token-based updates to correct deviations and enforce strict UI consistency.

What causes design-system drift in typography and spacing across features?▼

Design-system drift in typography and spacing occurs when UI components deviate from established tokens and patterns during updates or refactors, requiring an alignment process to restore strict design-system adherence.

How can I audit my current UI for color token and component pattern deviations?▼

Audit your current UI for color token and component pattern deviations by mapping existing feature styles against design-system guidelines, identifying inconsistencies, and proposing token-based updates to correct them.

Does normalizing UI components enforce accessibility requirements?▼

Yes, normalizing UI components enforces accessibility requirements by applying strict design-system guidelines and token-based styling to ensure features meet necessary accessibility standards during the alignment process.

What is the best way to fix inconsistent spacing and typography across routes?▼

The best way to fix inconsistent spacing and typography across routes is to normalize the affected UI features by replacing hardcoded values with strict design-system tokens, ensuring consistent UI patterns application-wide.

When should I normalize a UI feature against design-system standards?▼

You should normalize a UI feature against design-system standards after completing refactors that introduce drift, or when auditing existing pages reveals deviations in typography, spacing, color tokens, and component patterns.