How does it handle mobile responsiveness?

The guide follows a mobile-first approach, ensuring that touch targets are at least 44x44px and that layouts stack correctly across mobile, tablet, and desktop viewports.

What is the core philosophy of the Modern UI Design Guide?

It focuses on a minimal, clean approach where every element serves a purpose. It prioritizes intentional whitespace, consistent spacing, and a clear visual hierarchy to create professional interfaces.

Can I use this with frameworks like Tailwind or Bootstrap?

Yes, while the skill provides specific CSS patterns, its principles of spacing, typography, and color apply to any framework or custom styling solution.

Does it include accessibility standards?

Absolutely. The guide mandates a minimum 16px body text size and requires color contrast to meet at least a 4.5:1 ratio for accessibility compliance.

Modern UI Design Guide

Name: Modern UI Design Guide
Author: majiayu000

bymajiayu000

•

Design Tools

Applies professional UI design principles and standardized styling patterns to create clean, accessible, and consistent frontend interfaces.

The Modern UI Design Guide is a comprehensive Claude Code skill designed to elevate frontend development by enforcing high-quality design standards. It provides a structured framework for creating minimal, professional interfaces through the implementation of an 8px spacing system, curated typography hierarchies, and intentional color palettes. By integrating this skill, developers can ensure that all generated UI components—from buttons and cards to complex layouts—follow modern usability best practices, maintain visual consistency, and avoid common aesthetic anti-patterns across any web framework.

Key Features

01Enforces a strict 8px grid system for consistent margins, padding, and layout proportions.

02Provides a curated color system with primary, secondary, and accent palettes for professional branding.

03Ensures mobile-first responsiveness and accessibility-compliant color contrast ratios.

04Standardizes typography with clear font-size hierarchies and optimized line heights for readability.

05Includes pre-defined interactive states for buttons, links, and form inputs to improve UX.

0664 GitHub stars

Use Cases

01Refactoring legacy CSS to align with modern, minimal design principles and spacing systems.

02Building accessible and consistent design systems for complex dashboards and web apps.

03Generating production-ready UI components for React, Vue, or Svelte applications.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add majiayu000/claude-skill-registry design-guide

For use in Claude.ai and ChatGPT

Download Skill