skills.rest
nangyak4415-sudo
nangyak4415-sudoCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Normalize UI components and styles to match a project's design system.

Updated Mar 23, 2026
Search Tags:#accessibility#design-system#design-tokens#frontend-design#component-refactor#style-consistency#ui-normalization
One-click install
npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill normalize-nangyak4415-sudo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/nangyak4415-sudo/Narumon-Website-V.1/tree/main/.cursor/skills/normalize
Command: npx skills add https://github.com/nangyak4415-sudo/Narumon-Website-V.1 --skill normalize-nangyak4415-sudo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many frontend features drift away from the established design system, producing inconsistent typography, colors, spacing, and component behavior that harm usability and maintenance. This Skill provides a structured process to discover those deviations, diagnose root causes, and produce a prioritized plan to align the feature with system tokens, components, and interaction patterns.

Core Features & Use Cases

  • Design system discovery: Locate and interpret style guides, component libraries, tokens, and conventions used across the project.
  • Gap analysis & planning: Identify cosmetic vs. functional inconsistencies, root causes (hard-coded values, one-off components), and define an actionable normalization plan.
  • Execution checklist: Replace one-off styles with tokens, swap custom elements for system components, standardize spacing/typography, ensure responsive rules and motion match patterns, and verify accessibility and tests.
  • Cleanup & consolidation: Consolidate reusable components into the design system, remove orphaned code, and run linting/type-checks to prevent regressions.
  • Use case: Harmonize a legacy signup flow with the live design system by replacing hard-coded styles, swapping custom inputs for system inputs, and validating contrast and keyboard focus.

Quick Start

Normalize the "signup" form to match the project's design system by replacing hard-coded styles with tokens, swapping custom controls for system components, and listing remaining gaps and tests required.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I normalize UI components to match a design system during a frontend refactor?▼

To normalize UI components to a design system, you discover existing style guides and tokens, identify hard-coded values and one-off implementations, then replace them with system components and standardized spacing, typography, and motion patterns. This eliminates drift and ensures consistency across web application interfaces.

What is the best way to migrate custom UI elements to design system tokens?▼

Migrating custom UI elements to design tokens involves a gap analysis to locate hard-coded styles, followed by swapping custom inputs for system components, standardizing responsive breakpoints, and verifying that changes pass linting, type-checking, and accessibility tests to prevent regressions.

How do I fix style consistency issues caused by one-off component implementations?▼

Fixing style consistency issues requires identifying root causes like hard-coded values and one-off components, replacing them with design system tokens and variants, consolidating reusable code into the library, and removing orphaned styles to produce a prioritized normalization plan.

Does UI normalization enforce accessibility requirements and keyboard focus?▼

UI normalization enforces accessibility requirements by ensuring typography, color contrast, and keyboard focus match established design system patterns, verifying that component variants and motion conform to interaction standards during frontend refactors and feature updates.

Can I use design system normalization for legacy feature updates across web applications?▼

Design system normalization suits legacy feature updates across web applications by harmonizing outdated flows, replacing custom controls with system components, aligning spacing and motion, and running validation checks to ensure the updated interface meets current standards.

What limitations exist when consolidating orphaned code during a component library migration?▼

When consolidating orphaned code during a component library migration, limitations arise from deeply intertwined custom styles and functional inconsistencies that require careful gap analysis to separate cosmetic deviations from behavioral changes before swapping elements and running regression tests.

Related Skills

Explore More Design & Creative Skills→
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
hb9397hb9397

frontend-design

Implements responsive frontend UI components with CSS variables and design tokens.

Community
Advanced
Higashi-KotaHigashi-Kota

component-fix

Fix UI component implementations in design-system repositories.

Community
Intermediate
MuccariniMuccarini

normalize

Align frontend UI components with design system tokens and document normalization.

Community
Intermediate