i-normalize

Generate a design-system normalization plan for frontend pages and components.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/erdiantomy/nosecret-eab25fe0 --skill i-normalize-erdiantomy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: i-normalize
Source: https://github.com/erdiantomy/nosecret-eab25fe0/tree/main/.claude/skills/i-normalize
Command: npx skills add https://github.com/erdiantomy/nosecret-eab25fe0 --skill i-normalize-erdiantomy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Normalize design to match your design system and ensure consistency across features and pages. This practice helps reduce visual drift and ensures a cohesive user experience by aligning typography, spacing, color, and component usage with established tokens and guidelines.

Core Features & Use Cases

  • Pattern alignment: verify typography, color, spacing, and component usage against tokens and guidelines.
  • Token-driven refactor: propose replacements for hard-coded values with design tokens, ensuring accessibility and contrast compliance.
  • Use Case: when onboarding a new feature page or redesign, generate a concrete normalization plan and updated component references.

Quick Start

Run the i-normalize assessment on the current feature to generate a design-system compliant normalization plan.

Frequently Asked Questions about i-normalize

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

FAQPage Schema
How do I align frontend designs with an existing design system?

To align frontend designs, you map hard-coded values to established design tokens, ensuring typography, spacing, and color palettes match your system. This normalization process reduces visual drift and ensures a cohesive user experience across features.

What is the best way to refactor hard-coded values into design tokens?

The best way to refactor hard-coded values into design tokens is to run a normalization assessment that proposes replacements for non-compliant values. This enforces design-system guardrails and ensures accessibility and contrast compliance across components.

Do I need to provide context before normalizing a feature page?

Yes, you must complete the Context Gathering Protocol before execution. This prerequisite step ensures the normalization plan accurately targets the specific frontend pages and components requiring design-system alignment and token conformity.

How do I verify typography and color spacing against accessibility patterns?

You verify typography and color spacing against accessibility patterns by applying a normalization assessment to your frontend components. This checks pattern alignment against your guidelines and ensures contrast compliance for your UI features.

Can I generate a normalization plan when redesigning a component?

Yes, when onboarding a new feature page or redesigning a component, you can generate a concrete normalization plan and updated component references. This plan enforces design tokens and ensures component conformity with your established system guidelines.