frontend-ui-engineering

Name: frontend-ui-engineering
Availability: InStock
Author: mymx2

Enforce design system constraints and WCAG 2.1 AA accessibility in web UI components.

4|Updated Jun 10, 2026

Search Tags:#ui #accessibility #frontend #react #web-development #design-system

Ready to run

npx skills add https://github.com/mymx2/foreman --skill frontend-ui-engineering-mymx2

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates the common pitfalls of AI-generated UI, such as generic aesthetics, poor accessibility, and lack of design system adherence, ensuring your interfaces are professional and performant.

Core Features & Use Cases

Design System Enforcement: Provides strict guidelines on spacing, typography, and color to prevent the generic AI look.
Accessibility Compliance: Ensures all components meet WCAG 2.1 AA standards, including keyboard navigation and screen reader support.
Component Architecture: Promotes clean, composable, and testable code structures for scalable frontend development.

Quick Start

Use the frontend-ui-engineering skill to refactor the current component to follow the project design system and ensure 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 ensure my React components meet WCAG 2.1 AA accessibility standards?▼

To meet WCAG 2.1 AA accessibility standards, your components must enforce keyboard navigation and screen reader support. This skill standardizes UI development by applying these compliance requirements directly to interactive elements and layouts.

What is the best way to prevent generic AI looks in web development?▼

Preventing generic AI looks in web development requires strict design system enforcement for spacing, typography, and color. This skill eliminates poor aesthetics by constraining UI component generation to match production-grade modular architectures.

How do I refactor existing UI components to follow a design system?▼

Refactoring existing UI components to follow a design system involves applying modular component architecture constraints. This skill restructures your code into clean, composable, and testable web layouts while satisfying responsive design requirements.

Does this approach work for building responsive web layouts from scratch?▼

Yes, this approach works for building responsive web layouts from scratch by standardizing the creation of interactive elements. It enforces modular component architecture and WCAG 2.1 AA compliance throughout the web application development process.