skills.rest
anilcancakir
anilcancakirCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/anilcancakir/my-claude-code --skill web-design-mastery
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
Fr-e-dFr-e-d
157

architecture-extract

Analyze project directory structures to generate architectural summaries.

Community
Basic
103492-MaxPaardekam103492-MaxPaardekam
2

frontend-design

Generate HTML/CSS/JS frontend components with a bold aesthetic direction.

Community
Advanced
RamonsDkaRamonsDka
1

frontend-ui-ux

Translate design intent into accessible, responsive HTML/CSS/JS UI components.

Community
Intermediate
MeechYourGoalsMeechYourGoals
2

chravel-ui-consistency

Audit Chravel's user interface for visual consistency and design system adherence.

Community
Intermediate