skills.rest
xbg-solutions
xbg-solutionsOFFICIAL
Explore all skills by this author →
GitHub

normalize

Audit and realign UI components to design system tokens and spacing standards.

Updated Apr 2, 2025
Search Tags:#typography#consistency#tokens#ui-design#design-system#spacing#normalize
One-click install
npx skills add https://github.com/xbg-solutions/boilerplate_sveltekit --skill normalize-xbg-solutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/xbg-solutions/boilerplate_sveltekit/tree/main/.claude/skills/impeccable/normalize
Command: npx skills add https://github.com/xbg-solutions/boilerplate_sveltekit --skill normalize-xbg-solutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match our 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

  • Restore token-consistent typography and color usage across components.
  • Unify spacing and layout according to the design system grid.
  • Use Case: When a feature has drifted from tokens or uses bespoke styles, apply normalize to revert to system standards.

Quick Start

Run a normalization pass by specifying the target UI feature.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I fix design drift and realign UI components with design system tokens?▼

To fix design drift, you audit and realign UI components to enforce design token usage, spacing grids, and typography standards, restoring visual consistency across features.

What is the best way to normalize spacing and typography across a UI feature?▼

The best way to normalize spacing and typography is to run an audit pass that replaces bespoke styles with standardized design tokens and aligns layouts to the system grid.

Can I apply a design system normalization pass to a specific page or route?▼

Yes, you can apply normalization to specific features, components, pages, or routes where visual drift and inconsistent token usage need correction without breaking accessibility.

How do I revert bespoke UI styles back to standard design system patterns?▼

You revert bespoke UI styles by auditing the target feature and realigning component usage, typography, and color values to match established design system patterns and tokens.

Does normalizing UI components preserve accessibility and usability?▼

Yes, normalizing UI components enforces design token usage and pattern alignment while actively preserving both accessibility and usability standards throughout the correction process.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
QuestNova502QuestNova502
4

ui-design-system

Generate design token systems in JSON with optional CSS/SCSS exports.

Community
Advanced
oborchersoborchers
28

consistency-design-systems

Manage design tokens across primitive, semantic, and component layers using atomic design principles.

Community
Intermediate