skills.rest
range-et
range-etCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Audit and remediate UI deviations to match design system tokens and patterns.

Updated May 16, 2025
Search Tags:#typography#accessibility#design-system#tokenization#visual-design#design-tokens#ui-consistency
One-click install
npx skills add https://github.com/range-et/slate --skill normalize-range-et
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/range-et/slate/tree/main/.cursor/skills/normalize
Command: npx skills add https://github.com/range-et/slate --skill normalize-range-et

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design to match your design system and ensure consistency across UI components.

Core Features & Use Cases

  • Discover and audit current UI for design-system deviations.
  • Replace custom styles with design tokens (colors, typography, spacing) and update components.
  • Use case: when shipping a new feature, ensure visuals align with tokens and patterns.

Quick Start

Start by mapping the current UI to your design system tokens and implement alignment changes.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I normalize a UI design to match my design system tokens?▼

To normalize UI design, map current visual elements to established design tokens and replace custom styles for typography, color, and spacing with tokenized patterns, preserving accessibility and responsive behavior.

What is the best way to audit UI components for design system deviations?▼

Auditing UI components for design system deviations involves mapping existing visual designs against established patterns, detecting custom styles, and remediating them to align with tokenized typography, spacing, and color values.

Can I align new feature visuals with existing design tokens without breaking accessibility?▼

Yes, aligning new feature visuals with existing design tokens preserves accessibility while enforcing tokenized spacing and typography, ensuring UI consistency without compromising responsive behavior or access standards.

How do I replace custom UI styles with design tokens for typography and spacing?▼

Replace custom UI styles by auditing the feature's current design, identifying deviations, and remediating typography and spacing to match established design tokens, enforcing UI consistency across components.

Why does my UI design lose consistency when shipping new features?▼

UI design loses consistency when shipping new features due to deviations from established patterns, requiring normalization to enforce design tokens for typography, color, and spacing to maintain alignment.

Does normalizing UI components to a design system affect responsive behavior?▼

Normalizing UI components to a design system explicitly preserves responsive behavior while enforcing tokenized spacing and typography, ensuring visual alignment does not negatively impact layout adaptability.

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
juanelojgajuanelojga

normalize

Align feature designs to design-system tokens, components, and patterns.

Community
Advanced
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic
WirasmWirasm
65

kild-peek

Capture, inspect and validate macOS-native app windows and UI elements via accessibility APIs and image processing tools.

Community
Intermediate