Can I use this with any frontend framework?

Yes, the Design Guide principles are framework-agnostic and apply to vanilla HTML/CSS, React, Vue, Svelte, and other modern web technologies.

Why does it restrict the use of gradients?

The guide prioritizes a clean, professional aesthetic; it restricts multi-color gradients to prevent visual clutter and ensure a focused, high-end user experience.

Does it include accessibility standards?

Yes, the guide mandates a 16px minimum body text size, 44x44px touch targets for mobile, and color contrast checks to meet modern accessibility requirements.

How does this skill improve UI consistency?

It enforces a standardized 8px grid system and a restricted color palette, ensuring all generated components and sections share the same visual language and spacing logic.

Can the rules be overridden for specific brands?

Yes, while the skill provides a strong baseline, you can request specific brand colors or exceptions which the skill will then apply consistently across your project.

Minimal Modern Design Guide

Name: Minimal Modern Design Guide
Author: arkcle83

byarkcle83

デザインツール

Enforces modern, minimal UI design principles and consistent visual systems across all frontend frameworks.

概要

This skill provides Claude with a comprehensive framework for creating professional, clean, and accessible user interfaces. It standardizes design decisions by implementing a strict 8px grid system, a refined color palette with singular brand accents, and clear typographic hierarchies. By following these guidelines, Claude can generate UI components, layouts, and full applications that maintain a high standard of visual clarity, functional consistency, and production-ready aesthetics without the need for manual design oversight.

主な機能

Implements a strict 8px grid system for consistent spacing, padding, and layout dimensions.
Standardizes typography hierarchies with specific scale and weight rules for better readability.
Ensures mobile-first responsiveness and accessible touch targets for all interactive elements.
Enforces a professional color system using neutral grays and a single strategic accent color.
Provides pre-defined CSS patterns for interactive states including hover, active, and disabled.
0 GitHub stars

ユースケース

Standardizing component libraries in React, Vue, or Svelte to ensure design consistency.
Refactoring cluttered or legacy interfaces into clean, minimalist, and accessible layouts.
Building a professional landing page or dashboard from scratch with a cohesive visual style.

概要

主な機能

Implements a strict 8px grid system for consistent spacing, padding, and layout dimensions.
Standardizes typography hierarchies with specific scale and weight rules for better readability.
Ensures mobile-first responsiveness and accessible touch targets for all interactive elements.
Enforces a professional color system using neutral grays and a single strategic accent color.
Provides pre-defined CSS patterns for interactive states including hover, active, and disabled.
0 GitHub stars

ユースケース

Standardizing component libraries in React, Vue, or Svelte to ensure design consistency.
Refactoring cluttered or legacy interfaces into clean, minimalist, and accessible layouts.
Building a professional landing page or dashboard from scratch with a cohesive visual style.