skills.rest
kazdenc
kazdencCOMMUNITY
Explore all skills by this author →
𝕏@kazdencGitHub

normalize

Refactor feature UI to align with design system standards using tokens and components.

42|5|Updated Mar 8, 2026
Search Tags:#consistency#design system#frontend development#ux/ui#component standardization#ui alignment
One-click install
npx skills add https://github.com/kazdenc/builder-skills --skill normalize-kazdenc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/kazdenc/builder-skills/tree/main/.claude/skills/design/refine/normalize
Command: npx skills add https://github.com/kazdenc/builder-skills --skill normalize-kazdenc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that designs are consistent with established design system standards, preventing visual and functional divergence across features.

Core Features & Use Cases

  • Consistency Enforcement: Aligns typography, color, spacing, and components with design system rules.
  • Pattern Adherence: Replaces one-off implementations with standardized components and tokens.
  • Use Case: When a new feature's UI elements don't match the existing look and feel, this skill can be used to refactor them to conform to the company's design system.

Quick Start

Normalize the checkout form 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 align a new feature's UI with my existing design system standards?▼

To align UI with a design system, you must analyze and redesign the feature to match established typography, color, spacing, and component rules. This process replaces hard-coded values with design tokens and swaps custom implementations for existing components.

When should I replace hard-coded values with design tokens for UI consistency?▼

You should replace hard-coded values with design tokens when a new feature's UI elements do not match the established look and feel. This ensures visual and functional consistency across features by enforcing strict adherence to standardized patterns.

What is the best way to ensure UX consistency and accessibility in frontend development?▼

The best way to ensure UX consistency and accessibility is to refactor non-standard UI elements to conform to design system rules. This involves replacing one-off implementations with standardized components and established patterns that meet accessibility requirements.

Can I refactor custom component implementations to use standardized design tokens?▼

Yes, you can refactor custom component implementations by analyzing the specified feature and replacing one-off code with existing standardized components. This pattern adherence ensures the UI conforms to established company design system standards.

Why does my frontend feature have visual divergence from the rest of the application?▼

Visual divergence occurs when new features use hard-coded values and custom implementations instead of design system standards. Refactoring these elements to use established tokens and standardized components addresses these inconsistencies and restores UI alignment.

Related Skills

Explore More Design & Creative Skills→
FldicoahkiinFldicoahkiin
1

normalize

Audits UI and aligns typography, spacing tokens, and patterns to design system standards.

Community
Advanced
adnanmuelleradnanmueller
2

senior-frontend-engineer

Translate design specs and API contracts into Next.js frontend interfaces.

Community
Advanced
SL-A-SHSL-A-SH

extract

Extract reusable UI components, design tokens, and interaction patterns from codebases.

Community
Intermediate
chroniicallydiistractedchroniicallydiistracted

normalize

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

Community
Advanced