skills.rest
effiemincer
effiemincerCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Normalize frontend UI components to match design system tokens.

Updated Mar 16, 2026
Search Tags:#typography#accessibility#normalization#tokens#design-principles#design-system#ui-consistency
One-click install
npx skills add https://github.com/effiemincer/contract-review-pipeline --skill normalize-effiemincer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/effiemincer/contract-review-pipeline/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/effiemincer/contract-review-pipeline --skill normalize-effiemincer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams often encounter drift where features diverge from the established design system, causing inconsistency and reduced usability across products.

Core Features & Use Cases

  • Typography alignment: replace hard-coded typography values with design tokens to ensure consistent fonts, weights, and line heights.
  • Color & theme alignment: apply design system color tokens and semantic color roles to maintain a cohesive palette.
  • Spacing & layout normalization: enforce token-based margins, padding, and grid alignment to match the system.
  • Component governance: map custom UI to design system components or primitives to ensure consistency and reusability.
  • Accessibility & responsiveness: verify contrast, focus states, and responsive breakpoints to meet accessibility standards.

Quick Start

Run the normalization plan on the target feature to align it with 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 align frontend UI components with an existing design system?▼

Align frontend UI components by mapping custom elements to design system primitives and replacing hard-coded typography, color, and spacing with design tokens to ensure UI consistency.

What is design system normalization and when do I need it?▼

Design system normalization resolves feature drift by enforcing token-based typography, color, spacing, and component governance to maintain consistency and usability across web and mobile products.

How do I replace hard-coded typography and color values with design tokens?▼

Replace hard-coded values by applying semantic color roles and typography design tokens during the normalization process, ensuring cohesive fonts, weights, line heights, and palette alignment.

Do I need design tokens and accessibility checks to normalize my UI?▼

Yes, UI normalization requires existing design tokens and design system guidelines, while validating responsive breakpoints, contrast, and focus states to meet accessibility standards.

What is the best way to fix UI drift and inconsistent spacing across features?▼

Fix UI drift by enforcing token-based margins, padding, and grid alignment to normalize spacing and layout, ensuring the target feature matches established design system principles.

Can I use UI normalization for both web and mobile component governance?▼

Yes, UI normalization applies to frontend components across web and mobile, mapping custom UI to design system components or primitives to ensure reusability and consistent accessibility.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
kyamsSRLkyamsSRL

design-system-patterns

Build scalable design systems with Style Dictionary token pipelines and React theme providers.

Community
Advanced
nicolaiprodromovnicolaiprodromov
20

normalize

Normalizes Puree UI designs to match SCSS variables and component conventions.

Community
Advanced