skills.rest
Oussemasahbeni
OussemasahbeniCOMMUNITY
Explore all skills by this author →
Website𝕏@Spike_2002GitHub

normalize

Normalize front-end feature UI implementations to match a design system.

51|7|Updated Dec 25, 2025
Search Tags:#accessibility#refactoring#design system#component patterns#ui tokens#ui consistency
One-click install
npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill normalize-oussemasahbeni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Oussemasahbeni/spartan-admin-dashboard/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/Oussemasahbeni/spartan-admin-dashboard --skill normalize-oussemasahbeni

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It resolves inconsistencies between a feature’s UI implementation and your design system, improving visual coherence, UX alignment, and maintainable front-end patterns.

Core Features & Use Cases

  • Design system discovery & alignment: Identifies the correct principles, tokens, and component conventions before making changes.
  • Feature inconsistency analysis: Pinpoints deviations in typography, color/theming, spacing/layout, components, motion, responsiveness, and accessibility.
  • Normalization execution & cleanup: Refactors toward design-system equivalents, replaces hard-coded values with tokens, and removes orphaned or duplicate code without breaking functionality.

Use case: After adding a new page or route, the UI looks “almost right” but feels inconsistent with the rest of the app; use this skill to bring it into full compliance with established patterns and accessibility requirements.

Quick Start

Ask the skill to normalize the specific page or route you want to align by specifying the feature name (for example, “normalize the settings route UI”).

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align existing feature UI with my design system tokens?▼

To align feature UI with your design system, identify deviations in typography, color, and spacing, then refactor hard-coded values into standard tokens and components. This process systematically corrects one-off styling and UX pattern mismatches within a single front-end codebase.

What is UI normalization for front-end component patterns?▼

UI normalization is the process of auditing a feature's implementation against established design system principles, replacing custom components and token violations with standard equivalents, and executing post-change cleanup to prevent regressions and code duplication.

How do I fix design system inconsistencies and token violations in a new route?▼

Fix design system inconsistencies by performing feature inconsistency analysis to pinpoint deviations in responsiveness and accessibility, then normalize the execution by replacing custom implementations with standard tokens and removing orphaned code.

Can I refactor hard-coded styling values without breaking existing UI functionality?▼

Yes, you can refactor hard-coded styling values by replacing them with design system equivalents while executing post-change cleanup to ensure visual coherence and UX alignment without breaking existing functionality or introducing duplicate code.

When should I normalize a page UI to match accessibility and interaction patterns?▼

You should normalize page UI when a newly added page or route looks almost right but feels inconsistent with the rest of the app, requiring full compliance with established interaction patterns and accessibility requirements.

Related Skills

Explore More Design & Creative Skills→
luyangliuableluyangliuable

normalize

Normalize features or pages to match an existing design system and UI patterns.

Community
Advanced
cosmixcosmix
53

code-migration

Plan staged code migrations with rollback and feature flags.

Community
Advanced
TheCardGoatTheCardGoat
14

normalize

Audits and redesigns UI features to conform to an existing design system.

Official
Advanced
nachopalmerinachopalmeri

normalize

Identify feature deviations and align custom styles with design system tokens.

Community
Advanced