normalize

Overview

What is the normalize Skill?

The normalize skill is designed to audit and realign user interface features so they strictly adhere to your design system standards. It focuses on identifying and correcting inconsistencies in spacing, design tokens, and UI patterns. This skill is essential for teams aiming to maintain visual and functional consistency across their frontend projects.

Who Should Use normalize?

Normalize is ideal for UI designers, frontend developers, and design system maintainers who need to address design drift, mismatched styles, or want to bring features back in line with established system guidelines.

Problems Solved

• Detects and corrects deviations from design system standards
• Ensures consistent use of tokens, spacing, and patterns
• Helps prevent and fix design drift in growing codebases

How to Use

Installation Steps

1. Install the normalize skill using the following command:

   npx skills add https://github.com/pbakaus/impeccable --skill normalize

2. Begin by reviewing the SKILL.md file for a detailed workflow and requirements.

3. Explore supporting files such as README.md, AGENTS.md, and metadata.json for additional context. Check any rules/, resources/, references/, or scripts/ folders if available.

Workflow Overview

• Preparation: Invoke the $frontend-design agent to gather design principles and context. If no design context exists, run $teach-impeccable first.
• Planning: Study your design system documentation, UI guidelines, and component libraries. Identify core principles, tokens, and patterns.
• Analysis: Audit the current UI feature to find inconsistencies or deviations from the design system.
• Execution: Apply targeted changes to realign the feature with design system standards.
• Clean Up: Review and finalize updates, ensuring all changes are consistent and documented.

When to Use normalize

• When you notice UI inconsistencies or design drift
• After significant feature development or refactoring
• During design system adoption or migration

FAQ

What does the normalize skill actually do?

Normalize audits your UI components and features, then provides a plan to bring them back in line with your design system’s standards for spacing, tokens, and patterns.

Is normalize only for large design systems?

No, normalize is useful for any project where UI consistency and adherence to design principles are important, regardless of team size.

What files should I review first?

Start with SKILL.md for the main workflow. Supporting files like README.md and AGENTS.md provide additional guidance.

Can normalize fix all UI issues automatically?

Normalize provides a structured process and guidance, but some manual review and adjustments will be necessary to ensure perfect alignment with your design system.

Where can I find more details or scripts?

Check the Files tab in the repository for nested references, helper scripts, and further documentation.