skills.rest
0xRayAI
0xRayAIOFFICIAL
Explore all skills by this author →
GitHub

frontend-ui-ux-engineer

Apply UI/UX design principles and WCAG 2.1 AA accessibility guidelines to web interfaces.

Updated Jun 5, 2026
Search Tags:#ui#accessibility#frontend#wcag#ux#design-system
One-click install
npx skills add https://github.com/0xRayAI/xray --skill frontend-ui-ux-engineer-0xrayai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux-engineer
Source: https://github.com/0xRayAI/xray/tree/main/src/skills/frontend-ui-ux-engineer
Command: npx skills add https://github.com/0xRayAI/xray --skill frontend-ui-ux-engineer-0xrayai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses the gap between functional code and polished, user-centric design by enforcing professional UI/UX standards and accessibility compliance.

Core Features & Use Cases

  • Design System Enforcement: Applies consistent spacing, typography, and color theory to ensure visual cohesion.
  • Accessibility Auditing: Ensures interfaces meet WCAG 2.1 AA standards through semantic HTML and keyboard navigation support.
  • Use Case: When building a new dashboard, use this skill to validate that your component spacing follows a 4px grid and that all interactive elements have appropriate contrast ratios and focus states.

Quick Start

Use the frontend-ui-ux-engineer skill to review the current component library for WCAG 2.1 AA accessibility compliance and visual consistency.

Frequently Asked Questions about frontend-ui-ux-engineer

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

FAQPage Schema
How do I ensure my frontend components meet WCAG accessibility standards?▼

To ensure frontend components meet WCAG accessibility standards, apply semantic HTML structures, verify color contrast ratios, and support keyboard navigation. This skill audits web interfaces specifically for WCAG 2.1 AA compliance and visual consistency.

What is the best way to build a visually consistent UI design system?▼

The best way to build a visually consistent UI design system is to standardize typography scales, apply color theory, and enforce spacing rules like a 4px grid. This skill applies these professional UI/UX principles directly to your frontend components.

How do I audit a web interface for UI and UX compliance?▼

You can audit a web interface for UI and UX compliance by reviewing your component library against professional design principles and accessibility guidelines. This skill validates interactive elements for appropriate contrast ratios, focus states, and semantic HTML structures.

Can I use this to check responsive design and color contrast ratios in my dashboard?▼

Yes, you can use this skill to check responsive design and color contrast ratios in your dashboard. It facilitates the creation of responsive web interfaces and ensures all interactive elements meet strict WCAG 2.1 AA contrast and focus state requirements.

Why does my frontend code lack visual cohesion despite being functional?▼

Your frontend code lacks visual cohesion because functional code often skips professional UI/UX design principles. This skill bridges that gap by enforcing design system logic, including typography scales, color contrast ratios, and consistent 4px grid spacing.

Related Skills

Explore More Design & Creative Skills→
webn77webn77

ascii-mockup-wireframe

Generate structured ASCII wireframes and mockups from page descriptions.

Community
Basic
DemolinatorDemolinator
2

Playwright Workflow Tester

Automate end-to-end web application tests with Playwright and generate markdown reports.

Community
Advanced
thec3ukthec3uk

Frontend Accessibility

Guide frontend code to meet accessibility standards like ARIA and keyboard navigation.

Official
Basic
msichtermanmsichterman

vercel-react-native-skills

Apply React Native and Expo performance best practices to components, lists, animations, and images.

Community
Advanced