normalize

Normalize UI features to design system tokens and component patterns.

1|Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Elliot-TangS/EliteChain --skill normalize-elliot-tangs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Elliot-TangS/EliteChain/tree/main/.windsurf/skills/normalize
Command: npx skills add https://github.com/Elliot-TangS/EliteChain --skill normalize-elliot-tangs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Aligning features with the design system is often manual, error-prone, and leads to inconsistent user experiences across pages and components.

Core Features & Use Cases

  • Token-driven styling: Replace hard-coded values with design tokens for typography, color, and spacing.
  • Component alignment: Map UI elements to the design system component patterns to ensure visual consistency.
  • Use Case: When a new feature is sketched, run normalization to apply tokens, tokens-based colors, and spacing, resulting in a cohesive look.

Quick Start

Inspect the current feature and run 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 align my UI components with a design system?▼

Design system normalization replaces hard-coded values with design tokens for typography, color, and spacing. It maps UI elements to standard component patterns to ensure visual consistency across pages and components, eliminating manual and error-prone styling adjustments.

How do I replace hard-coded color and spacing values with design tokens?▼

Replace hard-coded values by applying token-driven styling during the feature normalization process. The Skill inspects your current interface feature and applies your design system's typography, color palette, and spacing tokens to output a normalized specification and updated component references.

Do I need design system documentation to normalize my UI?▼

Yes, normalizing your UI expects access to existing design system documentation and tokens. Without providing the foundational design tokens and standards, the process cannot accurately map UI elements or output a normalized specification to align your interface features.

What is the best way to fix UI consistency issues across multiple pages?▼

The best way to fix UI consistency issues is to run a normalization plan that applies token-driven styling across lacking pages. By mapping UI elements to design system component patterns, you replace inconsistent hard-coded values with a cohesive typography and color palette.

Can I normalize a newly sketched feature to match existing design standards?▼

Yes, when a new feature is sketched, you can run normalization to apply design tokens for typography, color, and spacing. This outputs a normalized specification and updated component references, resulting in a cohesive look that conforms to your design system standards.