# Normalize Interfaces to Your Design System

Inconsistent interface details make products harder to maintain and use. This skill guides Claude, Codex, and Claude Code through structured UI normalization against existing design standards.

## Install

```bash
npx skillstore add pbakaus/normalize
```

## Metadata

- Status: approved
- Slug: pbakaus-normalize
- Skillstore revision: r1
- Version status: missing
- Tree hash: fa4c973f3096299a34b9f282a7847a78224aa1d1227ebc4e8299d05c3a76d5b6
- Author: pbakaus
- GitHub username: pbakaus
- License: MIT
- Repository: https://github.com/pbakaus/impeccable/tree/main/source/skills/normalize/
- Ref: e397ce5a135369cd6def89cb6400d013e2f68f2f
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/pbakaus-normalize
- Manifest: https://skillstore.pages.dev/api/skills/pbakaus-normalize/manifest

## Capabilities

- Find design system documentation, component libraries, and style guides in a project.
- Compare a feature against established typography, color, spacing, layout, and component patterns.
- Plan interface changes that replace one-off styles with design tokens and reusable components.
- Check responsive behavior, focus states, labels, and contrast against project standards.
- Guide cleanup of obsolete styles, duplicated components, and unused UI code after normalization.

## Use Cases

- Unify a New Feature: Align a recently built page with shared components, tokens, and interaction patterns before release.
- Prepare Design Debt Work: Identify inconsistent UI decisions and create a focused plan for reducing one-off implementation debt.
- Review Product Consistency: Check whether a product area follows established accessibility, responsive, and layout conventions.

## Prompt Templates

### Normalize a Page

```
Normalize the settings page so it follows our design system. First find the relevant design guidance, then propose and apply focused UI changes.
```

### Audit Before Editing

```
Analyze the billing flow against our design system. List the main inconsistencies by typography, color, spacing, components, responsive behavior, and accessibility before editing.
```

### Replace One-Off UI

```
Find custom UI in the dashboard summary area that should use existing shared components. Replace it with design system equivalents where appropriate.
```

### Normalize and Verify

```
Normalize the account onboarding flow end to end. Use repository design guidance, update inconsistent UI, remove obsolete styles, and run the relevant checks.
```

## Limitations

- It depends on existing design system context or a separate discovery step.
- It does not create a complete design system from nothing.
- It cannot guarantee visual approval without human review or screenshots.
- It should not override product requirements that intentionally differ from existing patterns.

## Best Practices

- Gather design system context before making visual changes.
- Prefer shared components and tokens over new local styles.
- Verify accessibility, responsive behavior, and regression checks after edits.

## Anti Patterns

- Do not invent new components when suitable shared components already exist.
- Do not hard-code colors, spacing, or typography that should come from tokens.
- Do not chase visual polish while ignoring usability or accessibility differences.

## Security Audit

- Audited at: 2026-07-06T20:28:09.056\+00:00
- Summary: The only static finding is a false positive caused by design terminology about layout grid systems. I found no evidence of prompt injection, data exfiltration, external command execution, or malicious intent in SKILL.md.

## Stats

- Views: 157
- Downloads: 18
- Favorites: 0
- Popularity score: 0