skills.rest
FFOO6866
FFOO6866COMMUNITY
Explore all skills by this author →
GitHub

uiux-design-principles

Establish UI/UX design guidelines for enterprise applications with layout-first methodology.

Updated Oct 10, 2025
Search Tags:#accessibility#responsive design#design system#ux writing#information architecture#uiux#enterprise dashboard
One-click install
npx skills add https://github.com/FFOO6866/lead2cash --skill uiux-design-principles-ffoo6866
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/FFOO6866/lead2cash/tree/main/.claude/skills/23-uiux-design-principles
Command: npx skills add https://github.com/FFOO6866/lead2cash --skill uiux-design-principles-ffoo6866

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents enterprise UI from becoming inconsistent, inaccessible, or hard to use by enforcing layout-first design decisions, robust component patterns, and WCAG-aligned accessibility.

Core Features & Use Cases

  • Top-down design methodology: Guides decisions from frame/layout → feature communication → component effectiveness → visual details.
  • Enterprise UX patterns: Implements action hierarchy, search & filter behavior, bulk actions, and dashboard/list/detail information architecture.
  • Production-ready UI guidance: Covers responsive breakpoints, motion rules (including reduced-motion), and error/empty/loading-state behaviors plus common pitfalls.

Use case example: You’re building a new admin dashboard page—use this skill to choose the correct view (table vs grid), define primary/secondary CTAs, design empty/loading/error states, and ensure keyboard and screen-reader accessibility across breakpoints.

Quick Start

Use the uiux-design-principles skill to review your planned enterprise page structure and identify the correct layout, component patterns, and accessibility requirements before you implement it.

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 an enterprise dashboard layout that is accessible and scalable?▼

An accessible enterprise dashboard uses a layout-first methodology, moving from frame decisions to feature communication and visual details. This establishes scalable UI architecture and ensures WCAG 2.1 AA compliance across responsive breakpoints.

What is the best way to handle empty, loading, and error states in enterprise UI?▼

Handling empty, loading, and error states requires consistent state behaviors and specific interaction patterns. Establish defined component states early in the design process to prevent inconsistent user experiences and address common production UI pitfalls.

How do I choose between a table and a grid for enterprise dashboard information architecture?▼

Choosing between a table and a grid depends on defining the correct view for your data structure. Apply a top-down design methodology to evaluate component effectiveness and select the appropriate layout pattern for your dashboard.

Does this UI/UX design approach support WCAG 2.1 AA accessibility and reduced-motion constraints?▼

Yes, this approach supports WCAG 2.1 AA accessibility expectations and reduced-motion constraints. It enforces keyboard and screen-reader accessibility, applying specific motion rules and interaction patterns across enterprise frontend implementations.

What should I consider when designing search and filter behavior for enterprise applications?▼

Designing search and filter behavior requires defining action hierarchy, bulk actions, and information architecture. Use layout-first decisions to establish clear interaction patterns that satisfy robust component behaviors across the application.

Related Skills

Explore More Design & Creative Skills→
rothenbergtrothenbergt
22

backstage-frontend-plugin

Build Backstage frontend plugins with the New Frontend System.

Community
Intermediate
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-accessibility

Implement and test React Native accessibility with WCAG 2.2 compliance.

Community
Advanced
emilyLi2020emilyLi2020
2

scaffold-frontend

Generate Next.js frontend structures from product requirement documents.

Community
Intermediate