skills.rest
bejranonda
bejranondaCOMMUNITY
Explore all skills by this author →
GitHub

gui-design-principles

Define GUI design principles covering layout, typography, color, accessibility, and responsive design.

27|16|Updated Oct 20, 2025
Search Tags:#accessibility#dashboards#responsive design#UI/UX#design principles#mobile app design#GUI design
One-click install
npx skills add https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude --skill gui-design-principles
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gui-design-principles
Source: https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude/tree/main/skills/gui-design-principles
Command: npx skills add https://github.com/bejranonda/LLM-Autonomous-Agent-Plugin-for-Claude --skill gui-design-principles

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? This Skill provides comprehensive guidelines and best practices for designing beautiful, functional, and accessible graphical user interfaces across web, desktop, and mobile platforms. It ensures a consistent and positive user experience, saving design and development time.

Core Features & Use Cases:

  • Core Design Principles: Covers visual hierarchy, color theory, typography, and spacing for aesthetically pleasing and intuitive interfaces.
  • Responsive Design Strategies: Guides mobile-first approaches, breakpoint strategies, and flexible components for seamless adaptation across devices.
  • UI Component Design: Offers best practices for designing buttons, forms, navigation, and cards, ensuring consistency and usability.
  • Accessibility Guidelines: Ensures WCAG 2.1 compliance, keyboard navigation, and screen reader support for inclusive design.
  • Use Case: When designing a new web dashboard, use this skill to ensure adherence to visual hierarchy, responsive design, and accessibility standards, resulting in a user-friendly and inclusive interface that meets all modern requirements.

Quick Start: Explain the core principles of "Visual Hierarchy" and "Color Theory" for GUI design.

Frequently Asked Questions about gui-design-principles

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design an accessible GUI that meets WCAG compliance standards?▼

Design accessible GUIs by implementing WCAG 2.1 compliance through keyboard navigation, ARIA labeling, sufficient color contrast thresholds, and screen reader support. These standards ensure your interface is usable by all users across web, desktop, and mobile platforms.

What's the best way to structure responsive design across mobile, tablet, and desktop?▼

Use a mobile-first approach with defined responsive breakpoints and flexible components that adapt across devices. Apply spacing tokens and typography scales consistently so your layout reflows seamlessly without redesigning for each screen size.

How do I establish visual hierarchy and color theory principles in UI design?▼

Visual hierarchy guides user attention through strategic spacing, typography weight, and color contrast. Color theory defines your palette and ensures sufficient contrast ratios; combined with layout principles, these create intuitive and aesthetically pleasing interfaces.

Can I use design tokens to maintain consistency across web, desktop, and mobile applications?▼

Yes. Design tokens for colors, typography, and spacing create a single source of truth for UI consistency. Apply them across web, desktop, and mobile projects so components behave predictably and maintenance becomes centralized.

What are the key considerations when designing UI components like buttons, forms, and navigation?▼

Design reusable components with consistent patterns for buttons, forms, and navigation that prioritize usability and accessibility. Define behavior, states, and spacing rules so your component library supports rapid, cohesive interface development.

When should I prioritize accessibility over other design goals?▼

Accessibility should never be secondary—integrate it from the start. WCAG compliance, keyboard navigation, and screen reader support are functional requirements, not trade-offs, and ensure your design works for all users and contexts.

Related Skills

Explore More Design & Creative Skills→
jaydubya818jaydubya818

ui-ux-designer

Create user personas, wireframes, and design systems for mobile apps.

Community
Advanced
calcosmiccalcosmic
9

accessibility

Audit frontend components for WCAG 2.2 AA accessibility compliance.

Community
Advanced
jac007xjac007x

design-system-validator

Audit Walmart design-system compliance across tokens, components, and spacing.

Community
Advanced
lengo0951lengo0951

ui-styling

Style React user interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced