skills.rest
cfbender
cfbenderCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Analyze and refactor typography, color, spacing, and components to align with a design system.

4|Updated Oct 28, 2019
Search Tags:#design system#component library#design tokens#frontend development#ux/ui#ui consistency
One-click install
npx skills add https://github.com/cfbender/dotfiles --skill normalize-cfbender
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/cfbender/dotfiles/tree/main/dot_agents/skills/normalize
Command: npx skills add https://github.com/cfbender/dotfiles --skill normalize-cfbender

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that a given feature or page adheres strictly to your established design system, resolving inconsistencies and improving overall product cohesion.

Core Features & Use Cases

  • Design System Auditing: Identifies deviations from established design principles, tokens, and components.
  • Automated Refactoring: Applies design system standards for typography, color, spacing, and components.
  • Use Case: You've launched a new feature, but its UI elements don't quite match the rest of the application. This Skill will analyze the feature and refactor its components and styles to perfectly align with your company's design system.

Quick Start

Normalize the 'user-profile' feature 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 align a new feature's UI with an existing design system?▼

Design system auditing identifies deviations from established principles, tokens, and components, ensuring product cohesion by analyzing typography, color, spacing, and motion to enforce UX consistency.

How do I refactor UI components to match established design tokens?▼

Automated refactoring applies design system standards for typography, color, spacing, and components to resolve inconsistencies and perfectly align feature styles with established patterns.

What is the best way to audit frontend design consistency across an application?▼

Auditing frontend design consistency involves analyzing a feature against established design principles, aesthetic direction, and component patterns to identify and resolve visual deviations.

Do I need a complete component library to normalize a page's design?▼

Normalizing a page's design requires established design tokens and component patterns, as the process analyzes and refactors elements against these predefined system standards for adherence.

Why does my new feature look inconsistent with the rest of the application?▼

UI inconsistencies occur when new features deviate from established design tokens and patterns, requiring analysis and refactoring of typography, color, and spacing to achieve application alignment.

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
devinitive-teamdevinitive-team

frontend-design

Design and code distinctive frontend interfaces with React.

Official
Advanced
duongdevduongdev
9

figma-integration

Convert Figma designs into implementation-ready component specifications and styling guidelines.

Community
Advanced
ihlamuryihlamury
73

mercury-ui-skills

Enforce Mercury's light-mode UI design system with Inter font and 4px grid.

Community
Intermediate