skills.rest
microlinkhq
microlinkhqOFFICIAL
Explore all skills by this author →
Website𝕏@microlinkhqGitHub

normalize

Normalize UI feature implementations to match an existing design system.

142|31|Updated Jul 13, 2017
Search Tags:#accessibility#design system#design tokens#ux consistency#component alignment#ui normalization#frontend refactor
One-click install
npx skills add https://github.com/microlinkhq/www --skill normalize-microlinkhq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/microlinkhq/www/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/microlinkhq/www --skill normalize-microlinkhq

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes inconsistencies between a feature’s UI/UX implementation and your design system so users get a coherent experience across the product.

Core Features & Use Cases

  • Design system discovery: Identifies the governing UI guidelines, component patterns, and tokens needed to set the correct target.
  • Feature audit & gap analysis: Locates deviations in typography, color, spacing, components, interaction behavior, responsiveness, and accessibility.
  • Normalization & cleanup: Refactors toward design-system equivalents, replaces hard-coded styling with tokens, and removes obsolete code while safeguarding quality.

Quick Start

Use the normalize skill to redesign the feature “Settings page” so typography, color, spacing, component usage, and accessibility match 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 an existing feature's UI with my design system?▼

To align a feature with your design system, audit typography, color, spacing, components, and accessibility, then refactor hard-coded styling into design tokens and replace custom elements with system components.

What is design token normalization for frontend components?▼

Design token normalization replaces hard-coded styling values with standardized design system variables for typography, color, and spacing to ensure consistent UI appearance across product features.

How do I audit a UI page for design system inconsistencies?▼

Audit a UI page for design system inconsistencies by analyzing deviations in typography, color, spacing, component usage, interaction behavior, responsiveness, and accessibility compliance against governing UI guidelines.

Can I use this to fix accessibility issues during a design system refactor?▼

Yes, accessibility validation is part of the normalization process, ensuring refactored features meet design system compliance standards for interaction behavior and responsive design after component replacement.

What's the best way to normalize a feature flow without causing UI regressions?▼

Normalize a feature flow without regressions by performing systematic inconsistency analysis, replacing hard-coded styles with design tokens, and executing post-changes cleanup to remove obsolete code.

When do I need design system discovery before refactoring a feature?▼

Design system discovery is needed before refactoring to identify the governing UI guidelines, component patterns, and design tokens required to set the correct target for feature normalization.

Related Skills

Explore More Design & Creative Skills→
chuan-khunachuan-khuna
3

normalize

Audit and rectify design tokens, components, and styles against the design system.

Community
Advanced
niiiusburoniiiusburo

normalize

Audit UI features and realign them with design system standards.

Community
Advanced
Tea-4-LifeTea-4-Life

normalize

Normalize frontend UI features by replacing hard-coded values with design tokens.

Official
Intermediate
riezriez
1

frontend-implementation-guardrails

Enforce frontend guardrails for design-system alignment, accessibility, and responsive behavior.

Community
Intermediate