skills.rest
Ssrrb
SsrrbCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

Redesigns frontend features to match design system tokens, components, and patterns.

Updated Mar 24, 2026
Search Tags:#accessibility#design system#component library#design tokens#normalize#ui consistency#frontend refactoring
One-click install
npx skills add https://github.com/Ssrrb/cerramos-codebase --skill normalize-ssrrb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/Ssrrb/cerramos-codebase/tree/main/.codex/skills/normalize
Command: npx skills add https://github.com/Ssrrb/cerramos-codebase --skill normalize-ssrrb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend features often drift from the design system through one-off components, hard-coded values, and inconsistent patterns. This Skill audits a feature against established design standards and rewrites it to align with the system's tokens, components, and UX conventions. ## Core Features & Use Cases - Design System Discovery: Searches the repository for design system documentation, style guides, and component libraries before making changes, and asks for clarification when principles are unclear. - Multi-Dimension Normalization: Systematically fixes typography, color tokens, spacing, component usage, motion, responsive behavior, accessibility, and progressive disclosure. - Cleanup and Consolidation: Moves reusable components into shared UI paths, removes orphaned code, and runs lint, type-check, and tests to prevent regressions. - Use Case: A checkout page uses hard-coded hex colors and custom buttons. Run this Skill to replace them with design tokens and standard button components, then verify accessibility contrast and responsive breakpoints. ## Quick Start Normalize the checkout feature to match our design system standards and fix any inconsistent components, colors, and spacing.

Frequently Asked Questions about normalize

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

FAQPage Schema
How do I make a feature match my design system?▼

Run the normalize workflow on the feature. It first discovers your design system documentation and tokens, then replaces hard-coded values and custom components with design system equivalents across typography, color, spacing, and interaction patterns.

What does design system normalization cover?▼

Normalization covers typography, color and theme tokens, spacing and layout, component replacement, motion and interaction timing, responsive breakpoints, accessibility contrast and ARIA labels, and progressive disclosure patterns.

What happens if no design system documentation exists?▼

The Skill requires design context before proceeding. If none exists, it directs you to run a context-gathering step first and asks clarifying questions rather than guessing at design principles.

Does normalization change component behavior or only styling?▼

It addresses both. Cosmetic fixes include tokens and styles, while functional alignment replaces custom components with design system equivalents and matches UX flows, accessibility states, and responsive behavior to established patterns.

How are regressions prevented after UI refactoring?▼

After normalization, the workflow runs lint, type-check, and tests according to repository guidelines. It also removes orphaned code and consolidates duplicated components introduced during refactoring.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

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

Community
Advanced
idiaz01idiaz01
3

browser-qa

Automate browser-based UI testing with smoke, interaction, visual, and accessibility checks.

Community
Advanced
trevorbyrumtrevorbyrum
1

ui-review

Audit frontend code for design token violations and accessibility failures.

Community
Advanced
Sacred-GSacred-G
2

figma-generate-design

Build or update Figma screens using published design system tokens.

Community
Advanced