frontend-ui-engineering

Generates WCAG 2.1 AA compliant, responsive React UI components with design system integration.

Updated Apr 19, 2026

Search Tags:#ui #accessibility #frontend #react #responsive #design-system

Ready to run

npx skills add https://github.com/dmarins/sdd --skill frontend-ui-engineering-dmarins

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/dmarins/sdd/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/dmarins/sdd --skill frontend-ui-engineering-dmarins

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the common issue of AI-generated interfaces looking generic, lacking accessibility, or failing to adhere to professional design systems and production standards.

Core Features & Use Cases

Design System Integration: Ensures components strictly follow project-specific design tokens, spacing scales, and typography hierarchies.
Accessibility Compliance: Enforces WCAG 2.1 AA standards, including keyboard navigation, ARIA labeling, and focus management.
Production-Ready Patterns: Implements robust state management, skeleton loading states, and responsive layouts that avoid common AI-generated aesthetic pitfalls.

Quick Start

Use the frontend-ui-engineering skill to build a responsive task list component that follows the project design system and includes full keyboard accessibility.

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 standards?▼

Build accessible React components by enforcing WCAG 2.1 AA standards through semantic HTML, ARIA labeling, keyboard navigation, and strict focus management to ensure production-grade UI compliance.

What's the best way to integrate design tokens into a React UI?▼

Integrate design tokens into a React UI by applying consistent spacing scales and typography hierarchies during component composition, ensuring the output strictly follows the project-specific design system.

How do I avoid generic looking AI-generated interfaces in React?▼

Avoid generic AI-generated interfaces by applying production-ready patterns like skeleton loading states, robust state management, and responsive layouts that adhere to professional design system standards.

Does this frontend UI engineering approach support responsive layout implementation?▼

Yes, this frontend UI engineering approach supports responsive layout implementation by enforcing strict responsive standards and component composition patterns to deliver production-grade user interfaces.

Why does my AI-generated task list component lack keyboard accessibility?▼

Your AI-generated task list lacks keyboard accessibility because it fails to enforce focus management and ARIA labeling; applying strict component composition patterns ensures full keyboard navigation and compliance.