skills.rest
luyangliuable
luyangliuableCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Normalize features or pages to match an existing design system and UI patterns.

Updated Mar 23, 2026
Search Tags:#accessibility#responsive design#design system#components#normalize#ui consistency
One-click install
npx skills add https://github.com/luyangliuable/claude-setup --skill normalize-luyangliuable
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/luyangliuable/claude-setup/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/luyangliuable/claude-setup --skill normalize-luyangliuable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you remove design drift by bringing a feature, page, or route back into alignment with your established design system and UI standards.

Core Features & Use Cases

  • Design System Discovery: Finds and studies design documentation, style guides, component libraries, and tokens before making changes.
  • Feature Normalization: Updates typography, color, spacing, layout, components, motion, responsiveness, and accessibility to match existing patterns.
  • UX Consistency Review: Identifies cosmetic and functional mismatches, then recommends changes that improve both polish and usability.
  • Use Case: A product team ships a settings page with inconsistent spacing and custom controls, and this Skill refactors it to use the shared components and tokens.

Quick Start

Ask the AI to normalize the specified feature to match the repository’s design system and established UI patterns.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I fix UI consistency issues and align features to a design system?▼

To fix UI consistency issues, you normalize features by discovering existing design tokens, component conventions, and accessibility standards, then update typography, color, and spacing to match established patterns.

What is design drift and how do I refactor pages to match UI patterns?▼

Design drift occurs when pages develop inconsistent styling. You refactor by updating layout, motion, and responsive behavior to align with shared component libraries and established UI patterns.

How do I conduct a UX consistency review for accessibility and responsive design?▼

Conduct a UX consistency review by identifying cosmetic and functional mismatches across feature flows, then recommending changes that improve accessibility standards and responsive behavior.

Can I use this to normalize custom controls on a settings page?▼

Yes, you can normalize custom controls on settings pages by refactoring them to use shared components and design tokens discovered in the repository’s design documentation and style guides.

Do I need existing design documentation to normalize a feature?▼

Yes, normalizing a feature requires discovering design documentation, style guides, or component libraries to establish the baseline tokens and conventions needed for alignment.

Related Skills

Explore More Design & Creative Skills→
yckkkkyckkkk
1

extract

Extract reusable components, design tokens, and patterns into a shared design system.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
kcc989kcc989

shadcn-customization

Propagate design tokens and variants across shadcn/ui components.

Community
Advanced
alangebalangeb

code-review-workflow

Run pyscan, pyanalyze, ruff, and black to generate a unified markdown report.

Community
Intermediate