web-design-mastery_skill

Overview

This skill provides production-grade web application UI design guidance based on Refactoring UI principles. It focuses on practical systems — spacing, type scale, color, shadows, and visual hierarchy — to deliver polished landing pages, dashboards, auth screens, and component work. Use it to make coherent, accessible, and scalable interfaces with a premium feel.

How this skill works

The skill inspects UI targets (landing page, dashboard, hero, cards, forms, buttons, navigation, empty states) and prescribes system-driven decisions: a 4px spacing grid, modular type scale, HSL-based color palettes, and shadow elevation levels. It recommends workflows: design features first in grayscale, establish systems, then iterate with depth and finishing touches. Outputs are concrete tokens and patterns you can implement directly in CSS, Tailwind, or design files.

When to use it

• Designing a landing page or hero section to maximize conversion and clarity
• Building dashboard layouts, card systems, and data-heavy interfaces
• Creating auth screens, forms, and input designs with clear hierarchy
• Choosing a color palette and accessible text contrasts
• Polishing final UI with shadows, accents, and empty states
• Standardizing spacing, typography, and elevation tokens for dev handoff

Best practices

• Start with the feature and grayscale to test hierarchy before color
• Define systems up front: 4px spacing scale, type scale, shadow levels
• Prefer de-emphasis of competing elements instead of adding more prominence
• Use HSL for color creation and ensure 4.5:1 contrast for normal text
• Apply two-part shadows and light-from-above logic for believable elevation
• Design empty states and small details (icons, accent borders) as first-class elements

Example use cases

• Landing page hero: apply 4px grid, large type scale, muted greys and a 500 primary for CTAs
• Dashboard cards: shadow level 2-3, spacing tokens 3–6, clear secondary metadata treatment
• Auth flow: compact spacing, strong primary actions, accessible color contrast
• Forms and inputs: subtle shadows for focus, consistent label/value hierarchy, spacing tokens for grouping
• Navigation and layout: prefer fixed widths for content, use spacing to separate groups not borders