ux-ui-design

Guide UX and UI design for web applications with code examples.

Updated Feb 13, 2026

Search Tags:#design #ui #layout #responsive design #interaction #ux #visual hierarchy

Ready to run

npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill ux-ui-design-colten-covington

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-ui-design
Source: https://github.com/Colten-Covington/Buzz-Stack/tree/main/.github/skills/ux-ui-design
Command: npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill ux-ui-design-colten-covington

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are not only visually appealing but also highly functional, intuitive, and accessible, leading to better user satisfaction and product adoption.

Core Features & Use Cases

Layout Guidance: Provides patterns for responsive grids, sidebars, and container widths.
Visual Hierarchy: Offers best practices for typography, spacing, and color to guide user attention.
Interaction Design: Details states for buttons, forms, and loading indicators to ensure clear feedback.
Use Case: When designing a new dashboard, use this Skill to ensure a clear visual hierarchy, consistent button styles, and responsive layouts that adapt seamlessly from mobile to desktop.

Quick Start

Apply the UX/UI design skill to create a responsive card component with clear visual hierarchy and interactive states.

Frequently Asked Questions about ux-ui-design

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

FAQPage Schema

How do I establish visual hierarchy in web application layouts?▼

Establish visual hierarchy by applying best practices for typography, spacing, and color to guide user attention effectively. This Skill provides specific patterns and principles to help you structure elements so users intuitively navigate your interface.

What are common UI design anti-patterns to avoid when shipping features?▼

Common UI design anti-patterns include inconsistent button styles, poor loading indicators, and unclear form states. This Skill details these pitfalls and includes a comprehensive checklist to evaluate interfaces before shipping UI features.

How do I design responsive layouts that adapt from mobile to desktop?▼

Design responsive layouts by utilizing responsive grids, appropriate sidebars, and proper container widths. This Skill offers layout guidance and code examples to ensure your web application adapts seamlessly across mobile and desktop breakpoints.

What interaction design states are needed for clear user feedback?▼

Interaction design requires clear states for buttons, forms, and loading indicators to ensure immediate user feedback. This Skill outlines these specific interactive states and provides code examples for clarity.

Can I use this UX/UI guidance for building responsive dashboard components?▼

Yes, you can use this guidance to build responsive dashboards by ensuring clear visual hierarchy, consistent button styles, and responsive grids. The provided patterns and code examples directly support creating adaptable card components and complex layouts.