normalize

Align UI components to design tokens for spacing, typography, and color.

1|Updated Mar 22, 2026

Search Tags:#typography #consistency #normalization #tokens #ui-ux #design-system #spacing

Ready to run

npx skills add https://github.com/samcannas/samscode --skill normalize-samcannas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/samcannas/samscode/tree/main/skills/catalog/normalize
Command: npx skills add https://github.com/samcannas/samscode --skill normalize-samcannas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match design system standards, spacing, tokens, and patterns, reducing design drift and ensuring a consistent user experience across features.

Core Features & Use Cases

System-wide alignment: Normalize UI components to design tokens for colors, typography, and spacing.
Audit & remediation: Detect deviations from the system and propose or apply fixes to bring components back in line.
Use Case: When a feature's UI diverges after updates, run normalization to restore consistency across pages and components.

Quick Start

Invoke the normalization workflow to align the target UI with design tokens and spacing according to the design system.

Frequently Asked Questions about normalize

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

FAQPage Schema

How do I fix design drift and align UI components with design system tokens?▼

To fix design drift, you normalize UI elements by enforcing token-based spacing, typography, and color usage across components. This audits deviations and applies fixes to restore consistency across pages and features.

What is UI normalization in a design system workflow?▼

UI normalization is the process of auditing and realigning user interface components to match established design system standards. It enforces consistent color, typography, and spacing tokens to reduce visual drift across features.

How do I audit UI components for design token mismatches?▼

You audit UI components for design token mismatches by running a normalization workflow that detects deviations in spacing, typography, and color. The workflow proposes or applies fixes to bring components back in line with the system.

Do I need design system documentation to normalize spacing and typography?▼

Yes, normalizing spacing and typography requires access to design-system documentation and token mappings. These inputs validate accessibility and ensure the normalization workflow applies the correct color, typography, and spacing standards.

Can I apply design system normalization across an entire feature after updates?▼

Yes, you can apply design system normalization across an entire feature after updates. Invoking the normalization workflow realigns all target UI elements with the correct design tokens, restoring system-wide consistency.

When should I avoid using a design system normalization workflow?▼

You should avoid using a design system normalization workflow if you lack design-system documentation or token mappings for colors, typography, and spacing. Without these inputs, the workflow cannot validate accessibility or enforce consistent UI alignment.