uiux-design-principles

Apply framework-agnostic UI/UX design principles to frontend layouts and audits.

12|4|Updated Jan 14, 2026
One-click install
npx skills add https://github.com/Integrum-Global/kailash-vibe-cc-setup --skill uiux-design-principles-integrum-global
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: uiux-design-principles
Source: https://github.com/Integrum-Global/kailash-vibe-cc-setup/tree/main/.claude/skills/23-uiux-design-principles
Command: npx skills add https://github.com/Integrum-Global/kailash-vibe-cc-setup --skill uiux-design-principles-integrum-global

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Framework-agnostic UI/UX design principles and guidelines to ensure consistent, enterprise-grade interfaces across frontend work.

Core Features & Use Cases

  • Top-down design methodology (layout → features → components → details)
  • Layout and information architecture patterns
  • Visual hierarchy principles and accessibility standards (WCAG 2.1 AA)
  • Design system principles and naming conventions
  • Common pitfalls and solutions for enterprise UI design
  • Reference guidance for proactive design reviews and audits

Quick Start

Apply these UI/UX principles to your next frontend feature by starting with a top-down layout, defining information architecture, and validating accessibility and responsive patterns.

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-grade interfaces?

Core UI/UX design principles for enterprise interfaces involve top-down layout decisions, structured information architecture, clear visual hierarchy, and design-system alignment to ensure consistent, framework-agnostic frontend work.

How do I audit an existing frontend layout for accessibility and responsive design?

Audit existing layouts by validating responsive behavior against top-down design methodology and checking visual hierarchy, navigation patterns, and WCAG 2.1 AA accessibility compliance to identify and resolve common enterprise UI pitfalls.

Does this UI/UX design guidance work with any frontend framework?

Yes, these UI/UX design principles are explicitly framework-agnostic, meaning you can apply the layout, information architecture, and design-system guidelines to enterprise frontend work regardless of your specific technology stack.

How do I establish information architecture and visual hierarchy for a new frontend feature?

Establish information architecture and visual hierarchy by applying a top-down design methodology that progresses from layout to features, then components, and finally details, ensuring proper navigation and structure.

What is the best way to align my UI components with WCAG 2.1 AA accessibility standards?

Align UI components with WCAG 2.1 AA standards by applying framework-agnostic accessibility principles during top-down layout design, validating responsive patterns, and enforcing design-system naming conventions to prevent common enterprise UI pitfalls.

When should I not use a top-down layout methodology for UI design?

Avoid top-down layout methodology when your enterprise UI design lacks defined information architecture or clear visual hierarchy requirements, as starting with details before establishing layout structure creates inconsistent, inaccessible interfaces.