skills.rest
vinvcn
vinvcnCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Standardize accessible, responsive UI components with WCAG 2.1 AA compliance.

23|6|Updated May 9, 2026
Search Tags:#ui#accessibility#frontend#react#responsive#design-system
One-click install
npx skills add https://github.com/vinvcn/addyosmani-agent-skills-zh --skill frontend-ui-engineering-vinvcn
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/vinvcn/addyosmani-agent-skills-zh/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/vinvcn/addyosmani-agent-skills-zh --skill frontend-ui-engineering-vinvcn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill addresses the common issue of AI-generated interfaces looking generic or failing to meet professional engineering standards, ensuring that UI components are accessible, performant, and visually consistent with a project's design system.

Core Features & Use Cases

  • Component Architecture: Provides patterns for composable, focused components that separate data fetching from presentation.
  • Design System Adherence: Offers guidelines to avoid common AI aesthetic pitfalls like excessive gradients or non-standard spacing.
  • Accessibility & UX: Enforces WCAG 2.1 AA standards, including keyboard navigation, ARIA labeling, and proper focus management.
  • Use Case: When building a new dashboard widget, use this skill to ensure the component is responsive, handles loading/error states correctly, and integrates seamlessly with existing design tokens.

Quick Start

Use the frontend-ui-engineering skill to refactor the current task list component for better accessibility and design system compliance.

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 AA compliance?▼

To build accessible React components meeting WCAG 2. AA compliance, enforce keyboard navigation, ARIA labeling, and proper focus management within your UI architecture. This ensures professional interaction patterns and mobile-first responsiveness.

What is the best way to structure a composable React UI component architecture?▼

The best way to structure composable React UI components is separating data fetching from presentation logic. This approach ensures clean, maintainable component architecture while handling loading and error states correctly within modern web applications.

How do I avoid generic AI aesthetics when implementing a design system in frontend applications?▼

To avoid generic AI aesthetics when implementing a design system, follow strict guidelines against excessive gradients and non-standard spacing. Integrate seamlessly with existing design tokens to ensure visual consistency across all UI components.

Can I use this approach to refactor existing dashboard widgets for mobile-first responsiveness?▼

Yes, you can refactor existing dashboard widgets for mobile-first responsiveness by standardizing component architecture. This process ensures widgets handle loading and error states correctly while maintaining design system compliance and accessibility.

Why do AI-generated user interfaces often fail professional engineering standards?▼

AI-generated user interfaces often fail professional engineering standards because they lack strict design system adherence and accessibility enforcement. They frequently suffer from generic aesthetics, missing WCAG 2.1 AA standards, and poor component architecture.

Related Skills

Explore More Software Engineering Skills→
OpenDCAIOpenDCAI
114

react

Standardize React component development with design tokens and TypeScript.

Official
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
tambo-aitambo-ai
11.2k

building-compound-components

Build unstyled composable React components with context-based state sharing.

Official
Basic
HouseGarofaloHouseGarofalo
3

radix-ui

Provide unstyled, accessible React component primitives for custom UI.

Official
Intermediate