skills.rest
Postalocity
PostalocityOFFICIAL
Explore all skills by this author →
GitHub

normalize

Align UI implementations to design system tokens, spacing, typography, and components.

1|Updated Mar 5, 2026
Search Tags:#consistency#a11y#frontend#normalization#tokens#design-system#ui-patterns
One-click install
npx skills add https://github.com/Postalocity/template-microsite --skill normalize-postalocity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Postalocity/template-microsite/tree/main/.opencode/skills/impeccable--normalize
Command: npx skills add https://github.com/Postalocity/template-microsite --skill normalize-postalocity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. It reduces drift and inconsistency across features.

Core Features & Use Cases

  • Design-system alignment: Realigns typography, colors, spacing, tokens, and components to established guidelines.
  • Pattern conformity: Ensures features follow consistent patterns and anti-patterns are avoided.
  • Use Case: When a feature's UI looks out-of-sync with the rest of the product, use this skill to bring it back in line with the system.

Quick Start

Initiate the design-context gathering process and reference design tokens to begin normalization.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align UI components to a design system and reduce visual drift?▼

Design system alignment audits typography, colors, and spacing against established guidelines to normalize token usage. It ensures features follow consistent patterns, reducing visual drift across pages while maintaining accessible contrast and token-driven spacing.

What is design system normalization for frontend features?▼

Design system normalization realigns UI implementations to match established design tokens, spacing, and typography standards. It ensures consistent usage of reusable components and accessible contrast across frontend features to eliminate inconsistencies.

How do I map design tokens to frontend UI patterns correctly?▼

Map design tokens by referencing your design system guidelines during the context gathering process. This ensures token-driven spacing and typography are applied consistently, avoiding anti-patterns in frontend component implementation.

When should I use a design system alignment process for my UI?▼

Use design system alignment when a feature's UI looks out-of-sync with the rest of the product. It brings the interface back in line with the system by auditing spacing, typography, and token usage against established guidelines.

How do I fix inconsistent spacing and typography across frontend pages?▼

Fix inconsistent spacing and typography by applying design token mapping and normalization. This process audits your current UI against established design system standards and realigns components using token-driven spacing and accessible contrast.

Can I use token-driven spacing to ensure accessible contrast in UI components?▼

Yes, token-driven spacing ensures accessible contrast by standardizing UI component spacing and typography through design tokens. This approach aligns frontend features with design system standards and avoids common accessibility anti-patterns.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
ruiyangruiyiruiyangruiyi

design-md

Lint DESIGN.md token structure, references, and WCAG contrast.

Community
Intermediate
ucdavisucdavis
8

react-native

Implement and audit accessibility in React Native and Expo apps per WCAG 2.1 AA.

Official
Intermediate
MeechYourGoalsMeechYourGoals
2

ux-consistency-audit

Audit production applications for UX and design-system consistency.

Community
Advanced