skills.rest
nsuberi
nsuberiCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Audit and realign UI components, spacing, tokens, and accessibility to a design system.

Updated Jul 5, 2025
Search Tags:#ui#accessibility#refactoring#frontend#tokens#design-system#component-library
One-click install
npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill normalize-nsuberi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/nsuberi/proto-portal-showcase-hub/tree/main/apps/ai-builders-portal/.claude/skills/normalize
Command: npx skills add https://github.com/nsuberi/proto-portal-showcase-hub --skill normalize-nsuberi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The normalize skill addresses visual and behavioral drift where features, pages, or components diverge from an established design system by auditing inconsistencies and prescribing concrete fixes that restore token usage, spacing, components, and accessibility.

Core Features & Use Cases

  • Design system discovery & analysis: Locate and study design tokens, component libraries, and style guides to establish the canonical patterns and principles.
  • Normalization plan & execution: Replace one-off implementations with system components, swap hard-coded values for tokens, correct spacing and layout, and align motion and interaction patterns.
  • Cleanup & verification: Consolidate reusable components into the shared design system, remove orphaned code, run linting/type checks, and validate accessibility and responsive behavior.
  • Use case: Convert a mismatched product page with bespoke buttons and spacing into a consistent, accessible implementation that uses shared components and tokens.

Quick Start

Run the normalize skill to audit and realign the checkout page's components, spacing, tokens, and accessibility to match the design system.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I audit UI components for design system drift?▼

Replace one-off component implementations with shared system components, swap hard-coded values for design tokens, correct spacing and layout, and align motion patterns. This normalization process restores visual and behavioral consistency across frontend pages and routes.

What is the best way to refactor frontend code to use design tokens?▼

The best way to refactor frontend code is to replace hard-coded values with established design tokens, update spacing and layout configurations, and consolidate bespoke elements into shared component library variants. This ensures UI realignment with canonical design system standards.

Do I need access to design system documentation to normalize a component library?▼

Yes, you need access to design system documentation, component libraries, and source code to normalize a component library. These resources establish the canonical patterns required to replace bespoke implementations, apply tokens, and validate accessibility compliance accurately.

How do I fix accessibility and responsiveness issues during UI refactoring?▼

Fix accessibility and responsiveness issues during UI refactoring by aligning interaction patterns with system standards, updating spacing and component variants, and running validation checks. This ensures the realigned UI meets established behavioral and responsive design requirements.

What causes visual drift in frontend component libraries?▼

Visual drift in frontend component libraries is caused by introducing one-off implementations, hard-coded values, and bespoke spacing that bypass established design tokens. This divergence breaks consistency in token usage, component variants, motion, and accessibility across pages.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced
rmjamesrmjames
1

Brand Guidelines

Enforce design system tokens for spacing, color, and typography in web interfaces.

Community
Basic
Tea-4-LifeTea-4-Life

normalize

Normalize frontend UI features by replacing hard-coded values with design tokens.

Official
Intermediate
samcannassamcannas

normalize

Align UI components to design tokens for spacing, typography, and color.

Community
Advanced