skills.rest
shirulot
shirulotCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Build accessible frontend components adhering to WCAG 2.1 standards.

Updated Jul 6, 2026
Search Tags:#ui#accessibility#frontend#react#web-development#design-system
One-click install
npx skills add https://github.com/shirulot/codex-skill --skill frontend-ui-engineering-shirulot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/shirulot/codex-skill/tree/main/frontend-ui-engineering
Command: npx skills add https://github.com/shirulot/codex-skill --skill frontend-ui-engineering-shirulot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates the generic, low-quality AI aesthetic in user interfaces by enforcing professional design system standards, accessibility compliance, and robust component architecture.

Core Features & Use Cases

  • Component Architecture: Implements clean, composable, and focused UI components with proper separation of concerns.
  • Accessibility & UX: Ensures WCAG 2.1 AA compliance through keyboard navigation, focus management, and meaningful state handling.
  • Design System Adherence: Provides a framework to avoid common AI-generated UI pitfalls like excessive gradients, inconsistent spacing, and poor visual hierarchy.

Quick Start

Use the frontend-ui-engineering skill to refactor the current component to follow production-quality standards for accessibility and design system consistency.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema
How do I build accessible React components that meet WCAG 2.1 standards?▼

Build accessible React components by enforcing strict keyboard navigation, focus management, and semantic composition to meet WCAG 2.1 AA compliance and ensure meaningful interactive state handling.

What is the best way to avoid generic AI aesthetic in frontend web development?▼

Avoid generic AI aesthetics in frontend web development by applying professional design system standards that eliminate excessive gradients, fix inconsistent spacing, and establish robust visual hierarchy.

How do I refactor an existing UI component for design system adherence?▼

Refactor UI components for design system adherence by restructuring them into clean, composable architectures with proper separation of concerns to ensure production-quality accessibility and consistent visual layout.

Does this approach work for maintaining responsive layouts and interactive state?▼

Yes, this approach works for maintaining responsive layouts and interactive state by applying robust component architecture that handles interactive state management while ensuring strict accessibility and semantic composition.

Why does my frontend UI component fail keyboard navigation and focus management?▼

Frontend UI components fail keyboard navigation and focus management when they lack semantic composition and strict WCAG 2.1 accessibility compliance, requiring refactoring to handle interactive states meaningfully.

Related Skills

Explore More Software Engineering Skills→
CatsofsufferingCatsofsuffering
5

claymorphism

Define claymorphism design systems with CSS tokens for soft UI components.

Community
Intermediate
tan-yong-shengtan-yong-sheng
4

ui-visual-validator

Analyze screenshots for visual regressions, design system compliance, and accessibility.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced