normalize

Refactor frontend UI styles to design system token-based values.

Updated Mar 28, 2026
One-click install
npx skills add https://github.com/jimiryquai/pi-agent --skill normalize-jimiryquai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/jimiryquai/pi-agent/tree/main/skills/normalize
Command: npx skills add https://github.com/jimiryquai/pi-agent --skill normalize-jimiryquai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design drift by aligning a feature with the design system, ensuring consistent tokens, typography, spacing, and components across the product.

Core Features & Use Cases

  • Design-system discovery: Identify gaps between the feature and the design system, including tokens, typography, color, and spacing.
  • Token-based normalization: Replace hard-coded values with design tokens and ensure consistent naming and usage across components.
  • Component alignment: Audit and align components to match established design system patterns and accessibility guidelines.
  • Documentation and guardrails: Produce guidelines for ongoing conformance and future refactors.

Quick Start

Initiate a design-system normalization by mapping the feature to tokens, refactoring styles to token-based values, and updating components to match established patterns.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I fix UI consistency and align frontend features with a design system?▼

Normalize design drift by auditing feature gaps in typography, color, and spacing, then replacing hard-coded values with design tokens to ensure consistent UI alignment across projects.

What is design token normalization and how does it work for UI components?▼

Design token normalization replaces hard-coded values with design system tokens, ensuring consistent naming and usage across typography, color, and spacing to eliminate visual drift.

How do I replace hard-coded color and typography values with design tokens?▼

Map feature styles to existing design system tokens, refactor hard-coded typography and color values to token-based references, and verify consistent naming across components.

How do I audit UI components for design system conformance and accessibility?▼

Audit UI components by identifying gaps between features and the design system, aligning components to established patterns, and verifying accessibility guidelines for conformance.

Can I generate guardrails for ongoing design system conformance after refactoring?▼

Yes, generate documentation and guidelines for ongoing conformance and future refactors to ensure normalized features maintain design system alignment over time.

Does normalizing a design system require access to existing design tokens?▼

Yes, design system normalization requires access to existing design system tokens and the ability to refactor styles to token-based values for proper alignment.