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

0•

디자인 도구

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.

주요 기능

01Implements a strict 8px grid system for consistent spacing, padding, and layout dimensions.

02Standardizes typography hierarchies with specific scale and weight rules for better readability.

03Ensures mobile-first responsiveness and accessible touch targets for all interactive elements.

04Enforces a professional color system using neutral grays and a single strategic accent color.

05Provides pre-defined CSS patterns for interactive states including hover, active, and disabled.

060 GitHub stars

사용 사례

01Standardizing component libraries in React, Vue, or Svelte to ensure design consistency.

02Refactoring cluttered or legacy interfaces into clean, minimalist, and accessible layouts.

03Building a professional landing page or dashboard from scratch with a cohesive visual style.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arkcle83/crewdeck design-guide

For use in Claude.ai and ChatGPT