skills.rest
carl10086
carl10086COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

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

7|Updated Apr 10, 2026
Search Tags:#ui#accessibility#frontend#react#web-development#design-system
One-click install
npx skills add https://github.com/carl10086/ys-powers --skill frontend-ui-engineering-carl10086
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/carl10086/ys-powers/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/carl10086/ys-powers --skill frontend-ui-engineering-carl10086

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill eliminates the generic, low-quality AI aesthetic in user interfaces by enforcing professional design system standards, accessibility compliance, and robust component architecture.

Core Features & Use Cases

  • Design System Adherence: Ensures UI components follow consistent spacing, typography, and semantic color tokens rather than relying on default AI-generated styles.
  • Accessibility Compliance: Enforces WCAG 2.1 AA standards, including keyboard navigation, proper ARIA labeling, and focus management.
  • Production-Ready Patterns: Promotes clean component composition, separation of data fetching from presentation, and proper state management strategies.

Quick Start

Use the frontend-ui-engineering skill to build a new accessible and responsive navigation component that follows the project design system.

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

To build accessible React components meeting WCAG 2.1 AA standards, enforce proper keyboard navigation, ARIA labeling, and focus management. This approach replaces generic AI aesthetics with professional design system standards and robust component architecture.

What is the best way to standardize design system consistency in web development?▼

Standardizing design system consistency in web development requires applying consistent spacing, typography, and semantic color tokens. This ensures UI components follow professional design patterns rather than relying on default, low-quality AI-generated styles.

How do I structure a clean React component architecture for production-grade UIs?▼

Structuring clean React component architecture for production-grade UIs involves separating data fetching from presentation and implementing proper state management strategies. This promotes clean component composition and eliminates low-quality interface aesthetics.

Can I use this approach to refactor existing web interfaces for accessibility compliance?▼

Yes, you can use this approach to refactor existing web interfaces for accessibility compliance. It standardizes interface refactoring within modern web applications to satisfy WCAG 2.1 AA requirements, design system consistency, and responsive layout implementation.

Why does my frontend UI look generic and how do I fix it?▼

Your frontend UI looks generic because it relies on default AI-generated styles lacking professional design system standards. Fix it by enforcing consistent spacing, typography, semantic color tokens, and WCAG 2.1 AA accessibility compliance during component creation.

Related Skills

Explore More Software Engineering Skills→
vidzzavidzza

css-tokens

Provide foundational CSS design tokens as custom properties for web projects.

Community
Basic
try-workstry-works
95

ui-design-system

Develop UI components and design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
legoutlegout
3

slides-generator

Generate interactive React and Tailwind CSS presentation slides from topics and research data.

Community
Advanced