normalize

Audits and realigns UI features to match design system tokens, components, and patterns.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/po4yka/blog --skill normalize-po4yka
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/po4yka/blog/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/po4yka/blog --skill normalize-po4yka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI features drift away from the design system over time, accumulating one-off components, hard-coded values, and inconsistent patterns that hurt usability and maintainability. ## Core Features & Use Cases - Design System Audit: Discovers and studies existing design system documentation, tokens, and component conventions before making changes. - Multi-Dimension Normalization: Systematically fixes typography, color, spacing, components, motion, responsive behavior, accessibility, and progressive disclosure to match established standards. - Cleanup and Consolidation: Removes orphaned code, consolidates reusable components into shared UI paths, and verifies quality with linting, type-checking, and tests. - Use Case: A settings page was built with custom buttons and hard-coded hex colors. Run this Skill to replace them with design system components and tokens, aligning the page with the rest of the product. ## Quick Start Ask the AI to normalize the settings page so it matches the design system standards and component patterns.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I fix UI inconsistencies with a design system?

Audit the feature against design system documentation, then systematically replace hard-coded values with design tokens and custom implementations with design system components. Verify the result with linting, type-checking, and tests.

What is design drift and how do I detect it?

Design drift occurs when features accumulate one-off styles and components that diverge from the design system. Detect it by comparing a feature's typography, colors, spacing, and components against documented tokens and shared UI patterns.

When should I normalize a feature instead of redesigning it?

Normalize when the feature works functionally but deviates cosmetically or structurally from the design system. Redesign only when the underlying UX pattern itself is wrong, since normalization prioritizes consistency with established user flows.

Does design system normalization affect accessibility?

Yes, normalization includes verifying contrast ratios, focus states, and ARIA labels against design system requirements. Accessibility is treated as a mandatory dimension and is never compromised for visual consistency.

What are the limitations of automated UI normalization?

Normalization depends on existing design system documentation; without clear tokens and patterns, the process requires gathering design context first. It also cannot fix fundamentally broken UX flows, only align them with established conventions.