normalize

Normalize frontend UI components to match design system tokens.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/sethdavis512/maggies-mental-load --skill normalize-sethdavis512
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/sethdavis512/maggies-mental-load/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/sethdavis512/maggies-mental-load --skill normalize-sethdavis512

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design drift by aligning UI components to a single design system, reducing inconsistencies and rework.

Core Features & Use Cases

  • Token-driven normalization: Replace hard-coded values with design system tokens for typography, color, spacing, and layout.
  • Component alignment: Refactor components to match established design patterns and component variants.
  • Documentation & handoff: Generate or update design-system-facing guidelines to support team adoption.

Quick Start

Apply the design system tokens to the current feature to achieve visual consistency.

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 align components to a design system?▼

To fix UI design drift, you normalize UI components by replacing hard-coded styles with design tokens for typography, color, and spacing. This ensures visual consistency across features and reduces rework.

What is the best way to replace hard-coded styles with design tokens?▼

The best way to replace hard-coded styles is through token-driven normalization, applying design system tokens directly to frontend components for typography, color, spacing, and layout to achieve UI consistency.

How do I document a design system normalization plan with validation checks?▼

You document a normalization plan by generating or updating design-system-facing guidelines that outline token alignment, component refactoring steps, and validation checks to support team adoption and handoff.

Can I use this to normalize typography and spacing across frontend components?▼

Yes, you can normalize typography and spacing across frontend components by refactoring them to match established design patterns and replacing inconsistent values with standardized design tokens.

Do I need a design system established before normalizing UI components?▼

Yes, you need an established design system with defined tokens for typography, color, and spacing. Normalization aligns existing UI components to these established design patterns and token-based values.

Why does design drift happen and when do I need to normalize UI components?▼

Design drift happens when hard-coded styles accumulate across features, causing visual inconsistencies. You need to normalize UI components when these inconsistencies require alignment to a single design system using tokens.