skills.rest
SteveChandler
SteveChandlerCOMMUNITY
Explore all skills by this author →
GitHub

normalize

Redesign features to match design system tokens, components, and patterns.

1|Updated Oct 20, 2024
Search Tags:#accessibility#refactoring#frontend#design system#component library#design tokens#ui consistency
One-click install
npx skills add https://github.com/SteveChandler/quiver --skill normalize-stevechandler
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/SteveChandler/quiver/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/SteveChandler/quiver --skill normalize-stevechandler

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Features often drift from the established design system through one-off components, hard-coded styles, and inconsistent UX patterns, creating visual and behavioral fragmentation across the product. ## Core Features & Use Cases - Design System Discovery: Locates and studies design system documentation, style guides, and component libraries before making changes. - Multi-Dimension Normalization: Aligns typography, color, spacing, components, motion, responsive behavior, accessibility, and progressive disclosure with design system standards. - Cleanup and Consolidation: Moves reusable components into shared UI paths, removes orphaned code, and verifies quality with linting, type-checking, and tests. - Use Case: A settings page was built with custom buttons and hard-coded hex colors. Use this Skill to replace them with design system components and tokens, then verify no regressions were introduced. ## Quick Start Normalize the settings page feature to match our design system standards and remove any one-off components or hard-coded styles.

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 an existing design system?▼

First locate and study the design system documentation, style guides, and component libraries in the repository. Then replace custom components with design system equivalents, swap hard-coded values for design tokens, and align UX patterns with established flows.

What UI inconsistencies does design system normalization fix?▼

It addresses typography, color and theme, spacing and layout, component usage, motion and interaction timing, responsive breakpoints, accessibility attributes, and progressive disclosure patterns. The goal is consistency with established standards rather than visual polish alone.

Should I create new components when normalizing a feature?▼

No, avoid creating one-off components when design system equivalents exist. If a genuinely new reusable component emerges during normalization, move it into the shared UI component path or design system rather than leaving it local to the feature.

How do I verify normalization did not break anything?▼

Run the repository's lint, type-check, and test commands after making changes. Also remove orphaned code and unused styles made obsolete by the normalization, and check for duplication introduced during refactoring.

When should I not prioritize visual consistency?▼

Never compromise accessibility for visual consistency, and prioritize UX usability over cosmetic polish. If design system principles are unclear, ask for clarification instead of guessing at the intended patterns.

Related Skills

Explore More Design & Creative Skills→
PavkaBrikaPavkaBrika
1

normalize

Audit UI against the design system and normalize spacing, typography, and tokens.

Community
Advanced
tyhuffman7tyhuffman7
1

ship

Automate release workflows by running tests, reviewing diffs, and creating PRs.

Community
Advanced
fengshao1227fengshao1227
5.9k

normalize

Audits and realigns UI features to match design system tokens, components, and patterns.

Community
Intermediate
pohlai88pohlai88

radix-ui-design-system

Builds accessible React components with Tailwind CVA or Stitches theming.

Community
Advanced