skills.rest
WeWake1
WeWake1COMMUNITY
Explore all skills by this author →
GitHub

normalize

Redesigns a feature to match design system tokens, components, and patterns.

Updated Mar 15, 2026
Search Tags:#accessibility#frontend#design system#design tokens#refactor#normalize#ui consistency
One-click install
npx skills add https://github.com/WeWake1/BSOMS --skill normalize-wewake1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/WeWake1/BSOMS/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/WeWake1/BSOMS --skill normalize-wewake1

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Features often drift from the established design system through one-off components, hard-coded values, and inconsistent patterns. This Skill audits a page, route, or feature and systematically aligns it with your design system standards. ## Core Features & Use Cases - Design System Discovery: Locates and studies existing design documentation, tokens, and component conventions before making changes. - Multi-Dimension Normalization: Fixes typography, color, spacing, components, motion, responsive behavior, accessibility, and progressive disclosure to match established patterns. - Cleanup & Consolidation: Moves reusable components into shared paths, removes orphaned code, and verifies quality with linting and type-checking. - Use Case: After shipping a new orders dashboard quickly, run this Skill to replace hard-coded colors and custom buttons with design system tokens and shared components. ## Quick Start Ask the AI to normalize the orders page 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 page match my design system?▼

Run the normalize Skill on the target page or feature. It discovers your design system documentation, audits deviations across typography, color, spacing, and components, then replaces one-off implementations with design system equivalents.

What does the normalize Skill check during a redesign?▼

It reviews typography, color and theme tokens, spacing and layout, component usage, motion and interaction, responsive behavior, accessibility, and progressive disclosure. Each dimension is compared against established design system patterns.

Does normalize require existing design system documentation?▼

Yes, it expects design context to exist. If no design system documentation is found, the Skill directs you to run the teach-impeccable flow first rather than guessing at design principles.

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

Yes, the optional feature argument scopes the work to a specific page, route, or feature. Omitting it lets the Skill analyze a broader surface, but a targeted scope keeps changes reviewable.

What happens to custom components after normalization?▼

Custom components that duplicate design system equivalents are replaced. Newly created reusable components are moved into the shared UI path, and orphaned code or styles made obsolete are deleted.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

Audit UI features against design system tokens and generate a normalization plan.

Community
Advanced
dmae97dmae97
130

omk-multimodal-ui-review

Review UI screenshots, mockups, and Playwright traces to identify visual mismatches and propose minimal fixes.

Community
Intermediate
karchthokarchtho

ui-ux-design

Provide expert UI/UX design guidance for frontend frameworks and design systems.

Community
Intermediate
microlinkhqmicrolinkhq
142

normalize

Normalize UI feature implementations to match an existing design system.

Official
Advanced