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.

주요 기능

01Comprehensive visual hierarchy and typography scaling guidelines

02Modern design system implementation using CSS tokens and utility-first frameworks

03Mobile-first responsive design strategies and breakpoint management

04Specialized patterns for dashboards, data visualization, and complex forms

05WCAG 2.1 accessibility compliance for screen readers and keyboard navigation

069 GitHub stars

사용 사례

01Establishing a scalable design system with CSS variables for consistent branding across platforms.

02Scaffolding a responsive dashboard with consistent spacing and high-contrast data visualizations.

03Auditing and refactoring existing UI components to meet modern accessibility and UX standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bejranonda/llm-autonomous-agent-plugin-for-claude gui-design-principles

For use in Claude.ai and ChatGPT

Download Skill

주요 기능

01Comprehensive visual hierarchy and typography scaling guidelines

02Modern design system implementation using CSS tokens and utility-first frameworks

03Mobile-first responsive design strategies and breakpoint management

04Specialized patterns for dashboards, data visualization, and complex forms

05WCAG 2.1 accessibility compliance for screen readers and keyboard navigation

069 GitHub stars

사용 사례

01Establishing a scalable design system with CSS variables for consistent branding across platforms.

02Scaffolding a responsive dashboard with consistent spacing and high-contrast data visualizations.

03Auditing and refactoring existing UI components to meet modern accessibility and UX standards.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bejranonda/llm-autonomous-agent-plugin-for-claude gui-design-principles

For use in Claude.ai and ChatGPT

Download Skill