normalize

Analyze and redesign UI features to match design system standards.

59|5|Updated Mar 8, 2026

Search Tags:#design system #style guide #component library #frontend development #ux/ui #ui consistency

Ready to run

npx skills add https://github.com/FavioVazquez/learnship --skill normalize-faviovazquez

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/FavioVazquez/learnship/tree/main/.windsurf/skills/impeccable/normalize
Command: npx skills add https://github.com/FavioVazquez/learnship --skill normalize-faviovazquez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that a specific feature or page in your application adheres strictly to your established design system, resolving inconsistencies and improving user experience.

Core Features & Use Cases

Design System Adherence: Analyzes and refactors UI elements to match predefined design tokens, components, and patterns.
Consistency Enforcement: Corrects deviations in typography, color, spacing, layout, and interaction.
Use Case: You've just implemented a new user onboarding flow, but some buttons and text styles don't match the rest of your application. Use this Skill to automatically update them to use your design system's approved styles and components.

Quick Start

Normalize the user profile page to match our design system standards.

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 designs with an existing design system?▼

You align UI designs with a design system by analyzing and refactoring feature elements to strictly match predefined design tokens, components, and approved patterns. This corrects deviations in typography, color, spacing, and layout to ensure system consistency.

What is design system adherence for frontend components?▼

Design system adherence is the process of systematically resolving inconsistencies in UI components by applying established design tokens and approved patterns. It ensures typography, color, spacing, and motion perfectly match system standards across your application.

How do I fix typography and color inconsistencies in a new UI feature?▼

Fix typography and color inconsistencies by systematically refactoring the feature to apply your established design tokens and approved patterns. This updates text styles, buttons, and UI elements to match approved components and enforce consistency.

Can I enforce UX/UI consistency for a specific page without rebuilding it?▼

Yes, you can enforce UX/UI consistency for a specific page by analyzing its elements and refactoring them to match predefined design tokens. It corrects deviations in layout, motion, interaction, and responsive behavior without requiring a full rebuild.

What's the best way to refactor a user onboarding flow to match approved components?▼

The best way to refactor a user onboarding flow is to systematically analyze and update its buttons, text styles, and UI elements to use your design system's approved styles, components, and established patterns to resolve inconsistencies.

Does design system normalization address accessibility and responsive behavior?▼

Yes, design system normalization systematically addresses accessibility and responsive behavior by applying established design tokens and approved patterns. It ensures the refactored feature meets system standards for interaction and layout across devices.