normalize

Normalize frontend designs to match official design-system tokens and components.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/riffluv/work1 --skill normalize-riffluv
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/riffluv/work1/tree/main/.agent/skills/impeccable/normalize
Command: npx skills add https://github.com/riffluv/work1 --skill normalize-riffluv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize designs to match the official design system and ensure consistency.

Core Features & Use Cases

  • Typography alignment: ensure fonts, weights, and line heights align with design tokens.
  • Color and spacing normalization: apply tokens for color, spacing, and elevation across components.
  • Use Case: when adding a new feature, run normalization to remove drift and ensure visual coherence with the system.

Quick Start

Apply a normalization pass to the target feature to align typography, color tokens, spacing, and components with the design system.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align bespoke UI designs with an existing design system?

To align bespoke UI designs with an existing design system, apply a normalization pass that replaces custom styles with official design tokens for typography, color, and spacing. This removes design drift and ensures visual coherence across frontend features.

What is design system normalization and when should I use it?

Design system normalization is the process of enforcing a plan to match typography, color tokens, spacing, motion, and accessibility to official standards. Use it when adding a new feature to remove visual drift and ensure systemic consistency.

How do I replace hardcoded color and spacing values with design tokens?

Replace hardcoded color and spacing values by running a normalization pass that identifies bespoke styles and applies official design-system tokens. The process includes validation and cleanup steps to maintain token consistency across components.

Can I use design system normalization to fix typography and accessibility drift?

Yes, design system normalization can fix typography and accessibility drift by aligning fonts, weights, line heights, and accessibility attributes with official design tokens. It enforces a strict normalization plan to ensure components meet system standards.

What is the best way to ensure component usage consistency across frontend features?

The best way to ensure component usage consistency is to enforce a normalization plan that replaces bespoke styles with official design-system components. This process includes validation and cleanup steps to maintain systemic alignment and visual coherence.