One-click install
npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill normalize-thecardgoat
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: normalize
Source: https://github.com/TheCardGoat/lorcana-simulator/tree/main/.agents/skills/normalize
Command: npx skills add https://github.com/TheCardGoat/lorcana-simulator --skill normalize-thecardgoat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams fix UI and UX inconsistencies by redesigning a feature so it matches the established design system patterns, tokens, and accessibility requirements.

Core Features & Use Cases

  • Design-system discovery and auditing: Identifies the relevant UI guidelines, tokens, and component conventions before making changes.
  • End-to-end normalization plan: Maps gaps to actionable updates across typography, color, spacing, components, motion, responsiveness, and accessibility.
  • Refactor and cleanup: Removes orphaned code, consolidates reusable UI pieces, and verifies quality to prevent regressions.

Quick Start

Use the normalize skill to review and redesign the target page, route, or feature so it fully matches the project 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 align existing UI components to a design system and replace hard-coded styling?

To align UI components to a design system, you audit the feature for inconsistent typography, colors, and spacing, then refactor it to replace hard-coded styling with design tokens and standard interaction patterns.

What is the best way to fix UI inconsistencies and ensure accessibility during a frontend refactor?

Fixing UI inconsistencies involves redesigning the target feature to match established design system patterns, verifying responsive behavior, and ensuring accessibility compliance to prevent regressions during the frontend refactor.

Does UI normalization require an existing design system to work?

Yes, UI normalization requires an existing design system because the process discovers and audits your established UI guidelines, design tokens, and component conventions before mapping gaps to actionable updates.

How do I audit a UI feature for typography, color, and spacing deviations?

Auditing a UI feature for typography, color, and spacing deviations requires identifying gaps against your design system conventions, then creating an end-to-end normalization plan to consolidate reusable UI pieces.

What is included in an end-to-end design system normalization plan for front-end components?

An end-to-end design system normalization plan includes mapping gaps across typography, color, spacing, components, motion, responsiveness, and accessibility, followed by removing orphaned code to verify quality.

When should I not use a design system normalization approach for UI refactoring?

You should avoid design system normalization when a project lacks an established design system, as the process depends on discovering existing UI guidelines, tokens, and component conventions to map actionable updates.