skills.rest
gmolike
gmolikeCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Aligns feature UI code with design system tokens, components, and patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Features often drift from the design system over time, accumulating hard-coded colors, one-off components, and inconsistent spacing that fragment the user experience. This Skill audits a feature against your design system and rewrites it to match established standards. ## Core Features & Use Cases - Design System Discovery: Locates and studies your style guides, component libraries, and design tokens before making any changes. - Systematic Normalization: Fixes typography, color, spacing, components, motion, responsive behavior, and accessibility to match design system conventions. - Cleanup & Consolidation: Moves reusable components into shared UI paths, removes orphaned code, and verifies quality with linting and type checks. - Use Case: A settings page was built with custom buttons and hard-coded hex colors. Invoke this Skill to replace them with design system components and tokens, then verify nothing regressed. ## Quick Start Ask the assistant to normalize the settings page feature so it matches the design system standards.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I make a feature match my design system?▼

Run the normalize Skill on the target page, route, or feature. It first studies your design system documentation and tokens, then replaces hard-coded values and custom components with design system equivalents across typography, color, spacing, and layout.

What does design system normalization actually change in the code?▼

It swaps hard-coded colors, fonts, and spacing for design tokens, replaces custom components with design system equivalents, and aligns motion, responsive breakpoints, and accessibility attributes with established patterns.

Can I normalize only part of my app instead of everything?▼

Yes. The feature argument is optional, so you can target a single page, route, or feature. Omitting it lets the Skill assess the broader context, but scoping to one feature keeps changes reviewable.

Does normalization handle accessibility issues?▼

Yes. The process verifies contrast ratios, focus states, and ARIA labels against design system requirements, and it explicitly forbids compromising accessibility for visual consistency.

What happens to new components created during normalization?▼

Reusable components created during the refactor are consolidated into the design system or shared UI component path. Orphaned code, unused styles, and obsolete files are removed, followed by lint, type-check, and test verification.

Related Skills

Explore More Design & Creative Skills→
toddbadamstoddbadams

design-systems

Define reusable components and design tokens in JSON and TypeScript.

Community
Intermediate
mcsdodomcsdodo

verify

Run tests, check git status, and confirm changelog updates for completion readiness.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
wildlily1021wildlily1021

cs-feat

Routes new feature requests through brainstorm, design, implementation, and acceptance stages.

Community
Intermediate