ui-consistency

Standardize UI design patterns across Waldur HomePort components.

33|33|Updated May 15, 2017
One-click install
npx skills add https://github.com/waldur/waldur-homeport --skill ui-consistency
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-consistency
Source: https://github.com/waldur/waldur-homeport/tree/main/.claude/skills/ui-consistency
Command: npx skills add https://github.com/waldur/waldur-homeport --skill ui-consistency

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Waldur HomePort UI can become inconsistent as features evolve. This Skill provides a design-system-driven set of rules to ensure uniform components, accessible patterns, and coherent user experience.

Core Features & Use Cases

  • Enforces consistent styling across components (buttons, inputs, tables, dialogs)
  • Encourages accessible patterns (tooltips, focus states, aria-labels)
  • Provides decision trees for UI element visibility and interaction

Quick Start

Apply these UI consistency rules whenever you create or modify Waldur HomePort components to ensure accessibility and uniform UX.

Frequently Asked Questions about ui-consistency

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

FAQPage Schema
How do I standardize UI design patterns across components like forms and tables?

To standardize UI design patterns, apply design-system-driven rules that enforce consistent styling, accessible interactions, and visual tokens across forms, tables, buttons, and dialogs to reduce UI debt and inconsistency.

What's the best way to ensure accessibility rules are applied to tooltips and dialogs?

The best way to ensure accessibility for tooltips and dialogs is to implement explicit guidelines specifying focus states, aria-labels, and disabled state behaviors to enforce coherent and accessible user interactions.

How do I implement decision trees for UI element visibility and interaction?

You can implement decision trees for UI element visibility by applying frontmatter-based guidelines and in-skill body instructions that specify when and how components should be displayed and interacted with across modules.

Can I use these component guidelines to manage empty states and loading states?

Yes, these component guidelines apply to empty states and loading states, providing standardized visual tokens and accessibility patterns to ensure uniform user experiences across all application features and modules.

Why does UI inconsistency happen and how do design systems solve it?

UI inconsistency happens as features evolve and lack standardized patterns; design systems solve this by enforcing uniform components, accessible patterns, and explicit rules across all modules to reduce UI debt.

Do I need specific frontmatter rules to enforce disabled states and visual tokens?

Yes, you need explicit frontmatter-based guidelines to enforce disabled states, accessibility rules, and visual tokens, ensuring that developers and designers follow consistent component patterns across the application.