normalize

Redesigns frontend features to match design system tokens, components, and patterns.

Updated Jul 21, 2026
One-click install
npx skills add https://github.com/masakinihirota/2026src-ni --skill normalize-masakinihirota
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/masakinihirota/2026src-ni/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/masakinihirota/2026src-ni --skill normalize-masakinihirota

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 existing design documentation, tokens, and component conventions 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 paths, removes orphaned code, and verifies quality with linting and type-checking. - Use Case: After shipping a settings page with custom buttons and hard-coded hex colors, run this Skill to replace them with design system components and tokens so the page matches the rest of the app. ## Quick Start Normalize the settings page feature so it matches our design system components, tokens, and interaction patterns.

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?▼

Design system normalization replaces one-off components with design system equivalents, swaps hard-coded values for design tokens, and aligns UX patterns with established flows. The process covers typography, color, spacing, motion, and accessibility.

What does design system normalization include?▼

Normalization covers typography, color and theme tokens, spacing and layout, component replacement, motion and interaction timing, responsive breakpoints, accessibility requirements, and progressive disclosure patterns. It also includes cleanup of orphaned code and consolidation of reusable components.

What should I do before normalizing a feature's design?▼

First discover and study the design system documentation, including principles, tokens, and component conventions. If no design context exists, gather it before proceeding rather than guessing at design principles.

When should I not create a new UI component?▼

Avoid creating new components when a design system equivalent already exists. New components are only appropriate when they fill a genuine gap, in which case they should be moved to the shared design system path for reuse.

How do I verify design changes did not break anything?▼

Run the repository's lint, type-check, and test commands after normalization. Also check for regressions in responsive behavior, accessibility attributes, and duplicated code introduced during refactoring.