skills.rest
meganide
meganideCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

refactoring-ui

Codifies design-system rules for HTML, CSS, React, and Tailwind UI development.

Updated Aug 27, 2026
Search Tags:#typography#frontend#design-system#spacing#color-palette#shadows#UI-guidelines
One-click install
npx skills add https://github.com/meganide/claude --skill refactoring-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refactoring-ui
Source: https://github.com/meganide/claude/tree/main/skills/guidelines-refactoring-ui
Command: npx skills add https://github.com/meganide/claude --skill refactoring-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies UI design principles into a reusable design system that guides frontend development, ensuring consistency, accessibility, and faster delivery across projects.

Core Features & Use Cases

  • Establishes a shared design language for spacing, typography, color, and shadows to unify UI components.
  • Guides decisions across components, layouts, dashboards, forms, and navigation to reduce visual drift.
  • Use cases include building new interfaces, reviewing existing UI for consistency, and onboarding teams to a design system.

Quick Start

  • Apply the spacing scale to a simple component (e.g., a login form).
  • Use the constrained typography scale for headings and body text.
  • Implement a five-elevation shadow system for cards and surfaces.

Frequently Asked Questions about refactoring-ui

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

FAQPage Schema
How do I standardize frontend UI components using a design system?▼

To standardize frontend UI components, you codify design-system rules into actionable guidelines for color, typography, spacing, and shadows. This ensures a consistent visual language across HTML/CSS/React/Tailwind components, pages, and dashboards.

What is the best way to maintain consistent spacing and typography scales in React?▼

Maintaining consistent spacing and typography scales in React requires applying a constrained, shared design language. Codifying these rules prevents visual drift and drives scalable, maintainable UI development across your application.

How do I set up an elevation system with shadows for UI cards and surfaces?▼

Setting up an elevation system for UI cards and surfaces involves implementing a five-elevation shadow system. This specifies depth rules within your design system to unify components and standardize visual hierarchy across layouts.

Can I use these UI guidelines with my existing HTML and Tailwind setup?▼

Yes, you can use these UI guidelines with your existing HTML and Tailwind setup. The design rules are applied across components, forms, and layouts built with HTML/CSS/React/Tailwind to ensure a consistent visual language.

How do I fix visual drift and inconsistency across my web application forms?▼

To fix visual drift and inconsistency across web application forms, establish a shared design language for spacing, typography, color, and shadows. This unifies UI components and reduces visual inconsistencies across pages.

Why does my frontend development team need a shared UI design language?▼

Your frontend development team needs a shared UI design language to ensure consistency, accessibility, and faster delivery. It codifies UI design principles into a reusable system, guiding decisions across components and layouts while reducing visual drift.

Related Skills

Explore More Design & Creative Skills→
magicpro97magicpro97
8

web-artifacts-builder

Initialize React projects with Tailwind CSS and shadcn/ui components.

Community
Intermediate
estebandrgestebandrg

tailwind-4

Standardize Tailwind CSS usage in React/Next.js projects with className and cn() guidelines.

Community
Basic
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
maxjuniorbrmaxjuniorbr
2

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA components.

Community
Advanced