Is this skill suitable for data-intensive dashboards?

Yes, it contains specialized best practices for data visualization, chart selection, real-time updates, and managing complex layout patterns.

Can I use these principles with Tailwind CSS or CSS Grid?

Absolutely. The skill includes specific strategies for utility-first CSS integration, Flexbox layouts, and modern CSS features like container queries and custom properties.

Does this skill support mobile-specific design?

Yes, it includes specific guidelines for touch interactions, haptic feedback, and platform-specific standards like iOS Human Interface Guidelines and Android Material Design.

How does this skill assist with web accessibility?

It provides checklists and implementation patterns for WCAG 2.1 compliance, covering color contrast, ARIA labels, semantic HTML, and keyboard focus management.

GUI Design Principles

Name: GUI Design Principles
Author: bejranonda

bybejranonda

•

デザインツール

Implements professional, accessible, and high-performance user interfaces using industry-standard design foundations and modern UX patterns.

概要

The GUI Design Principles skill serves as a comprehensive architectural guide for Claude when building or refining graphical user interfaces across web, mobile, and desktop platforms. It provides deep expertise in visual hierarchy, color theory, typography, and responsive layout strategies, ensuring that every interface is aesthetically pleasing and functionally sound. By incorporating WCAG 2.1 accessibility standards, modern design system tokens, and specialized dashboard visualization patterns, this skill allows developers to automate the creation of production-ready UIs that prioritize user experience and cross-device consistency.

主な機能

Comprehensive visual hierarchy and typography scaling guidelines
Modern design system implementation using CSS tokens and utility-first frameworks
Mobile-first responsive design strategies and breakpoint management
Specialized patterns for dashboards, data visualization, and complex forms
WCAG 2.1 accessibility compliance for screen readers and keyboard navigation
9 GitHub stars

ユースケース

Establishing a scalable design system with CSS variables for consistent branding across platforms.
Scaffolding a responsive dashboard with consistent spacing and high-contrast data visualizations.
Auditing and refactoring existing UI components to meet modern accessibility and UX standards.

概要

主な機能

Comprehensive visual hierarchy and typography scaling guidelines
Modern design system implementation using CSS tokens and utility-first frameworks
Mobile-first responsive design strategies and breakpoint management
Specialized patterns for dashboards, data visualization, and complex forms
WCAG 2.1 accessibility compliance for screen readers and keyboard navigation
9 GitHub stars

ユースケース

Establishing a scalable design system with CSS variables for consistent branding across platforms.
Scaffolding a responsive dashboard with consistent spacing and high-contrast data visualizations.
Auditing and refactoring existing UI components to meet modern accessibility and UX standards.