skills.rest
jcdiv47
jcdiv47COMMUNITY
Explore all skills by this author →
GitHub

normalize

Audit frontend features and produce a design-system normalization plan.

Updated Mar 7, 2026
Search Tags:#accessibility#frontend#design-system#design-tokens#ui-consistency#normalize#component-refactor
One-click install
npx skills add https://github.com/jcdiv47/cool-paper --skill normalize-jcdiv47
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/jcdiv47/cool-paper/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/jcdiv47/cool-paper --skill normalize-jcdiv47

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design and implementation frequently drift away from the established design system, producing visual inconsistencies, duplicated one-off components, mismatched tokens, accessibility regressions, and fragmented UX patterns. This Skill helps teams identify those deviations and produces a disciplined, repeatable plan to align features with the project's design system so interfaces are consistent, accessible, and maintainable.

Core Features & Use Cases

  • Design system discovery: Find and synthesize design tokens, component libraries, style guides, and conventions to establish the canonical source of truth.
  • Feature analysis & remediation plan: Audit a page, route, or feature to identify token misuse, custom one-offs, spacing/layout problems, and accessibility issues, then produce a prioritized normalization plan.
  • Refactor & verification guidance: Replace custom implementations with design-system components, migrate hard-coded values to tokens, consolidate reusable components, and verify changes with linting, type-checking, and accessibility checks.
  • Use Case: Normalize a legacy settings page that uses ad-hoc spacing and color values so it uses the design system's tokens, shared components, and responsive patterns while preserving accessibility.

Quick Start

Use the normalize skill to audit the settings page and produce a prioritized plan to replace hard-coded styles with design-system tokens and component equivalents.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I normalize frontend components to match a design system?▼

Design system normalization identifies visual inconsistencies, duplicated one-off components, mismatched tokens, and fragmented UX patterns, then produces a disciplined, repeatable plan to align features with the project's established design system.

How do I migrate hard-coded styles to design tokens?▼

Migrating hard-coded styles involves auditing the feature to find custom spacing, color values, and typography, then following an actionable replacement and refactor plan to swap them for canonical design tokens and design-system component equivalents.

What is the best way to fix UI inconsistencies in a legacy web page?▼

The best way to fix UI inconsistencies is to run a feature analysis that identifies token misuse and spacing problems, consolidate reusable components, and apply responsive patterns to align the legacy page with the design system.

Does UI normalization help with accessibility regressions?▼

Yes, UI normalization includes accessibility validation steps to prevent regressions, ensuring that refactored frontend components and layouts meet established accessibility standards while aligning with the design system.

What do I need to identify before refactoring a UI page?▼

Before refactoring a UI page, you need to identify the project's design tokens, component libraries, and style conventions to establish the canonical source of truth for the normalization plan.

Related Skills

Explore More Design & Creative Skills→
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
santychuycomsantychuycom

normalize

Refactor UI elements to align with predefined design tokens and components.

Official
Advanced
YuDefineYuDefine
45

normalize

Normalize frontend styling to align with design-system tokens and components.

Official
Advanced
OussemasahbeniOussemasahbeni
51

normalize

Normalize front-end feature UI implementations to match a design system.

Community
Advanced