dsg-normalize

Normalize UI features to match design system tokens and patterns.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/180VRisLife/.claude --skill dsg-normalize
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dsg-normalize
Source: https://github.com/180VRisLife/.claude/tree/main/skills/dsg-normalize
Command: npx skills add https://github.com/180VRisLife/.claude --skill dsg-normalize

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize a feature or page to match the design system's tokens and patterns.

Core Features & Use Cases

  • Align typography, color, spacing, components, and motion to design tokens.
  • Transform misaligned UI into system-consistent patterns across pages, routes, and components.
  • Use case: when a new feature doesn't align with tokens, plan and apply normalization to match the design system.

Quick Start

Provide the feature details and I will generate a plan to normalize it to the design system.

Frequently Asked Questions about dsg-normalize

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

FAQPage Schema
How do I normalize a UI feature to match my design system tokens?

To normalize a UI feature, provide the feature details to generate a plan that aligns typography, color, spacing, and motion to your design tokens. This process replaces custom styles with system components to ensure UI consistency across product surfaces.

What is design system normalization for UI pages and components?

Design system normalization is the process of aligning misaligned UI pages, routes, and components to established design tokens and patterns. It consolidates styling by replacing custom styles with system components and verifying contrast and focus states.

How do I fix misaligned typography and color in my UI components?

Fix misaligned typography and color by applying a normalization plan that maps custom styles to your design system tokens. This ensures UI consistency by verifying contrast, focus states, and applying system components across the feature.

When do I need to consolidate custom styles with design tokens?

You need to consolidate custom styles with design tokens when a new feature does not align with your design system. Normalizing the feature ensures UI consistency by replacing custom styles with system components and verifying accessibility.

Does UI normalization verify accessibility and contrast states?

Yes, UI normalization verifies contrast and focus states to ensure accessibility across product surfaces. The normalization plan consolidates styling with design tokens and replaces custom styles with system components to meet accessibility requirements.

Can I normalize spacing and motion patterns across multiple product routes?

Yes, you can normalize spacing and motion patterns across multiple pages, routes, and components. The process aligns these properties to design tokens, transforming misaligned UI into system-consistent patterns and documenting the normalization plan.