skills.rest
mymx2
mymx2COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

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
One-click install
npx skills add https://github.com/mymx2/foreman --skill frontend-ui-engineering-mymx2
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
ucirelloucirello
2

browser-bug-testing-workflow

Automate browser UI testing with Playwright and tmux server management.

Community
Advanced
kiryteokiryteo
1

accessibility-review

Audits designs and code for WCAG 2.1 AA compliance.

Community
Intermediate