skills.rest
numekudi
numekudiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-ui-design

Enforce OOUI design guidelines with OKLCH colors and WCAG AA contrast.

Updated May 20, 2026
Search Tags:#accessibility#design system#ui design#ux#oklch#oo-ui
One-click install
npx skills add https://github.com/numekudi/dotfiles --skill web-ui-design-numekudi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-ui-design
Source: https://github.com/numekudi/dotfiles/tree/main/copilot/.copilot/skills/web-ui-design
Command: npx skills add https://github.com/numekudi/dotfiles --skill web-ui-design-numekudi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidelines to ensure user interfaces are intuitive, accessible, and maintainable, avoiding common design pitfalls.

Core Features & Use Cases

  • Design Principles: Enforces Object-Oriented UI (OOUI) for better user mental models.
  • Color & Contrast: Mandates the use of OKLCH color space and adherence to WCAG AA contrast ratios.
  • Prohibited Elements: Explicitly forbids cards, gradients, emoji, and icons in section titles.
  • Use Case: Ensure a new feature's UI adheres to established design standards, promoting consistency and accessibility across the product.

Quick Start

Apply the web-ui-design skill to ensure the new dashboard follows all recommended practices.

Frequently Asked Questions about web-ui-design

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

FAQPage Schema
How do I design user interfaces that meet WCAG AA contrast standards?▼

Design accessible user interfaces by applying the OKLCH color space and strictly adhering to WCAG AA contrast ratios. This approach ensures intuitive, maintainable UI designs while avoiding common accessibility pitfalls.

What is Object-Oriented UI and how does it improve user experience?▼

Object-Oriented UI (OOUI) structures interfaces around user mental models and objects rather than actions. Enforcing OOUI principles creates intuitive user experiences and promotes consistency across your product's design system.

How do I maintain CSS variables and apply DRY principles to a UI design system?▼

Maintain a UI design system by enforcing DRY principles and utilizing CSS variables for styling. This practice ensures long-term maintainability and consistency across your user interfaces without redundant code.

Why should I avoid cards and gradients in accessible UI design?▼

Accessible UI design explicitly prohibits cards, gradients, emoji, and icons in section titles to prevent visual clutter and cognitive overload. Avoiding these elements enforces stricter accessibility standards and clearer user mental models.

Does the OKLCH color space work well for building accessible web interfaces?▼

The OKLCH color space is mandated for building accessible web interfaces because it provides perceptual uniformity for precise contrast control. It directly supports adherence to WCAG AA contrast ratios.

What is the best way to ensure a new feature's UI follows established design standards?▼

The best way to ensure a new feature follows design standards is to apply Object-Oriented UI principles, OKLCH colors, and DRY CSS variables. This guarantees UI consistency, accessibility, and maintainability.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
kvngrfkvngrf
2

frontend-design

Create production-grade frontend interfaces with CSS variables and React components.

Community
Basic
oborchersoborchers
28

accessibility-inclusive-design

Guide WCAG 2.2 AA compliance with color contrast and keyboard operability checks.

Community
Intermediate
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced