Normalize
Audit a page or component and realign spacing, tokens, and patterns to your design system when UI has drifted from standards.
Overview
Normalize is an agent skill most often used in Build (also Ship, Validate) that audits UI against your design system and realigns tokens, spacing, and patterns after drift.
Install
npx skills add https://github.com/pbakaus/impeccable --skill normalizeWhat is this skill?
- Mandatory /impeccable prep: design principles, anti-patterns, and Context Gathering Protocol before edits
- Discovers design-system docs via grep and verifies tokens, typography, and spacing—no guessing
- Separates cosmetic drift from functional inconsistency and traces root causes
- Argument-hint targets a specific feature (page, route, component) for scoped audits
- Runs teach-first when no design context exists yet
Adoption & trust: 54.9k installs on skills.sh; 35.9k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You shipped a feature quickly and now it looks inconsistent—wrong spacing, ad-hoc colors, and components that do not match the rest of the product.
Who is it for?
Solo builders who maintain a design system and need a scoped audit on one page, route, or component after iterative shipping.
Skip if: Greenfield visual exploration with no system yet—run impeccable teach and establish context first; skip if you only want net-new branding with no existing standards.
When should I use this skill?
User mentions consistency, design drift, mismatched styles, tokens, or wants a feature brought back in line with the system.
What do I get? / Deliverables
The targeted surface is mapped to design-system rules with a concrete fix plan, and inconsistent styling is corrected to match established tokens and patterns after impeccable context is in place.
- Assessment of deviations vs design system
- Planned realignment changes to tokens, spacing, and patterns
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because normalize is applied to live UI artifacts—pages, routes, and components—while the skill’s prep step ties back to design-system teaching. Frontend is where design tokens, component patterns, and visual consistency are enforced on shipped surfaces.
Where it fits
Tighten a clickable prototype so demo screens use the same tokens before sharing with early users.
Realign a settings page that picked up one-off margins and colors during a feature rush.
Pre-release pass to catch components that broke spacing or pattern rules in the latest PR.
Normalize a campaign landing slice so it matches the core app chrome before paid traffic hits.
How it compares
Use instead of asking the agent to "make it look nicer" without referencing tokens, anti-patterns, or system docs.
Common Questions / FAQ
Who is normalize for?
Indie builders and small teams with an Impeccable-style design system who need agent help fixing drift on specific UI surfaces.
When should I use normalize?
During Build when polishing frontend work, during Ship review when styles diverged from guidelines, or during Validate prototype cleanup when a demo must match system patterns before user tests.
Is normalize safe to install?
It guides analysis and UI edits in your repo; review the Security Audits panel on this Prism page before installing and inspect diffs like any design refactor.
SKILL.md
READMESKILL.md - Normalize
Analyze and redesign the feature to perfectly match our design system standards, aesthetics, and established patterns. ## MANDATORY PREPARATION Invoke /impeccable — it contains design principles, anti-patterns, and the **Context Gathering Protocol**. Follow the protocol before proceeding — if no design context exists yet, you MUST run /impeccable teach first. --- ## Plan Before making changes, deeply understand the context: 1. **Discover the design system**: Search for design system documentation, UI guidelines, component libraries, or style guides (grep for "design system", "ui guide", "style guide", etc.). Study it thoroughly until you understand: - Core design principles and aesthetic direction - Target audience and personas - Component patterns and conventions - Design tokens (colors, typography, spacing) **CRITICAL**: If something isn't clear, ask. Don't guess at design system principles. 2. **Analyze the current feature**: Assess what works and what doesn't: - Where does it deviate from design system patterns? - Which inconsistencies are cosmetic vs. functional? - What's the root cause—missing tokens, one-off implementations, or conceptual misalignment? 3. **Create a normalization plan**: Define specific changes that will align the feature with the design system: - Which components can be replaced with design system equivalents? - Which styles need to use design tokens instead of hard-coded values? - How can UX patterns match established user flows? **IMPORTANT**: Great design is effective design. Prioritize UX consistency and usability over visual polish alone. Think through the best possible experience for your use case and personas first. ## Execute Systematically address all inconsistencies across these dimensions: - **Typography**: Use design system fonts, sizes, weights, and line heights. Replace hard-coded values with typographic tokens or classes. - **Color & Theme**: Apply design system color tokens. Remove one-off color choices that break the palette. - **Spacing & Layout**: Use spacing tokens (margins, padding, gaps). Align with grid systems and layout patterns used elsewhere. - **Components**: Replace custom implementations with design system components. Ensure props and variants match established patterns. - **Motion & Interaction**: Match animation timing, easing, and interaction patterns to other features. - **Responsive Behavior**: Ensure breakpoints and responsive patterns align with design system standards. - **Accessibility**: Verify contrast ratios, focus states, ARIA labels match design system requirements. - **Progressive Disclosure**: Match information hierarchy and complexity management to established patterns. **NEVER**: - Create new one-off components when design system equivalents exist - Hard-code values that should use design tokens - Introduce new patterns that diverge from the design system - Compromise accessibility for visual consistency This is not an exhaustive list—apply judgment to identify all areas needing normalization. ## Clean Up After normalization, ensure code quality: - **Consolidate reusable components**: If you created new components that should be shared, move them to the design system or shared UI component path. - **Remove orphaned code**: Delete unused implementations, styles, or files made obsolete by normalization. - **Verify quality**: Lint, type-check, and test according to repository guidelines. Ensure normalization didn't introduce regressions. - **Ensure DRYness**: Look for duplication introduced during refactoring and consolidate. Remember: You are a brilliant frontend