skills.rest
Bloodrey41
Bloodrey41COMMUNITY
Explore all skills by this author →
GitHub

normalize

Audit UI implementations and realign typography, color, spacing, and tokens to the design system.

Updated Nov 13, 2023
Search Tags:#ui#consistency#accessibility#frontend#tokens#design-system#design-drift
One-click install
npx skills add https://github.com/Bloodrey41/dotfiles --skill normalize-bloodrey41
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Bloodrey41/dotfiles/tree/main/.claude/skills/normalize
Command: npx skills add https://github.com/Bloodrey41/dotfiles --skill normalize-bloodrey41

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit and realign UI implementations to match the design system's typography, color, spacing, and tokens. This helps eliminate design drift and ensures a cohesive user experience.

Core Features & Use Cases

  • Audits components for token consistency across typography, color, and spacing.
  • Replaces custom styles with design-system components to improve consistency and reusability.
  • Ensures accessibility and responsive behavior aligns with system standards.
  • Use Case: When a feature shows mismatched tokens or inconsistent spacing, apply a normalization pass to bring it back into the system.

Quick Start

Invoke the Design System Context Gathering Protocol on the target feature and apply token-based typography, color, and spacing updates.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I fix design drift in frontend components?▼

Identify design drift by auditing UI components for mismatched typography, color, and spacing tokens, then realign them to design system standards to eliminate inconsistent styles.

How do I enforce design token usage across inconsistent UI components?▼

Enforce token usage by auditing UI implementations for custom styles and replacing them with design-system components, ensuring typography, color, and spacing match token standards.

What is the best way to audit a feature for design system mismatches?▼

Audit for mismatches by invoking a design system context gathering protocol on the target feature, identifying token gaps and inconsistent spacing before applying realignment updates.

Does UI normalization also verify accessibility compliance?▼

Yes, UI normalization verifies accessibility and responsive behavior, ensuring realigned components and tokens meet system standards for a cohesive user experience.

When should I apply a design system normalization pass to my frontend code?▼

Apply a normalization pass when a feature shows mismatched tokens, inconsistent spacing, or custom components that need replacing with system components to correct design drift.

Related Skills

Explore More Design & Creative Skills→
veerababumanyamveerababumanyam

frontend-design

Generate production-grade frontend interfaces with design-system tokens and reusable components.

Community
Basic
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
PatkikPatkik

i-normalize

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

Community
Intermediate