skills.rest
myeohVmzrka92
myeohVmzrka92COMMUNITY
Explore all skills by this author →
GitHub

uiux-design-principles

Translate product goals into clear layouts, hierarchies, components, and interactions for frontend work.

Updated Apr 2, 2026
Search Tags:#accessibility#responsive design#design system#microcopy#design principles#uiux#enterprise ux
One-click install
npx skills add https://github.com/myeohVmzrka92/disease-risk-controller-S2 --skill uiux-design-principles-myeohvmzrka92
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/myeohVmzrka92/disease-risk-controller-S2/tree/main/.claude/skills/23-uiux-design-principles
Command: npx skills add https://github.com/myeohVmzrka92/disease-risk-controller-S2 --skill uiux-design-principles-myeohvmzrka92

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you make frontend decisions that keep enterprise interfaces clear, usable, and consistent before implementation begins. It prevents common UI mistakes such as weak hierarchy, hidden actions, inconsistent components, poor responsive behavior, and inaccessible interactions.

Core Features & Use Cases

  • Top-down design: Start with layout and information architecture, then refine features, components, and visual details.
  • Enterprise patterns: Choose the right approach for dashboards, lists, tables, filters, cards, bulk actions, loading states, and empty states.
  • Production-quality UX: Apply accessibility, responsive breakpoints, motion timing, microcopy, and hardening checks.
  • Use Case: Redesign a contacts dashboard so primary actions stay visible, filters are discoverable, and the interface works on mobile and desktop.

Quick Start

Use the uiux-design-principles skill to review this interface and recommend the best layout, hierarchy, actions, and accessibility improvements.

Frequently Asked Questions about uiux-design-principles

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

FAQPage Schema
How do I design enterprise dashboards that stay clear and fast on both mobile and desktop?▼

Improve enterprise UX by starting with layout and information architecture, then refining features, components, and visual details. This top-down approach translates product goals into clear hierarchies, discoverable filters, and consistent components to prevent usability regressions.

What's the best way to prevent accessibility and usability regressions in frontend UI components?▼

Prevent accessibility regressions by applying production hardening checks to evaluate component behavior, motion timing, microcopy, and responsive design. This ensures interactions remain accessible and enterprise UI patterns like loading states and empty states function correctly.

Can I use this approach to review UI decisions for both React and Flutter frontend applications?▼

Yes, you can review UI decisions for React, Flutter, and other frontend applications. The evaluation translates product goals into clear layouts, hierarchies, components, and interactions regardless of the specific frontend framework being used.

How do I choose the right design system components for complex enterprise lists and tables?▼

Choose design system components by evaluating enterprise patterns for lists, tables, filters, cards, and bulk actions. The review process ensures components behave consistently, communicate features clearly, and maintain proper hierarchy across responsive breakpoints.

Why does my enterprise interface feel slow and have hidden actions on smaller screens?▼

Enterprise interfaces feel slow and hide actions when layout, responsive breakpoints, and microcopy are not evaluated top-down. Translating product goals into clear hierarchies and component behaviors prevents weak hierarchy, inconsistent components, and poor responsive behavior.

Related Skills

Explore More Design & Creative Skills→
wonderslifewonderslife
13

system-architect

Scaffold project structures and technology stacks with starter templates.

Community
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
erichowenserichowens
181

windows-3-1-web-designer

Convert modern web interfaces into Windows 3.1 aesthetics with beveled borders and system-gray palettes.

Community
Advanced
aliciaplsaliciapls

uiux-design-principles

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

Community
Advanced