normalize

Align frontend UI features with design system tokens and components.

Updated Jan 30, 2026
One-click install
npx skills add https://github.com/teegin-g/Slopcast --skill normalize-teegin-g
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/teegin-g/Slopcast/tree/main/.cursor/skills/normalize
Command: npx skills add https://github.com/teegin-g/Slopcast --skill normalize-teegin-g

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure design fidelity by aligning new or updated features with a defined design system, reducing drift and inconsistencies across UI.

Core Features & Use Cases

  • Enforces typography, color, spacing, and token usage to match tokens and guidelines.
  • Reuses design-system components and avoids custom one-off implementations.
  • Use Case: When pushing a new feature, run a normalization pass to update styles and tokens for consistency before review.

Quick Start

Command the AI to normalize the current feature to the design system tokens and components.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I eliminate design drift when aligning frontend UI with my design system?

Eliminate design drift by running a normalization pass to align typography, color, and spacing with your design system tokens. This ensures token-based styling, consistent component usage, and adherence to accessibility and performance norms across web interfaces.

How do I normalize frontend UI styling to use design tokens and components?

To normalize frontend UI styling, command the AI to update styles and tokens for consistency. This enforces typography, color, and spacing alignment with guidelines while reusing design-system components to avoid custom one-off implementations before review.

Does design system normalization enforce accessibility and responsive behavior?

Design system normalization enforces accessibility and responsive behavior by ensuring token-based styling and adherence to performance norms. It aligns frontend UI features with guidelines across typography, color, spacing, and components for consistent web interfaces.

What is the best way to ensure design fidelity and reduce inconsistencies across UI?

The best way to ensure design fidelity and reduce inconsistencies is to align new or updated features with your defined design system. This token-based normalization pass updates styles and tokens before review, preventing custom implementations.

When do I need to run a design system normalization pass for a new feature?

You need to run a design system normalization pass when pushing a new feature to update styles and tokens for consistency before review. This ensures design fidelity by aligning frontend UI work with typography, color, spacing, and accessibility guidelines.

Why does my frontend UI have design drift and inconsistencies across components?

Frontend UI has design drift and inconsistencies due to custom one-off implementations. Running a normalization pass aligns features with design system tokens, enforcing consistent typography, color, spacing, and component usage to eliminate drift.