skills.rest
raphaelmans
raphaelmansCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Align frontend features with design system tokens for typography, color, spacing, and components.

Updated Feb 28, 2026
Search Tags:#typography#ui#accessibility#frontend#tokens#design-system#normalize
One-click install
npx skills add https://github.com/raphaelmans/agent-skills --skill normalize-raphaelmans
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/raphaelmans/agent-skills/tree/main/normalize
Command: npx skills add https://github.com/raphaelmans/agent-skills --skill normalize-raphaelmans

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure design consistency by aligning a feature's visuals and interactions with the organization's design system, reducing ad-hoc deviations.

Core Features & Use Cases

  • Reuses design tokens for typography, color, spacing, and components.
  • Guides refactors and redesigns to match tokens and patterns.
  • Use Case: When updating a page, run normalization to unify typography scale and spacing across sections.

Quick Start

Apply a design-system audit to the target feature and normalize typography, colors, spacing, and components to align with tokens.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align frontend UI components with my design system tokens?▼

To align frontend UI components with a design system, you apply a normalization audit that refactors typography, color theming, spacing, and components to match established tokens and reduce ad-hoc deviations.

What is design system normalization for frontend features?▼

Design system normalization is the process of auditing a feature's visual language and updating its typography scale, spacing, and colors to reuse existing tokens, ensuring consistent UI patterns across pages.

When do I need to normalize typography and spacing across UI sections?▼

You need to normalize typography and spacing across UI sections when updating a page or refactoring a feature, ensuring consistent visual language and replacing ad-hoc deviations with established design tokens.

Does design system normalization cover accessibility and responsive behavior?▼

Yes, design system normalization covers accessibility and responsive behavior, ensuring that refactored frontend features satisfy requirements for motion consistency, color theming, and token-based styling across different screen sizes.

How do I audit a feature's visual language for design token compliance?▼

You audit a feature's visual language by inspecting its typography, colors, and spacing against established tokens, then normalizing the components to replace ad-hoc deviations with matching design system patterns.

Can I use design system normalization for component replacement during a redesign?▼

Yes, you can use design system normalization during a redesign to guide component replacement, ensuring that new frontend features adopt consistent visual language and token-based styling instead of ad-hoc deviations.

Related Skills

Explore More Design & Creative Skills→
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
aaronbassettaaronbassett
4

flutter-core:flutter-ui-widgets

Provide a structured library of Flutter UI widgets for consistent layouts.

Community
Intermediate
Higashi-KotaHigashi-Kota

component-analysis

Analyze cross-component consistency across 12 design-system groups to detect pattern deviations.

Community
Intermediate
baasith6baasith6

converting-css-to-tailwind

Convert CSS selectors, properties, and rules to Tailwind CSS utility classes.

Community
Intermediate