gui-design-principles_skill

This skill guides GUI design by applying visual hierarchy, color theory, typography, and responsive layouts to create accessible, usable interfaces.

Python

15

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

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

SKILL.md11.5 KB

Overview

This skill provides concise, practical design principles and best practices for building beautiful, usable GUI applications across web, desktop, and mobile. It covers visual hierarchy, responsive layouts, accessibility, component patterns, and dashboard-specific guidance. The guidance is actionable and aimed at production-ready interfaces and design systems.

How this skill works

It inspects and organizes UI fundamentals: color, typography, spacing, layout, and interaction patterns to create consistent, scalable interfaces. It prescribes responsive and mobile-first strategies, component structure, design tokens, and testing practices. It also covers dashboard design, data visualization choices, accessibility (WCAG), and performance considerations for real-time updates.

When to use it

Starting a new GUI project (web, mobile, or desktop)
Redesigning or refactoring an existing interface
Building dashboards or data-heavy admin panels
Creating a reusable component library or design system
Improving accessibility, performance, or cross-device consistency
Defining QA tests for visual regression and accessibility

Best practices

Adopt a mobile-first design and flexible grid system with clear breakpoints
Limit color palettes and enforce contrast ratios (WCAG AA/AAA targets)
Use a clear typographic scale, 1.4–1.6 line height, and 2–3 font families max
Create design tokens for colors, spacing, typography, and shadows to ensure consistency
Design accessible components: semantic HTML/ARIA, logical tab order, visible focus states
Optimize assets, prefer transform/opacity for motion, and honor prefers-reduced-motion

Example use cases

Designing a production dashboard with real-time charts and smooth transitions
Creating a cross-platform mobile app that follows iOS and Android conventions
Building a component library with tokens, responsive components, and Tailwind integration
Implementing accessible forms with inline validation and ARIA support
Refactoring an application to use a consistent spacing system and typography scale

FAQ

Use line charts for trends, bar charts for comparisons, pie charts only for small part‑of‑whole cases, and scatter plots for correlations. Add patterns or textures for color-blind accessibility.

How do I balance platform conventions with a unified brand?

Preserve core brand elements (color, typography) while adapting control patterns and spacing to platform conventions. Prioritize native behaviors for trust and usability.