normalize

Audit and realign UI to match design system standards using tokens.

Updated Nov 4, 2025
One-click install
npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill normalize-jatwell93
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/jatwell93/pharmacy-heatmap/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/jatwell93/pharmacy-heatmap --skill normalize-jatwell93

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match design system standards, spacing, tokens, and patterns.

Core Features & Use Cases

  • Plan: Deeply understand the design system context and identify drift across the feature.
  • Execute: Normalize typography, color, spacing, and component usage by applying design tokens and system components.
  • Clean Up: Consolidate reusable changes, remove redundancies, and validate quality against design guidelines.

Quick Start

Describe and implement design-system-aligned changes for a feature using tokens, typography, spacing, and components.

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 inconsistent typography in my UI components?

Fix design drift by auditing UI components and realigning them to match design system standards. You normalize typography, color, and spacing by applying consistent design tokens and system component patterns across web or mobile interfaces.

What is the best way to audit UI for spacing and design token mismatches?

The best way to audit UI for spacing and token mismatches is to follow a Context Gathering Protocol. This process identifies design drift across features, pages, and components, validating spacing and component patterns against established design guidelines.

How do I normalize component patterns to align with a design system?

Normalize component patterns by applying design tokens for typography and color, then enforcing token-based configurations across the feature. This realigns inconsistent UI elements, consolidates reusable changes, and removes redundancies to match system standards.

Can I use design tokens to realign both web and mobile interfaces?

Yes, you can use design tokens to realign both web and mobile interfaces. The token-based configurations validate spacing and component patterns across platforms, ensuring consistent typography and color application wherever design drift is identified.

When should I perform a UI audit to realign features to design system standards?

Perform a UI audit when features, pages, or components exhibit design drift, inconsistent typography, or token mismatches. An audit deeply understands the design system context and identifies where spacing and component patterns deviate from standards.

Why does my UI still have inconsistent spacing after applying design tokens?

Inconsistent spacing persists if component patterns are not validated against design guidelines. You must consolidate reusable changes, remove redundancies, and enforce token-based configurations during cleanup to ensure spacing and typography fully match system standards.