skills.rest
ky-zo
ky-zoCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Normalize UI features to match design system tokens and guidelines.

Updated Aug 12, 2023
Search Tags:#typography#accessibility#tokens#color#design-system#ui-consistency#normalize
One-click install
npx skills add https://github.com/ky-zo/kyzo --skill normalize-ky-zo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/ky-zo/kyzo/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/ky-zo/kyzo --skill normalize-ky-zo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalizes UI features to match a given design system, ensuring consistency across typography, color, spacing, and components.

Core Features & Use Cases

  • Discover and interpret design system guidelines, tokens, and patterns.
  • Analyze current implementations to identify deviations from tokens and accessibility standards.
  • Create and execute a normalization plan that updates typography, color palettes, spacing, and component usage to align with the system.
  • Use case: Redesign a feature page to replace hard-coded styles with tokens and system components.

Quick Start

Identify deviations from the design system in the current feature and implement token-based, accessible styles across typography, color, spacing, and components.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I normalize UI features to match my design system?▼

Normalize UI features by analyzing current implementations to identify deviations, replacing hard-coded values with design tokens across typography, color, spacing, and components to ensure UI consistency and accessibility.

What is design token normalization for UI consistency?▼

Design token normalization replaces hard-coded styles with standardized design system tokens for typography, color, and spacing, ensuring consistent UI components and validating responsive behavior during feature redesigns.

Can I use this to fix hard-coded styles during a feature redesign?▼

Yes, during a feature redesign you locate design tokens and system guidelines, replace hard-coded styles with tokens, and validate accessibility and responsive behavior to ensure the updated components conform to the design system.

How do I check accessibility standards when updating component usage?▼

Check accessibility standards by analyzing current implementations against system guidelines, ensuring token-based typography and color palettes meet requirements, and validating responsive behavior throughout the normalization plan execution.

What's the best way to replace hard-coded values with design tokens?▼

The best way is to discover and interpret design system guidelines, analyze the current feature for deviations, and execute a normalization plan that systematically updates typography, color, spacing, and components with tokens.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

normalize

Replace hard-coded UI styles with design system tokens.

Community
Advanced
PingMe-NetworkPingMe-Network

normalize

Normalize UI implementations to align with design system tokens and components.

Official
Intermediate
heyparth1heyparth1

extract

Extracts reusable UI components and design tokens from source code into a unified system.

Community
Advanced
santychuycomsantychuycom

normalize

Refactor UI elements to align with predefined design tokens and components.

Official
Advanced