skills.rest
yckkkk
yckkkkCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Align frontend components to design system tokens and patterns.

1|Updated May 6, 2026
Search Tags:#typography#accessibility#color#design-system#design-tokens#ui-consistency#normalize
One-click install
npx skills add https://github.com/yckkkk/reo --skill normalize-yckkkk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/yckkkk/reo/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/yckkkk/reo --skill normalize-yckkkk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure all features conform to a shared design system, eliminating drift and improving consistency across products.

Core Features & Use Cases

  • Enforces design tokens across typography, color, and spacing to maintain visual harmony.
  • Replaces one-off styles with shared components and patterns to reduce divergence.
  • Use Case: When shipping a new feature, run normalization to align visuals with tokens and patterns.

Quick Start

Provide a normalization pass for a new feature to align it with the design system 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 fix UI inconsistencies and align frontend components with a design system?▼

This process ensures visual harmony by enforcing shared design tokens and replacing one-off styles with shared components, eliminating design drift across your products.

What are design tokens and how do they enforce UI consistency?▼

Using design tokens eliminates visual drift by replacing hardcoded values with centralized variables, maintaining strict adherence to your design system's responsive patterns.

When should I run a design system normalization pass on my project?▼

Running normalization before shipping prevents design drift by ensuring your feature utilizes compliant system components and adheres to established accessibility patterns.

Does UI normalization help with accessibility and responsive design patterns?▼

Normalization enforces these standards by routing your feature through shared design tokens and patterns, guaranteeing that responsive and accessibility requirements are met.

Can I use this to replace one-off styles with shared components?▼

Replacing one-off styles during the normalization pass eliminates divergence and ensures all features conform to the shared design system, improving overall visual harmony.

What is the best way to eliminate design drift across multiple products?▼

This approach guarantees that every feature conforms to the shared design system, eliminating drift and improving consistency across your entire product suite.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
ZESCODEZESCODE

browser-qa

Automate visual regression testing and UI interaction verification for web applications.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
Eng0AIEng0AI
15

gsap-awwwards-website

Build a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.

Official
Advanced