skills.rest
PavkaBrika
PavkaBrikaCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Audit UI against the design system and normalize spacing, typography, and tokens.

1|Updated Jun 23, 2022
Search Tags:#typography#accessibility#tokens#design-system#spacing#frontend-design#ui-consistency
One-click install
npx skills add https://github.com/PavkaBrika/debtbookapp --skill normalize-pavkabrika
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/PavkaBrika/debtbookapp/tree/main/.cursor/skills/normalize
Command: npx skills add https://github.com/PavkaBrika/debtbookapp --skill normalize-pavkabrika

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The UI often drifts from the design system, leading to inconsistent spacing, typography, tokens, and visual patterns. This skill audits and realigns interfaces to restore consistency and reduce cognitive load.

Core Features & Use Cases

  • Audits UI for spacing, typography, color, and token usage against the design system.
  • Replaces hard-coded values with design tokens and system components.
  • Use Case: When a feature's design drifts after iterations, apply normalization to bring it back in line with the system.

Quick Start

Audit the target UI against the design system and update tokens, spacing, and typography to restore consistency.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I audit my UI for design system drift and fix spacing inconsistencies?▼

Audit your UI against the design system to identify deviations in spacing, typography, and tokens. Apply normalization across pages and features to replace hard-coded values, correct drift, and restore UI consistency.

What is design token normalization and when do I need to apply it?▼

Design token normalization replaces hard-coded values with system components and tokens to correct visual drift. You need to apply it when a feature's design drifts after iterations, causing inconsistent spacing, typography, and patterns across pages.

How do I fix hard-coded spacing and typography values in my frontend components?▼

Fix hard-coded spacing and typography by auditing the target UI against the design system. Replace hard-coded values with established design tokens and system components to realign interfaces and enforce UI consistency.

Does UI normalization enforce accessibility basics and design system guidelines?▼

Yes, UI normalization enforces usage of design tokens, system components, and accessibility basics. It validates changes against established guidelines while applying normalization across pages, features, and components to restore consistency.

What's the best way to realign an existing feature's design with my design system?▼

The best way to realign an existing feature is to audit the target UI against the design system. Update tokens, spacing, and typography to apply normalization across the feature, correcting drift and restoring established visual patterns.

Why does my UI drift from the design system after multiple feature iterations?▼

UI drifts from the design system after iterations due to hard-coded values replacing established patterns, leading to inconsistent spacing, typography, and tokens. Auditing and applying normalization realigns interfaces to reduce cognitive load and restore consistency.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced
PostalocityPostalocity
1

normalize

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

Official
Advanced
deadhearth01deadhearth01

normalize

Replace hard-coded UI styles with design system tokens.

Community
Advanced
unthinkmediaunthinkmedia

ux-design-system-auditor

Audit UI implementations against design system guidelines for compliance deviations.

Community
Intermediate