web-design-mastery

Standardize web application visuals using Refactoring UI design principles.

5|1|Updated Jan 22, 2026

Search Tags:#typography #design #ui #spacing #color-system #depth #refactoring-ui

Ready to run

npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-design-mastery
Source: https://github.com/anilcancakir/my-claude-code/tree/main/skills/web-design-mastery
Command: npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Web design is often inconsistent and time-consuming. This Skill provides production-grade UI design guidance based on Refactoring UI principles to standardize visuals across pages and components.

Core Features & Use Cases

Feature-driven design workflow: start from a feature and evolve into a polished UI system.
Spacing and type systems: 4px grid, modular type scale, depth/elevation rules.
Color system and visual hierarchy: accessible palettes with greys, primary, and accent colors.
Reference-driven polishing: guidance and reference files for deeper learning.
Use Case: Design a landing page or dashboard with consistent typography, spacing, and shadows using the provided workflow.

Quick Start

Follow the workflow to start a UI design project by defining the feature, establishing spacing and type scales, and applying depth and finishing touches.

Frequently Asked Questions about web-design-mastery

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

FAQPage Schema

How do I create a consistent spacing and type scale for web UI design?▼

Build an accessible web UI color system using greys, primary, and accent colors. This creates accessible palettes that maintain clear visual hierarchy and structure across your application interfaces.

How do I apply depth and shadow rules to UI components?▼

Apply depth and shadow rules to UI components by following established elevation principles. This enforces consistent visual hierarchy and spatial relationships across real-world project interfaces like auth screens.

Does this UI design guidance work for dashboards and landing pages?▼

Yes, this UI design guidance works for dashboards and landing pages by providing production-grade visual standards. It enforces consistent typography, spacing, and depth rules across various web application screens.

What is the best way to standardize visuals across multiple web application pages?▼

Standardize visuals across web applications by implementing a feature-driven design workflow based on Refactoring UI principles. This enforces a comprehensive design system with spacing, type, color, and depth rules.

Can I use Refactoring UI principles to polish an existing web application interface?▼

Yes, you can use Refactoring UI principles to polish existing interfaces through a reference-driven workflow. It provides reference files and guidance for establishing spacing, type scales, and finishing touches.