normalize

Normalize frontend components to align with design system tokens and accessibility standards.

Updated Mar 24, 2026
One-click install
npx skills add https://github.com/delbyte/ciao-bello-website --skill normalize-delbyte
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/delbyte/ciao-bello-website/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/delbyte/ciao-bello-website --skill normalize-delbyte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize a feature to align with the design system standards.

Core Features & Use Cases

  • Align typography, color tokens, spacing, and components with the design system.
  • Ensure accessibility and consistency across UI patterns.
  • Use case: when a feature diverges from tokens, apply normalization to bring it in line with tokens and guidelines.

Quick Start

Apply the normalization workflow to align the feature with the design system using the provided design tokens and patterns.

Frequently Asked Questions about normalize

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

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

To align frontend components with your design system, you normalize typography, color, spacing, and motion tokens to ensure UI consistency. This applies a structured workflow to bring divergent features back into compliance with your established design standards.

What is the best way to fix UX inconsistency across frontend features?

Fixing UX inconsistency requires normalizing features against your design system standards. By auditing typography, color, spacing, and accessibility patterns, you enforce token usage and resolve visual divergence across the project's UI components.

Does normalizing a design system require checking accessibility compliance?

Yes, normalizing a design system requires checking accessibility compliance. The process explicitly addresses accessibility alongside color and typography tokens to ensure that UI patterns meet guidelines and deliver a consistent user experience.

How to normalize UI typography and spacing using design tokens?

Normalize UI typography and spacing by applying a Plan-Execute-Clean Up workflow that consults your design tokens. This aligns frontend components with the project's design system standards, ensuring consistent application of spacing and typography rules.

When do I need to normalize a feature against design system standards?

You need to normalize a feature against design system standards when it diverges from established tokens and guidelines. Apply normalization to bring typography, color, spacing, and motion back in line with the project's UX consistency requirements.

What is the normalize workflow for frontend design tokens?

The normalize workflow for frontend design tokens is a Plan-Execute-Clean Up process that consults a Context Gathering Protocol. It aligns features with design system standards, correcting typography, color, spacing, and accessibility inconsistencies.