normalize
Align designs with established systems to ensure UI consistency and code quality.
Install
mkdir -p .claude/skills/normalize && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11824" && unzip -o skill.zip -d .claude/skills/normalize && rm skill.zipInstalls to .claude/skills/normalize
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Normalize design to match your design system and ensure consistencyKey capabilities
- →Discover design system documentation and guidelines
- →Analyze current feature for deviations from design system
- →Create a normalization plan for specific changes
- →Replace hard-coded values with design tokens
- →Replace custom components with design system equivalents
- →Ensure UX consistency and usability
How it works
The skill analyzes a given feature against design system standards, identifies inconsistencies, and creates a plan to normalize the design by applying tokens and standard components.
Inputs & outputs
When to use normalize
- →Fix UI inconsistencies
- →Normalize a new page layout
- →Apply design system tokens
About normalize
Discovers design system standards and compares them against current implementations. It creates a plan to replace hard-coded styles with tokens and standard components.
Normalize design to match your design system and ensure consistency
When not to use it
- →Creating new one-off components when design system equivalents exist
- →Hard-coding values that should use design tokens
- →Introducing new patterns that diverge from the design system
Limitations
- →Requires existing design system documentation
- →Does not create new one-off components
- →Does not introduce new patterns diverging from the design system
How it compares
This skill systematically normalizes a feature to a design system by replacing hard-coded styles with tokens and standard components, ensuring consistency across typography, color, spacing, and interaction, unlike manual design adjustments.
Compared to similar skills
normalize side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| normalize (this skill) | 0 | 6mo | No flags | Intermediate |
| ui-ux-pro-max | 1,909 | 6mo | Review | Intermediate |
| svg-precision | 527 | 5mo | Review | Intermediate |
| mobile-android-design | 101 | 4mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
svg-precision
dkyazzentwatwa
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
mobile-android-design
wshobson
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
frontend-slides
sickn33
Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
penpot-uiux-design
github
Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: "design a UI", "create interface", "build layout", "design dashboard", "create form", "design landing page", "make it accessible", "design system", "component library".