skills.rest
primaERP
primaERPOFFICIAL
Explore all skills by this author →
WebsiteGitHub

normalize

Normalizes UI features to align with a design system's tokens and guidelines.

Updated Aug 23, 2026
Search Tags:#typography#accessibility#tokens#color#design-system#ui-consistency#normalize
One-click install
npx skills add https://github.com/primaERP/jmhz-xml-editor --skill normalize-primaerp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/primaERP/jmhz-xml-editor/tree/main/style_guide/.cursor/skills/normalize
Command: npx skills add https://github.com/primaERP/jmhz-xml-editor --skill normalize-primaerp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design implementations to match our design system, ensuring typography, color, spacing, and components are consistently applied across products.

Core Features & Use Cases

  • Align typography, color, spacing, and components with tokens and guidelines
  • Replace custom styles with design-system components to ensure consistency
  • Design-system-driven front-end handoffs and cross-team coordination

Quick Start

Analyze the current feature against the design system and propose concrete token-based changes to align 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 an existing design system?▼

To normalize UI to a design system, you analyze current frontend implementations and propose concrete token-based changes. This process replaces custom styles with design-system components to ensure typography, color, spacing, and accessibility align across teams.

What are design tokens and how do they enforce UI consistency?▼

Design tokens are centralized variables for typography, color, and spacing that enforce UI consistency across products. Applying them in frontend projects ensures components conform to design guidelines and maintain a unified visual language.

How do I align frontend handoffs with design system guidelines?▼

Align frontend handoffs by replacing custom styles with design-system components and enforcing token-based styling. This cross-team coordination ensures typography, color, and spacing match the design system precisely during implementation.

Does normalizing UI accessibility require specific design tokens?▼

Normalizing UI accessibility requires design tokens to align components with accessibility guidelines. Token-based styling ensures typography and color meet conformance standards across teams, maintaining consistent accessible behavior in frontend projects.

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

The best way to replace custom styles is to analyze the feature against your design system and apply concrete token-based changes. This ensures component replacement aligns typography, color, and spacing with established guidelines.

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
luisartolaluisartola

normalize

Align frontend components with design system tokens for typography, color, spacing, and accessibility.

Community
Advanced
vobasevobase
59

normalize

Normalize UI implementations to match a project's design system.

Official
Intermediate
jimiryquaijimiryquai

normalize

Refactor frontend UI styles to design system token-based values.

Community
Advanced