skills.rest
Colten-Covington
Colten-CovingtonCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Colten-Covington/Buzz-Stack --skill ux-ui-design-colten-covington
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ydnikolaevydnikolaev
8

idea-interview

Extract project information through structured stakeholder interviews into a discovery brief.

Community
Advanced
AVVlasovAVVlasov

frontend-design

Creates frontend interfaces with intentional design principles and code implementation.

Community
Advanced
eboodyeboody

ui-expert

Audit UI designs for visual hierarchy, spacing, typography, and design-system consistency.

Community
Advanced
aliepratamaaliepratama

shadcn

Manage shadcn/ui component installation, updates, and documentation in frontend projects.

Community
Basic