skills.rest
get-convex
get-convexOFFICIAL
Explore all skills by this author →
Website𝕏@convex_devGitHub

normalize

Audit and realign UI to match design system tokens and patterns.

9|3|Updated Nov 28, 2025
Search Tags:#consistency#accessibility#refactor#tokens#ui-design#design-system
One-click install
npx skills add https://github.com/get-convex/components-submissions-directory --skill normalize-get-convex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/get-convex/components-submissions-directory/tree/main/.codex/skills/normalize
Command: npx skills add https://github.com/get-convex/components-submissions-directory --skill normalize-get-convex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audits and realigns UI to match design system standards, spacing, tokens, and patterns. Use when the user mentions consistency, design drift, mismatched styles, tokens, or wants to bring a feature back in line with the system.

Core Features & Use Cases

  • Discover and document the design system principles, tokens, typography, colors, and spacing.
  • Analyze the target feature to identify deviations from the system.
  • Create and execute a normalization plan: replace custom styles with design tokens, align typography, color, spacing, and components.
  • Ensure accessibility and responsive consistency; verify with approved patterns.
  • Progressive clean up and DRY sharing; consolidate reusable assets where appropriate.

Quick Start

Analyze the target feature and implement a design-system-based normalization pass to align typography, spacing, colors, components, and accessibility.

Frequently Asked Questions about normalize

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

FAQPage Schema
What is design system normalization and when do I need it?▼

It audits and realigns UI to match design system standards, replacing custom styles with design tokens. This resolves design drift, mismatched styles, and inconsistent typography, color, or spacing across features.

How do I align UI components to design tokens and fix style drift?▼

Analyze the target feature for deviations, create a normalization plan, and replace custom styles with approved design tokens for typography, color, spacing, and components to ensure cohesive user interfaces.

Can I use this normalization process for both accessibility and responsive consistency?▼

Yes, the normalization process verifies UI against approved design patterns to ensure accessibility and responsive consistency during execution and cleanup, validating typography, color, and spacing against established guidelines.

What's the best way to refactor custom styles into shared design system assets?▼

Follow a structured process of discovery, analysis, planning, execution, and cleanup. This progressively replaces custom styles with design tokens and consolidates reusable assets through DRY sharing.

Does UI normalization require existing design tokens and guidelines to work?▼

The process begins by discovering and documenting existing design system principles, tokens, typography, colors, and spacing. It validates UI realignment against these guidelines to ensure cohesive interfaces.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
pbakauspbakaus
57.3k

extract

Identify reusable patterns, components, and tokens and consolidate them into a design system.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

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

Community
Advanced
nsuberinsuberi

normalize

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

Community
Advanced