normalize

Name: normalize
Availability: InStock
Author: CHRONiiC

Normalize UI pages to a target design system with gap analysis and cleanup.

Updated May 14, 2026

Search Tags:#accessibility #refactoring #design system #design tokens #ui normalization #frontend UX #component consistency

Ready to run

npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill normalize-chroniicallydiistracted

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/chroniicallydiistracted/LorcanaChamp/tree/main/references/lorcana-simulator/.agents/skills/normalize
Command: npx skills add https://github.com/chroniicallydiistracted/LorcanaChamp --skill normalize-chroniicallydiistracted

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams reduce inconsistent UI implementations by analyzing a feature against their design system and then planning and applying the necessary updates to match established patterns.

Core Features & Use Cases

Design-system discovery: Identifies the relevant design guidelines, tokens, and component conventions before proposing changes.
Gap analysis: Pinpoints where typography, color, spacing, components, motion, responsiveness, and accessibility diverge from standards, separating cosmetic issues from functional mismatches.
Normalization execution plan: Produces a step-by-step refactor approach that replaces one-off implementations with design-system equivalents and removes hard-coded values in favor of tokens.

Quick Start

Ask the normalize skill to standardize your feature implementation to your design system by performing design-system discovery, inconsistency analysis, and a normalization plan followed by a refactor and cleanup pass.

Frequently Asked Questions about normalize

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

FAQPage Schema

How do I normalize UI components to match an existing design system?▼

Normalizing UI features against a design system eliminates visual and functional deviations by replacing hard-coded values with design tokens. It solves the problem of inconsistent frontend UX by ensuring typography, color, spacing, components, motion, and accessibility conform to established patterns.

What is the best way to find and fix design token inconsistencies in a frontend codebase?▼

The best way to fix design token inconsistencies is through a structured gap analysis that identifies hard-coded values and one-off component implementations. This process separates cosmetic issues from functional mismatches, allowing you to systematically replace deviations with target design-system equivalents.

How do I refactor a UI feature to improve accessibility and component consistency?▼

To refactor a UI feature for accessibility and component consistency, execute a normalization plan that updates typography, color, spacing, and motion to match your design system. Post-change cleanup with linting and testing is then required to prevent future regressions.

Can I use a normalization process to fix UI deviations across an entire route or page?▼

Yes, you can apply UI normalization to an entire page, route, or feature within your frontend codebase. The process analyzes the target area against your design system to eliminate deviations in responsiveness, motion, and accessibility, ensuring the whole route conforms to established UX patterns.

Does refactoring UI to use design tokens prevent future component inconsistencies?▼

Refactoring UI to use design tokens prevents future component inconsistencies when paired with post-change cleanup. Applying linting and testing after the normalization execution plan ensures that one-off implementations and hard-coded values do not reappear as regressions.