skills.rest
AkaraChen
AkaraChenCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Audits and realigns UI features to match design system tokens, components, and patterns.

Updated Apr 4, 2026
Search Tags:#accessibility#refactoring#frontend#design system#component library#design tokens#ui consistency
One-click install
npx skills add https://github.com/AkaraChen/proxy-up --skill normalize-akarachen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/AkaraChen/proxy-up/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/AkaraChen/proxy-up --skill normalize-akarachen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI features drift away from the design system over time, accumulating hard-coded values, one-off components, and inconsistent patterns that hurt usability and maintainability. This Skill audits a feature against your design system and systematically realigns it. ## Core Features & Use Cases - Design System Discovery: Locates and studies design system documentation, tokens, and component conventions before making changes. - Multi-Dimension Normalization: Fixes typography, color, spacing, components, motion, responsive behavior, accessibility, and progressive disclosure to match established standards. - Cleanup and Consolidation: Removes orphaned code, consolidates reusable components into shared paths, and verifies quality with linting, type-checking, and tests. - Use Case: A settings page was built with custom buttons and hard-coded hex colors. Invoke this Skill to replace them with design system components and tokens, matching the rest of the app. ## Quick Start Normalize the settings page to match our 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 with my design system?▼

Run a normalization pass that audits the feature against design system documentation, then replaces hard-coded values with design tokens and custom implementations with design system components. Verify the result with linting, type-checking, and tests.

What does the normalize skill check in a feature?▼

It reviews typography, color and theme, spacing and layout, components, motion and interaction, responsive behavior, accessibility, and progressive disclosure. Each dimension is compared against established design system patterns and tokens.

Does normalization require existing design system documentation?▼

Yes, the workflow begins by discovering design system documentation, style guides, or component libraries. If no design context exists, it directs you to establish one first rather than guessing at design principles.

When should I not use design system normalization?▼

Avoid it when a feature intentionally explores new design directions or when no design system exists yet. Normalization enforces existing standards, so it is unsuitable for greenfield design exploration or prototyping.

What happens to custom components after normalization?▼

Custom components with design system equivalents are replaced. Genuinely reusable new components are moved to the design system or shared UI path, while orphaned code and obsolete styles are deleted.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

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

Community
Advanced
kelsi-andrewsskelsi-andrewss

merge

Validate branch merges with build, test, lint, and review gates.

Community
Advanced
mheersmheers

normalize

Analyze feature implementations against design-system guidelines and apply normalization plans.

Community
Advanced
billh93billh93

normalize

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

Community
Advanced