normalize

Name: normalize
Availability: InStock
Author: Convex

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

Ready to run

npx skills add https://github.com/get-convex/components-submissions-directory --skill normalize-get-convex

💬 Prompt for ChatGPT / Claude Chat▼

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.