i-normalize

Normalize frontend UI components to match design system tokens and conventions.

Updated Mar 30, 2026
One-click install
npx skills add https://github.com/Patkik/Multi-tenant-SaaS-Catering-V2 --skill i-normalize-patkik
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: i-normalize
Source: https://github.com/Patkik/Multi-tenant-SaaS-Catering-V2/tree/main/.agents/skills/i-normalize
Command: npx skills add https://github.com/Patkik/Multi-tenant-SaaS-Catering-V2 --skill i-normalize-patkik

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize and unify the look and feel of features to meet the design system standards, reducing visual drift and inconsistent UX.

Core Features & Use Cases

  • Design normalization: Align typography, color, spacing, and components with tokens and overarching system guidelines.
  • Component replacement: Replace bespoke UI with design system components to ensure cross-feature consistency.
  • Use Case: When a feature deviates from tokens or patterns, apply normalization to achieve a cohesive user experience.

Quick Start

Run a normalization pass against the current feature context to apply design tokens and standard patterns.

Frequently Asked Questions about i-normalize

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

FAQPage Schema
How do I normalize frontend UI components to match a design system?

To normalize frontend UI components, you apply design tokens for typography, color, and spacing, replacing bespoke custom styles with standard system components to ensure visual consistency and reduce UX drift across features.

What is design system normalization and when do I need it?

Design system normalization is the process of aligning deviating frontend features with overarching system guidelines. You need it when custom styles cause visual drift, ensuring cohesive and accessible user experiences across cross-feature UI.

How do I replace custom styles with design tokens for typography and spacing?

You replace custom styles by running a normalization pass against the current feature context, which enforces the use of design tokens for typography and spacing, replacing bespoke UI with standard design system components.

Does frontend normalization ensure accessibility and UX consistency?

Yes, frontend normalization ensures accessibility and UX consistency by enforcing design tokens and standard component conventions. It aligns features with overarching system guidelines in accordance with the Context Gathering Protocol.

What is the best way to fix visual drift in frontend features?

The best way to fix visual drift is to normalize designs by replacing bespoke UI with design system components. This unifies the look and feel of features to meet design system standards and ensures consistent UX.

Can I use design tokens to normalize spacing and typography without breaking component conventions?

Yes, you can use design tokens to normalize spacing and typography without breaking component conventions. The process aligns typography, color, and spacing with overarching system guidelines while replacing bespoke UI with standard components.