normalize

Audit UI components and realign them with design system standards.

1|Updated Oct 27, 2025
One-click install
npx skills add https://github.com/sandrasocial/sselfie-9g --skill normalize-sandrasocial
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/sandrasocial/sselfie-9g/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/sandrasocial/sselfie-9g --skill normalize-sandrasocial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI elements drift from the design system, causing inconsistency, broken tokens, and poor user experience.

Core Features & Use Cases

  • Audit: Scan pages, routes, or components to detect deviations from design principles, tokens, and patterns.
  • Realignment: Replace custom styles with design system tokens for typography, colors, spacing, and motion.
  • Component Replacement: Swap one‑off implementations for standard design system components.
  • Accessibility Enforcement: Verify contrast, ARIA labels, and focus states match system guidelines.
  • Cleanup: Remove orphaned code, consolidate shared components, and run lint/tests to ensure quality.

Quick Start

Ask normalize to audit and align the homepage component to 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 audit UI components for design system deviations?

To audit UI components for design system deviations, scan pages, routes, or individual components to detect misalignments in typography, color tokens, spacing, and component patterns. The audit verifies visual consistency and token usage against documented guidelines.

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

Design system normalization is the process of realigning UI elements that have drifted from established standards. You need it when custom styles cause broken tokens, visual inconsistency, and poor user experience across features.

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

Replace custom styles with design tokens by scanning components for one-off implementations and swapping them with standard design system tokens for typography, colors, spacing, and motion. This realignment ensures visual consistency.

Can I enforce accessibility guidelines like ARIA labels and contrast during a UI audit?

Yes, you can enforce accessibility guidelines during a UI audit. The process verifies that contrast ratios, ARIA labels, and focus states match system guidelines to ensure components are accessible.

Does normalizing UI components help remove orphaned code and consolidate shared components?

Normalizing UI components helps remove orphaned code by replacing one-off implementations with standard design system components. The cleanup process consolidates shared components and runs lint tests to ensure quality.