normalize

Align frontend UI components with design system tokens and document normalization.

Updated Mar 16, 2026

Search Tags:#typography #consistency #accessibility #tokens #color #design-system #normalize

Ready to run

npx skills add https://github.com/Muccarini/automata --skill normalize-muccarini

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Muccarini/automata/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/Muccarini/automata --skill normalize-muccarini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design to match your design system and ensure consistency

Core Features & Use Cases

Design-system alignment: identify deviations from tokens, typography, color, and spacing to ensure consistency.
Normalization planning and execution: propose changes to replace one-off styles with design tokens and system components.
Accessibility and quality: verify contrast, focus states, responsive behavior, and DRYness; document changes to preserve usability.

Quick Start

Begin by mapping the target feature to the design system tokens and apply typography, color, and spacing updates to normalize its UI.

Frequently Asked Questions about normalize

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

FAQPage Schema

How do I align frontend UI components with an existing design system?▼

Normalize UI alignment by mapping the target feature to design tokens, replacing hard-coded styles with typography, color, and spacing values to ensure visual consistency.

What is the best way to fix design system inconsistencies in web apps?▼

Fixing design system inconsistencies requires identifying deviations from typography, color, and spacing tokens, then proposing a documented normalization plan to replace one-off styles with system components.

How do I replace hard-coded styles with design tokens?▼

Replace hard-coded styles with design tokens by mapping the target feature to the design system, applying token-based typography, color, and spacing updates, and documenting changes to preserve usability and DRYness.

Does UI normalization check accessibility and contrast compliance?▼

UI normalization includes accessibility verification by checking color contrast ratios, focus states, and responsive behavior to ensure the normalized design maintains usability and compliance standards.

Can I normalize UI components at scale without breaking existing layouts?▼

Normalizing UI components at scale involves documenting a normalization plan that verifies responsive behavior and focus states, ensuring token adoption preserves usability without breaking existing layouts.