skills.rest
Akenzz
AkenzzCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Normalize UI designs to match specified design system tokens and patterns.

Updated Aug 27, 2026
Search Tags:#design system#design tokens#frontend development#ui consistency#component standardization#ux refinement
One-click install
npx skills add https://github.com/Akenzz/Breaking-Bug --skill normalize-akenzz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Akenzz/Breaking-Bug/tree/main/frontend/app/.cursor/skills/normalize
Command: npx skills add https://github.com/Akenzz/Breaking-Bug --skill normalize-akenzz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that a given feature or design adheres strictly to established design system standards, resolving inconsistencies in UI/UX and maintaining a cohesive brand identity.

Core Features & Use Cases

  • Design System Adherence: Analyzes and modifies designs to match typography, color, spacing, and component standards.
  • Consistency Enforcement: Identifies and rectifies deviations from established patterns and tokens.
  • Use Case: A new feature's UI elements are visually inconsistent with the rest of the application. This Skill will analyze the feature and update its styling, components, and layout to perfectly match the company's design system.

Quick Start

Normalize the 'user-profile-card' component to match the design system.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I normalize UI components to match an existing design system?▼

To normalize UI components, the system analyzes feature designs and updates typography, color, spacing, and layout to strictly match established design tokens and component standards. This rectifies visual deviations and enforces overall UI consistency.

What is design system adherence and how does it enforce UI consistency?▼

Design system adherence ensures UI consistency by analyzing and modifying visual elements to conform to established patterns. It identifies deviations from design tokens and updates component styling to maintain a cohesive brand identity.

Do I need predefined design tokens before aligning designs with my system?▼

Yes, aligning designs with your system requires predefined design tokens. The normalization process relies on these established standards for typography, color, spacing, motion, and accessibility to rectify visual inconsistencies.

What's the best way to fix visual inconsistencies in frontend development?▼

The best way to fix visual inconsistencies in frontend development is to apply design system adherence. This process analyzes feature UI elements and updates their styling and layout to perfectly match established component libraries.

Can I use this to standardize typography and spacing for new UI features?▼

Yes, you can use this to standardize typography, color, spacing, and motion for new UI features. It analyzes the feature and updates its styling to perfectly match your company's established design system and component patterns.

Related Skills

Explore More Design & Creative Skills→
systempromptiosystempromptio
2

ux-ui-guide

Route design tasks to UX/UI sub-skills and enforce frontend-coding-standards alignment.

Official
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
89jobrien89jobrien
4

design-docs

Create feature design specs and Architecture Decision Records for system architecture documentation.

Community
Advanced
imbue-aiimbue-ai
213

frontend-design-tokens

Guide CSS/SCSS design token adoption with Radix UI tokens and custom overrides.

Official
Intermediate