skills.rest
dmarins
dmarinsCOMMUNITY
Explore all skills by this author โ†’
GitHub

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
One-click install
npx skills add https://github.com/dmarins/sdd --skill frontend-ui-engineering-dmarins
Or copy as Structured Prompt for Agentโ–ผ
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.

Related Skills

Explore More Software Engineering Skillsโ†’
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
jamesrochabrunjamesrochabrun
194

frontend-designer

Automate accessible, responsive frontend UI component design and implementation.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

react-ui-patterns

Implement React UI patterns for loading states, error handling, and data fetching.

Community
Intermediate
AreteDriverAreteDriver
4

web-frontend-builder

Scaffold React, Next.js, or static HTML projects with TypeScript and Tailwind CSS.

Community
Intermediate