skills.rest
MinhDuyDEV
MinhDuyDEVCOMMUNITY
Explore all skills by this author →
𝕏@MinhDuyDEVGitHub

frontend-ui-engineering

Apply WCAG 2.1 AA accessibility and responsive design to React user interfaces.

Updated Jun 18, 2026
Search Tags:#accessibility#web development#frontend#react#responsive design#component design#ui engineering
One-click install
npx skills add https://github.com/MinhDuyDEV/mdpi --skill frontend-ui-engineering-minhduydev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/MinhDuyDEV/mdpi/tree/main/.pi/skills/frontend-ui-engineering
Command: npx skills add https://github.com/MinhDuyDEV/mdpi --skill frontend-ui-engineering-minhduydev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers avoid low-quality, generic frontend implementations by providing guidance for building accessible, performant, and visually polished user interfaces.

Core Features & Use Cases

  • Production UI Implementation: Guides component architecture, responsive layouts, state management, and maintainable frontend patterns.
  • Accessibility and Quality Standards: Applies WCAG 2.1 AA practices, semantic HTML, keyboard navigation, and complete loading, error, and empty states.
  • Use Case: Use this Skill when creating or modifying React-based user interfaces that need to match professional design standards instead of default AI-generated styling.

Quick Start

Ask the frontend-ui-engineering skill to improve this user interface component for production quality, accessibility, and responsive behavior.

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 for production?▼

To build accessible React components for production, apply WCAG 2.1 AA practices, use semantic HTML, ensure keyboard navigation, and implement complete loading, error, and empty states.

What is the best way to structure maintainable frontend UI architectures?▼

The best way to structure maintainable frontend UI architectures is by applying polished component design patterns, managing state effectively, and ensuring responsive design practices across user-facing application changes.

How do I make my web application UI meet WCAG 2.1 AA compliance?▼

Make your web application UI meet WCAG 2.1 AA compliance by implementing semantic interfaces, supporting full keyboard navigation, and designing accessible component layouts that handle loading, error, and empty states properly.

Can I use this approach to improve default AI-generated styling in my web app?▼

Yes, you can use this approach to improve default AI-generated styling by replacing generic implementations with professional, production-ready user interfaces that feature polished frontend patterns and responsive design.

When should I apply responsive design practices to my frontend components?▼

You should apply responsive design practices to your frontend components whenever creating or modifying user-facing application layouts, ensuring the interface adapts correctly across different devices and screen sizes.

Related Skills

Explore More Software Engineering Skills→
lava-chenlava-chen
1

react-component

Create typed, reusable React components with hooks and TypeScript patterns.

Community
Basic
haabehaabe

a11y-check

Audits web interfaces for WCAG 2.1 AA accessibility compliance.

Community
Intermediate
htlin222htlin222
77

frontend

Develop React components with responsive layouts and state management.

Community
Intermediate
wilfriedagowilfriedago
2

angular-performance

Optimize Angular performance with NgOptimizedImage, @defer lazy loading, and SSR hydration.

Community
Intermediate