skills.rest
wellsgz
wellsgzCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Apply design system tokens and components to normalize UI consistency.

Updated Feb 8, 2026
Search Tags:#design#accessibility#normalization#tokens#ux#design-system#ui-consistency
One-click install
npx skills add https://github.com/wellsgz/SonarScope --skill normalize-wellsgz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/wellsgz/SonarScope/tree/main/.codex/skills/normalize
Command: npx skills add https://github.com/wellsgz/SonarScope --skill normalize-wellsgz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Discover and reference design system tokens and guidelines
  • Analyze current UI elements to identify deviations from standards
  • Create a concrete normalization plan covering typography, color, spacing, components, and accessibility
  • Apply changes to ensure consistency across products and teams
  • Validate alignment with design QA and accessibility checks

Quick Start

Review the feature, compare it to the design system, and implement changes to align typography, color, 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 align UI components to an existing design system?▼

Align UI components by identifying deviations from your design system and documenting gaps. Apply token-based styles and reusable components to achieve consistency across typography, color, and spacing.

What is the best way to normalize design tokens for UI consistency?▼

Normalize design tokens by analyzing current UI elements against guidelines and applying token-based styles. This ensures consistent visual language and maintains accessibility standards across products.

How do I document design system gaps during a normalization process?▼

Document design system gaps by comparing current features against platform standards. Identify specific deviations in spacing, typography, and components, then create a concrete normalization plan.

Can I validate design QA and accessibility checks after applying token-based styles?▼

Yes, you validate changes against design QA criteria and ensure responsive behavior aligns with platform standards. This confirms that token-based styling maintains accessibility and UI consistency.

When do I need to normalize UI spacing and typography?▼

Normalize UI spacing and typography when features deviate from your design system. Applying reusable components and token-based styles corrects these inconsistencies and restores visual alignment.

Does normalizing a design system require reusable components?▼

Yes, applying reusable components is essential to achieve consistency during normalization. They replace deviating UI elements and ensure that updates align with established design system guidelines.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
petbrainspetbrains
13

frontend-design-review

Review frontend UI/UX designs for accessibility and responsive behavior.

Official
Basic
tunacosguntunacosgun

emcn-design-review

Audit UI code against the emcn design system for conformance.

Community
Advanced
tuantiensiutuantiensiu
1

design-system-audit

Audit design systems to identify inconsistencies and undocumented design tokens.

Community
Intermediate