normalize

Audit and realign UI to match design system tokens and patterns.

Updated Nov 15, 2025

Search Tags:#typography #ui #consistency #tokens #design-system #normalize

Ready to run

npx skills add https://github.com/billh93/snchz --skill normalize-billh93

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

Core Features & Use Cases

Design-system alignment: identifies deviations and applies tokens, spacing, typography, and color rules.
Consistency restoration: brings a feature back in line with established UI patterns and tokens.
Use Case: when a feature looks off compared to the design system, run normalize to re-align it.

Quick Start

Provide the feature to be normalized and run the normalization workflow 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 fix UI design drift and realign components with design tokens?▼

Design-system alignment identifies visual deviations and applies standardized design tokens, spacing, typography, and color rules to restore consistency. It brings mismatched features back in line with established UI patterns across pages, routes, and components.

What is the best way to restore UI consistency when features look off compared to the design system?▼

Restoring UI consistency involves running a normalization workflow that audits the feature and applies design tokens. This ensures mismatched styles are realigned with established UI patterns, typography, spacing, and color tokens.

How do I audit mismatched styles and apply spacing tokens across pages?▼

Auditing mismatched styles involves running a normalization workflow that validates responsive behavior and accessibility considerations. It applies spacing tokens, typography, and color tokens to realign UI components with your design system.

Can I use this design system alignment process for responsive behavior and accessibility validation?▼

Yes, you can use this design system alignment process for responsive behavior and accessibility validation. It audits UI components to ensure changes use design tokens while validating responsive layouts and accessibility considerations.

When do I need to normalize UI components to match design system standards?▼

You need to normalize UI components when you notice consistency issues, design drift, or mismatched styles. It is necessary when tokens and system alignment are required across pages, routes, and components to match design system standards.

Why does my UI feature look inconsistent despite using a design system?▼

Your UI feature looks inconsistent due to design drift, where deviations from established patterns occur over time. Running a normalization workflow audits these mismatches and realigns the feature using design tokens, spacing, typography, and color rules.