skills.rest
nattergabriel
nattergabrielCOMMUNITY
Explore all skills by this author →
𝕏@eterdevGitHub

normalize

Align UI components and pages to design system tokens and patterns.

2|Updated Mar 18, 2026
Search Tags:#consistency#frontend#tokens#ui-design#aesthetics#design-system#normalize
One-click install
npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill normalize-nattergabriel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/nattergabriel/oasis-greenhouse/tree/main/frontend/.agents/skills/normalize
Command: npx skills add https://github.com/nattergabriel/oasis-greenhouse --skill normalize-nattergabriel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure every UI element and page adheres to the design system, eliminating visual drift and inconsistency.

Core Features & Use Cases

  • Design token enforcement: Ensure colors, typography, and spacing follow the system's tokens.
  • Component alignment: Replace custom styles with system components and patterns.
  • Use Case: When updating a new feature, run this skill to align its visuals with typography, color palette, and spacing rules across pages.

Quick Start

Provide a concrete design alignment for the target feature using design tokens and system components.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I align a feature's UI design with an existing design system?▼

To align a feature's UI design, you map its visual elements to the design system by enforcing design tokens, replacing custom styles with standard components, and checking typography, color, spacing, and responsive behavior for consistency.

What causes visual drift in frontend UI components?▼

Visual drift in frontend UI components occurs when developers use custom styles instead of system components, bypassing defined design tokens for typography, color palette, and spacing rules across different pages and interactions.

How do I enforce design token usage for color and spacing across pages?▼

You enforce design token usage by auditing the target feature's UI and replacing hardcoded values with the system's predefined typography, color, and spacing tokens to ensure uniform aesthetics and behavior.

Can I use this method to fix inconsistent responsive behavior and accessibility?▼

Yes, this alignment process evaluates UI components against design system requirements, specifically addressing accessibility considerations, responsive behavior, and pattern conformity to ensure consistent interactions across platforms.

What is the best way to replace custom styles with design system components?▼

The best way to replace custom styles is to analyze the divergent UI, identify matching system patterns, and apply the concrete design alignment using the established component library and design tokens.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
radenadriradenadri

codebase-conformity

Inspect existing patterns before writing new code in a codebase.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
agentik-osagentik-os
10

uiuxaudit

Audit UI/UX design inconsistencies across pages and components.

Community
Advanced