skills.rest
juanelojga
juanelojgaCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Align feature designs to design-system tokens, components, and patterns.

Updated Oct 30, 2025
Search Tags:#consistency#frontend#normalization#ui-ux#design-system#design-tokens#component-patterns
One-click install
npx skills add https://github.com/juanelojga/juanelojga-webpage --skill normalize-juanelojga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/juanelojga/juanelojga-webpage/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/juanelojga/juanelojga-webpage --skill normalize-juanelojga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize feature designs to match a centralized design system, reducing visual drift and UX fragmentation.

Core Features & Use Cases

  • Discovery & token alignment: identify tokens (colors, typography, spacing) and map deviations to design system equivalents.
  • Component substitution & consistency: replace bespoke UI with approved design-system components and patterns.
  • Guided quick-start for teams: provide a repeatable workflow for new features to ensure consistent UX.

Quick Start

Gather the design-system context and run normalization on the target feature to align it with the standard.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align feature designs with my design system?▼

To align feature designs with your design system, map UI deviations to approved design tokens and substitute bespoke components with standard patterns to ensure UI consistency.

What is design token normalization for frontend UI?▼

Design token normalization is the process of identifying colors, typography, and spacing tokens in feature designs and mapping them to centralized design system equivalents to reduce visual drift.

Why does UI fragmentation happen during feature development?▼

UI fragmentation happens during feature development when bespoke UI components bypass approved design system patterns, causing visual drift and inconsistent typography or spacing.

Do I need design tokens to enforce UI consistency across pages?▼

Yes, you need access to design tokens for colors, typography, and spacing to enforce UI consistency and successfully map feature deviations to design system equivalents.

How to replace bespoke UI components with approved design system patterns?▼

To replace bespoke UI components, run a normalization workflow on the target feature to identify deviations and substitute custom elements with approved design system component patterns.

What's the best way to ensure accessibility when aligning features to a design system?▼

The best way to ensure accessibility is to enforce tokenized styles, typography, and spacing through design system guidelines during the feature normalization workflow.

Related Skills

Explore More Design & Creative Skills→
ZiadNagarZiadNagar

animation-systems

Define motion tokens, choreography patterns, and reduced-motion support for design systems.

Community
Advanced
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced
WellApp-aiWellApp-ai
341

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

Official
Basic
MeechYourGoalsMeechYourGoals
2

ux-consistency-audit

Audit production applications for UX and design-system consistency.

Community
Advanced