web-design-mastery
CommunityPremium UI design guided by Refactoring UI.
Authoranilcancakir
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: web-design-mastery Download link: https://github.com/anilcancakir/my-claude-code/archive/main.zip#web-design-mastery Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.