skills.rest
vincent119
vincent119COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-component-guidelines

Standardizes UI component behavior and accessibility for web and mobile interfaces.

Updated Apr 20, 2026
Search Tags:#ui#accessibility#a11y#frontend#react#components#design-guidelines
One-click install
npx skills add https://github.com/vincent119/ai-rules-kit --skill ui-component-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-component-guidelines
Source: https://github.com/vincent119/ai-rules-kit/tree/main/skills/ui-component-guidelines
Command: npx skills add https://github.com/vincent119/ai-rules-kit --skill ui-component-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This UI component design guideline consolidates best practices for building consistent, accessible, and predictable UI components across applications, reducing design debt and improving user experience.

Core Features & Use Cases

  • Button conventions: label semantics, states, and accessibility considerations.
  • Form guidelines: validation feedback, error messaging, and input focus management.
  • Modal, toast, table, and navigation patterns: interaction rules, focus handling, and responsive behavior.
  • Use Case: when designing a new feature, apply these patterns to ensure consistent interactions and visual language across screens.

Quick Start

Apply these guidelines to design and implement consistent UI components across your app, starting with Button, Form, and Modal patterns.

Frequently Asked Questions about ui-component-guidelines

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

FAQPage Schema
How do I implement focus traps in modals for web interfaces?▼

Implementing focus traps in modals requires enforcing keyboard accessibility and predictable state transitions to manage focus handling and responsive behavior across web interfaces.

What are the UI component accessibility guidelines for forms and buttons?▼

UI component accessibility guidelines for forms and buttons require applying ARIA attributes, validation feedback, label semantics, and input focus management to ensure consistent interactions.

How do I standardize UI component behavior to reduce design debt?▼

Standardize UI component behavior by applying consistent visual tokens, interaction states, and accessibility guidelines across button, form, modal, toast, table, and navigation patterns.

Does this approach apply to both web and mobile responsive layouts?▼

Yes, these UI component guidelines apply to both web and mobile interfaces, specifically targeting responsive layouts, focus management, and predictable state transitions across products.

What is the best way to handle validation feedback and error messaging in UI components?▼

The best way to handle validation feedback and error messaging in UI components is applying standardized form guidelines that enforce input focus management and accessible error messaging.

Why do we need ARIA attributes and keyboard accessibility in React components?▼

ARIA attributes and keyboard accessibility are needed in React components to enforce predictable state transitions, focus management, and consistent visual tokens across all interaction states.

Related Skills

Explore More Design & Creative Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
Awais68Awais68

tailwind-css

Style UI components with mobile-first Tailwind CSS utilities and semantic theming.

Community
Advanced
videojsvideojs
888

aria

Audit React UI components for ARIA accessibility and keyboard navigation.

Official
Basic
jubalmjubalm
1

shadcn/ui Advanced Patterns

Automate advanced shadcn/ui integration patterns for forms, tables, and modals.

Community
Advanced