skills.rest
LinCie
LinCieCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

normalize

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Features often drift from the design system through one-off components, hard-coded values, and inconsistent patterns, creating visual and UX inconsistency across a product. ## Core Features & Use Cases - Design System Discovery: Searches the repository for design system documentation, style guides, and design tokens before making changes. - Multi-Dimension Normalization: Aligns typography, color, spacing, components, motion, responsive behavior, accessibility, and progressive disclosure with established standards. - Cleanup and Consolidation: Moves reusable components into shared UI paths, removes orphaned code, and runs lint, type-check, and tests. - Use Case: After shipping a settings page with custom buttons and hard-coded hex colors, run this Skill to replace them with design system components and tokens so the page matches the rest of the app. ## Quick Start Ask the AI to normalize the settings page feature 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 feature match my design system?▼

Run the normalize skill on the feature. It discovers your design system documentation and tokens, analyzes deviations, then replaces one-off components and hard-coded values with design system equivalents across typography, color, spacing, and layout.

How to replace hard-coded CSS values with design tokens?▼

The skill audits styles for hard-coded colors, fonts, and spacing, then substitutes them with the design tokens defined in your design system. It also consolidates duplicated styles introduced during refactoring.

What happens if no design system documentation exists?▼

The skill requires design context before proceeding. If none exists, it directs you to run the teach-impeccable skill first, and it asks clarifying questions rather than guessing at design principles.

Does design normalization check accessibility?▼

Yes. The normalization pass verifies contrast ratios, focus states, and ARIA labels against design system requirements, and it never compromises accessibility for visual consistency.

When should I not use design system normalization?▼

Avoid it when a feature intentionally explores a new design direction not yet ratified into the system, since the skill removes divergent patterns. It is best suited for aligning shipped features with established standards.

Related Skills

Explore More Design & Creative Skills→
GyananoGyanano
5

normalize

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

Community
Advanced
I-SynergyI-Synergy

playwright-tester

Create and execute E2E and UI tests for web applications using Playwright.

Official
Advanced
smarocsmaroc
1

superdesign

Automate frontend UI design drafts with system-driven validation.

Community
Advanced
Aafff623Aafff623

my-shadcn-rules

Define and enforce SHADCN rules for UI component styling.

Community
Basic