uiux-design-principles

Provide UI/UX design principles for enterprise applications with WCAG 2.1 AA accessibility.

1|Updated Mar 7, 2026
One-click install
npx skills add https://github.com/terrene-foundation/kailash-coc-claude-rs --skill uiux-design-principles-terrene-foundation
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/terrene-foundation/kailash-coc-claude-rs/tree/main/.claude/skills/23-uiux-design-principles
Command: npx skills add https://github.com/terrene-foundation/kailash-coc-claude-rs --skill uiux-design-principles-terrene-foundation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive framework-agnostic guide to UI/UX design principles, ensuring enterprise applications are intuitive, accessible, and user-friendly across all platforms.

Core Features & Use Cases

  • Design Methodology: Enforces a top-down design approach, prioritizing layout and information architecture.
  • Component Guidelines: Offers detailed specifications for cards, buttons, empty states, and loading indicators.
  • Accessibility Standards: Ensures WCAG 2.1 AA compliance for color contrast, keyboard navigation, and screen reader support.
  • Use Case: When designing a new dashboard, use this Skill to define the layout, ensure clear visual hierarchy, select appropriate components, and verify accessibility standards before implementation.

Quick Start

Follow the top-down design order outlined in the UI/UX Design Principles document to structure your frontend development.

Frequently Asked Questions about uiux-design-principles

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

FAQPage Schema
What are the core UI/UX design principles for building enterprise applications?

Core UI/UX design principles for enterprise applications involve using a top-down design approach to prioritize layout and information architecture, ensuring clear visual hierarchy, and applying framework-agnostic component guidelines for intuitive user experiences.

How do I ensure my frontend design meets WCAG 2.1 AA accessibility standards?

To ensure frontend design meets WCAG 2.1 AA accessibility standards, verify color contrast ratios, implement keyboard navigation, and support screen reader compatibility across all UI components and layout patterns.

What is the top-down design methodology for frontend development?

The top-down design methodology for frontend development structures applications by first defining the overall layout and information architecture, then moving to visual hierarchy, and finally detailing specific components like cards and buttons.

Are there framework-agnostic guidelines for designing enterprise dashboard components?

Yes, there are framework-agnostic guidelines for enterprise dashboard components that provide detailed specifications for designing cards, buttons, empty states, and loading indicators while maintaining responsive patterns and accessibility.

How do I structure a design system for enterprise UX optimization?

To structure a design system for enterprise UX optimization, apply framework-agnostic UI/UX design principles to standardize component design, enforce visual hierarchy, and ensure WCAG 2.1 AA compliance across all application interfaces.

When do I need to follow specific UI/UX guidelines for component design?

You need to follow specific UI/UX guidelines for component design when creating new enterprise interfaces, ensuring that elements like cards, buttons, and loading indicators maintain consistent visual hierarchy and accessibility standards.