ui-design

Apply 42 UI/UX design rules across 8 categories for web interfaces.

193|17|Updated Jan 16, 2026

Search Tags:#performance #accessibility #frontend #responsive design #design system #ui/ux

Ready to run

npx skills add https://github.com/pproenca/dot-skills --skill ui-design-pproenca

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/pproenca/dot-skills/tree/main/skills/.curated/ui-design
Command: npx skills add https://github.com/pproenca/dot-skills --skill ui-design-pproenca

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices for UI/UX and frontend design, ensuring that web interfaces are accessible, performant, and user-friendly.

Core Features & Use Cases

Accessibility Compliance: Adheres to WCAG guidelines for inclusive design.
Performance Optimization: Focuses on Core Web Vitals for faster loading and better user experience.
Responsive Design: Ensures interfaces adapt seamlessly across all devices.
Use Case: When developing a new React component, use this Skill to ensure it meets accessibility standards, is optimized for Core Web Vitals, and has a mobile-first responsive design.

Quick Start

Apply the ui-design skill to refactor the current button component to meet WCAG contrast ratio requirements.

Frequently Asked Questions about ui-design

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

FAQPage Schema

How do I make my React components accessible and meet WCAG contrast ratio requirements?▼

To make React components accessible, apply UI design best practices that enforce WCAG contrast ratio requirements. This ensures your components meet inclusive design standards for color contrast, layout, and form accessibility.

What are Core Web Vitals and how do I optimize them for better frontend performance?▼

Core Web Vitals are performance metrics for loading speed and user experience. You optimize them by applying frontend design best practices focused on performance, ensuring faster loading and better overall web interface responsiveness.

How do I implement mobile-first responsive design for web interfaces?▼

Mobile-first responsive design is implemented by following layout best practices that ensure web interfaces adapt seamlessly across all devices. This approach prioritizes mobile constraints before scaling up to larger screens.

Can I use these UI/UX rules to refactor existing frontend components?▼

Yes, you can use these UI/UX rules to refactor existing frontend components. The best practices cover 42 rules across 8 categories, allowing you to update components for accessibility, typography, and animation compliance.

What frontend design categories should I focus on for building user-friendly interfaces?▼

Focus on accessibility, Core Web Vitals, layout, typography, color, forms, and animation. These categories provide comprehensive coverage for building beautiful, accessible, and performant web interfaces.

Does this approach work for ensuring design system consistency across web projects?▼

Yes, applying standardized UI/UX best practices works for ensuring design system consistency. By adhering to rules for typography, color, and layout, you maintain visual and functional coherence across all web interfaces.