skills.rest
riabtsev
riabtsevCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Normalize UI features to align with design system standards.

Updated May 5, 2026
Search Tags:#accessibility#design system#design tokens#ui consistency#ui normalization#front-end refactor
One-click install
npx skills add https://github.com/riabtsev/viscore_main --skill normalize-riabtsev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/riabtsev/viscore_main/tree/main/.github/skills/normalize
Command: npx skills add https://github.com/riabtsev/viscore_main --skill normalize-riabtsev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It fixes UI drift and inconsistencies by bringing a specific feature back into alignment with your design system’s typography, color palette, spacing, component patterns, and interaction rules.

Core Features & Use Cases

  • Design-system audit & gap analysis: Identifies where the feature deviates from established guidelines and whether issues are cosmetic or structural.
  • Token- and component-driven redesign: Replaces hard-coded styles with design tokens and swaps custom implementations for design-system components.
  • Consistency across UX, accessibility, and responsiveness: Ensures interaction behavior, responsive breakpoints, and accessibility details (e.g., focus states and contrast) match system requirements.

Quick Start

Use the normalize skill to redesign the specified page or component so its styles, components, and UX patterns fully match the 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 fix UI inconsistencies and design system drift across my front-end components?▼

UI inconsistencies and design system drift are fixed by auditing the feature for deviations, replacing hard-coded styles with design tokens, and swapping custom implementations for standard design-system components.

What is the best way to normalize UI typography and spacing to match established design tokens?▼

Normalizing UI typography and spacing requires a context gathering protocol to identify mismatches, followed by a redesign that applies established design tokens and patterns for full alignment.

How do I conduct a design system audit for a feature with divergent interaction patterns?▼

A design system audit identifies where a feature deviates from established guidelines, determining whether interaction pattern issues are cosmetic or structural before redesigning with standard components.

Does UI normalization also fix accessibility and responsiveness mismatches?▼

UI normalization fixes accessibility and responsiveness mismatches by ensuring interaction behavior, responsive breakpoints, and accessibility details like focus states and contrast match system requirements.

What do I need before normalizing a UI feature with hard-coded styles?▼

Before normalizing a UI feature, you need to run a frontend-design context gathering protocol to analyze the current implementation and establish the standard tokens and patterns for redesign.

When should I not use a token-driven redesign for my UI?▼

A token-driven redesign is not suitable when the feature's design system deviations are structural rather than cosmetic, or when established design tokens and component patterns are not yet defined.

Related Skills

Explore More Design & Creative Skills→
AskTinNguyenAskTinNguyen

normalize

Normalize web application UI components to align with design tokens.

Community
Advanced
nguyenthienthanhnguyenthienthanh
24

design-expert

Provides expert guidance on UI/UX design, design systems, and responsive layouts.

Community
Basic
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
amarnath3003amarnath3003
4

Dataset Lab UI Kit - Replication Skill

Recreate a neumorphic Control Console design system with Tailwind CSS and React components.

Community
Advanced