skills.rest
BilsoNyuMNAM
BilsoNyuMNAMCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Align frontend UI patterns with design system tokens and guidelines.

Updated Aug 27, 2026
Search Tags:#typography#tokens#color#design-system#spacing#ui-consistency#normalize
One-click install
npx skills add https://github.com/BilsoNyuMNAM/hypertrophy-project --skill normalize-bilsonyumnam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/BilsoNyuMNAM/hypertrophy-project/tree/main/.gemini/skills/normalize
Command: npx skills add https://github.com/BilsoNyuMNAM/hypertrophy-project --skill normalize-bilsonyumnam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design outputs can drift from the design system, creating visual inconsistency and maintenance burden across products.

Core Features & Use Cases

  • Align typography, color, spacing, and components with design tokens from the system.
  • Audit and normalize UI patterns across features to ensure cohesive UX.
  • Use case: apply token-based styling to a feature to bring it in line with the system.

Quick Start

Normalize the feature to match the design system guidelines.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align UI components with design tokens to fix visual drift?▼

To align UI components with design tokens, apply token-based styling to typography, color, and spacing to eliminate visual drift and ensure UI consistency across products.

What is design token migration and when do I need it?▼

Design token migration replaces hardcoded values with design system tokens to resolve visual inconsistency. It is needed when UI patterns drift across features and maintenance burden increases.

How do I audit UI patterns for design system compatibility?▼

Auditing UI patterns requires checking design-system compatibility across features. This process normalizes typography, spacing, and color usage while incorporating accessibility considerations to ensure cohesive UX.

Can I normalize frontend design across multiple projects?▼

Yes, you can normalize frontend design across projects by applying token-based styling to features. This aligns typography, color, and spacing with your design system guidelines to maintain UI consistency.

Does normalizing UI components require checking accessibility?▼

Yes, normalizing UI components requires accessibility considerations. When applying token-based styling to align frontend design, checks are performed to ensure the normalized output meets accessibility standards.

Related Skills

Explore More Design & Creative Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
iButtersiButters
3

css-tokens

Generate CSS design tokens for colors, spacing, typography, and theming.

Community
Intermediate
GoosLabGoosLab

moai-domain-uiux

Standardize design tokens, components, icons, accessibility, and theming for React and Vue apps.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced