uiux-design-principles

Name: uiux-design-principles
Availability: InStock
Author: aliciapls

Define enterprise UI and UX principles for layout, hierarchy, and accessibility.

Updated Apr 2, 2026

Search Tags:#accessibility #responsive design #design systems #microcopy #motion design #uiux #enterprise ux

Ready to run

npx skills add https://github.com/aliciapls/ML-Week-2---Healthcare --skill uiux-design-principles-aliciapls

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/aliciapls/ML-Week-2---Healthcare/tree/main/.claude/skills/23-uiux-design-principles
Command: npx skills add https://github.com/aliciapls/ML-Week-2---Healthcare --skill uiux-design-principles-aliciapls

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents common frontend design mistakes by giving clear, enterprise-ready guidance for layout, hierarchy, spacing, responsiveness, accessibility, motion, and microcopy.

Core Features & Use Cases

Top-down design method: Start with layout and information architecture before refining components or visual details.
Enterprise UX patterns: Choose the right patterns for dashboards, search and filters, cards, tables, empty states, loading states, and bulk actions.
Production-ready guidance: Apply accessibility, responsive breakpoints, motion restraint, and resilient content handling to avoid brittle interfaces.
Use Case: A product team can use this Skill to redesign a data-heavy admin dashboard so the primary actions stay visible, filters remain discoverable, and the interface works well on mobile, tablet, and desktop.

Quick Start

Use the uiux-design-principles skill to review my interface and recommend a cleaner, more accessible layout with better hierarchy and responsive behavior.

Frequently Asked Questions about uiux-design-principles

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

FAQPage Schema

How do I improve enterprise dashboard layout and hierarchy for better UX?▼

To improve enterprise dashboard UX, apply a top-down design method that establishes layout and information architecture before refining components. This ensures primary actions stay visible, filters remain discoverable, and content scales cleanly across devices.

What's the best way to handle responsive design breakpoints for data-heavy interfaces?▼

Handling responsive design breakpoints for data-heavy interfaces requires evaluating layout top-down and applying production-hardening patterns. This approach ensures dashboards and tables adapt cleanly across mobile, tablet, and desktop without brittle rendering.

How do I make enterprise UI components accessible and meet WCAG AA standards?▼

Making enterprise UI components accessible involves applying WCAG AA standards directly to frontend design reviews and component design. This ensures dashboards, search filters, and bulk actions remain usable for all users across frameworks like React and Flutter.

When should I use motion design and microcopy in enterprise UX?▼

Motion design and microcopy in enterprise UX should be used with restraint to guide user attention and clarify interactions. Apply them during page and dashboard planning to provide resilient content handling and avoid overwhelming users.

Can I use these UI/UX principles for frontend implementation in React and Flutter?▼

Yes, you can use these UI/UX principles for frontend implementation in React and Flutter. They provide production-ready guidance for component design, accessibility, and responsive behavior to prevent common design mistakes during development.

What enterprise UX patterns should I use for empty states and loading states?▼

For empty states and loading states, enterprise UX patterns should prioritize resilient content handling and clear hierarchy. Using a top-down design evaluation ensures these states integrate cleanly into dashboards and maintain accessibility across breakpoints.