normalize

Align frontend feature UI with design system tokens and patterns.

Updated Mar 19, 2026
One-click install
npx skills add https://github.com/ai-sapira-poc/pharo-agents --skill normalize-ai-sapira-poc
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/ai-sapira-poc/pharo-agents/tree/main/.claude/skills/normalize
Command: npx skills add https://github.com/ai-sapira-poc/pharo-agents --skill normalize-ai-sapira-poc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps bring an existing frontend feature into full alignment with the design system, ensuring consistency across typography, color, spacing, and components.

Core Features & Use Cases

  • Discover and align typography, color tokens, spacing scales, and component patterns to the system.
  • Create a normalization plan that replaces custom styles with design-token-driven equivalents.
  • Use case: when updating a feature to match new tokens or patterns across a product area.

Quick Start

Normalize the feature to align typography, color, 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 existing frontend UI with my design system tokens?

Yes, design system normalization covers accessibility by satisfying token usage, component substitutions, and responsive behavior to ensure UI consistency and compliance across product areas.

Can I update an existing feature's typography and color tokens to match a new design system?

Yes, you can update existing features by discovering and aligning typography, color tokens, spacing scales, and component patterns to the system, replacing custom styles with standardized equivalents.

What is the best way to normalize custom frontend styles into design-token-driven components?

The best way to normalize custom frontend styles is to apply a normalization plan that substitutes custom styles with design-token-driven equivalents, satisfying token usage and component patterns across the feature.

Does frontend design system normalization work for integrating new features?

Yes, design system normalization applies when integrating new features or updating existing ones, ensuring that typography, color, spacing, and components satisfy the design system's patterns and accessibility rules.

When do I need to normalize a feature's UI against a design system?

You need to normalize a feature's UI when updating a feature to match new tokens or patterns across a product area, ensuring that typography, color, spacing, and components fully align with the design system.