normalize_skill

Overview

This skill normalizes UI features to match a project's design system so interfaces are consistent, accessible, and maintainable. It guides discovery, analysis, planning, and execution to replace one-off implementations with design-system-aligned components and tokens. The result is predictable UX, fewer regressions, and a cleaner shared component surface.

How this skill works

First, it runs a Context Gathering Protocol to find and study the design system, tokens, and patterns. Then it analyzes the target feature to identify cosmetic and functional deviations, creates a prioritized normalization plan, and executes changes across typography, color, spacing, components, motion, responsiveness, and accessibility. Finally, it consolidates reusable code, removes orphaned artifacts, and verifies quality through linting, type checks, and tests.

When to use it

• When a feature uses hard-coded styles or custom components that diverge from the design system
• During UI refactors to improve consistency and reduce maintenance overhead
• Before adding new features so they follow established tokens and patterns
• When accessibility or responsive behavior is inconsistent with product standards
• When onboarding a new design system or consolidating multiple style sources

Best practices

• Always run the Context Gathering Protocol; never guess design intent or tokens
• Prefer design system components and tokens over new one-off implementations
• Prioritize UX and accessibility before visual polish when resolving conflicts
• Document any shared components moved into the system and delete obsolete code
• Verify changes with linting, type checks, responsive checks, and accessibility audits

Example use cases

• Replace a custom modal with the design system dialog component and map tokens for spacing, typography, and focus behavior
• Convert hard-coded color values to theme color tokens and ensure contrast meets accessibility thresholds
• Refactor a bespoke form input into the system input component to unify validation, labels, and error states
• Align a feature's responsive breakpoints and grid layout to the system’s layout utilities
• Audit animations and micro-interactions to match system timings and easing for consistent motion