skills.rest
labohemez
labohemezCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Audit UI components against design system tokens and produce a normalization plan.

Updated Aug 23, 2026
Search Tags:#typography#consistency#accessibility#tokens#design-system#spacing#ui-audit
One-click install
npx skills add https://github.com/labohemez/kangnam-church-reservation --skill normalize-labohemez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/labohemez/kangnam-church-reservation/tree/main/.claude/skills/normalize
Command: npx skills add https://github.com/labohemez/kangnam-church-reservation --skill normalize-labohemez

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

  • Conformance auditing: compares UI elements against design system tokens for color, spacing, and typography.
  • Normalization planning: defines precise changes to align components with system patterns and tokens.
  • Use case example: realign a mis-tuned card component to match spacing, typography, and color tokens.

Quick Start

Provide the feature to normalize and execute the normalization plan 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 align components to design tokens?▼

Fix UI design drift by auditing components against design system standards for color, spacing, and typography, then applying a normalization plan to realign mismatched styles with established tokens.

What is a UI conformance audit for design system consistency?▼

A UI conformance audit compares interface elements against design system tokens to identify mismatches in spacing, typography, and color, producing a concrete normalization plan to enforce consistency.

How do I normalize mismatched card component spacing and typography?▼

Normalize mismatched card components by auditing their spacing, typography, and color values against the design system, then executing a normalization plan to apply the correct tokens.

Can I audit accessibility and responsive behavior alongside design token usage?▼

Yes, the UI audit validates accessibility and responsive behavior while checking tokens, typography, spacing, and color to ensure components meet comprehensive design system standards.

When should I run a UI normalization plan for my feature pages?▼

Run a UI normalization plan when features, pages, routes, or components exhibit design drift, mismatched styles, or token inconsistencies that need to be brought back in line with system patterns.

Does UI normalization work across multiple project routes and components?▼

Yes, UI normalization can be applied across features, pages, routes, and components throughout projects where consistency, tokens, and design system patterns must be enforced and validated.

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
Tea-4-LifeTea-4-Life

normalize

Normalize frontend UI features by replacing hard-coded values with design tokens.

Official
Intermediate
alicanerdoganalicanerdogan
1

i-normalize

Audit UI implementations and align tokens, spacing, typography, and patterns with the design system.

Community
Intermediate
fantay0312fantay0312

react:components

Convert Stitch designs into modular React components with validation.

Community
Advanced