skills.rest
pproenca
pproencaCOMMUNITY
Explore all skills by this author →
𝕏@ThePedroProencaGitHub

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
One-click install
npx skills add https://github.com/pproenca/dot-skills --skill ui-design-pproenca
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
junchenghuojunchenghuo
3

fe-a11y-performance-audit

Audit frontend web pages for WCAG compliance and Core Web Vitals.

Community
Intermediate
nanorepublicananorepublica
61

Global Commenting

Apply standardized file headers and module-level comments across codebases.

Community
Basic
vosslabvosslab
2

color-accessibility-expert

Detect and fix color contrast issues in code and images using WCAG ratios.

Community
Advanced