skills.rest
RefractSystems
RefractSystemsOFFICIAL
Explore all skills by this author →
GitHub

frontend-ui-engineering

Build accessible, responsive frontend UIs consistent with a project's design system.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#frontend#components#responsive#ux#design-system
One-click install
npx skills add https://github.com/RefractSystems/virtmcu --skill frontend-ui-engineering-refractsystems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/RefractSystems/virtmcu/tree/main/.gemini/skills/frontend-ui-engineering
Command: npx skills add https://github.com/RefractSystems/virtmcu --skill frontend-ui-engineering-refractsystems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides clear engineering guidance to produce user-facing interfaces that are accessible, performant, and visually polished, avoiding generic AI-generated aesthetics and ad-hoc styling that lead to inconsistent or inaccessible UI.

Core Features & Use Cases

  • Component architecture & patterns: Promotes colocated files, composition over configuration, focused single-responsibility components, and separation of data fetching from presentation.
  • Design system and visual quality: Enforces spacing and typography scales, semantic color tokens, and design-system adherence to prevent inconsistent visuals and "AI aesthetic" shortcuts.
  • Accessibility & reliability: Covers WCAG 2.1 AA requirements, keyboard navigation, ARIA labeling, focus management, meaningful empty/error states, responsive breakpoints, and loading/optimistic update patterns for robust UX.
  • Verification: Includes a clear checklist for rendering without console errors, keyboard accessibility, responsive testing across breakpoints, and automated accessibility audits.

Quick Start

Create a TaskList component that follows the design system, uses semantic markup, supports keyboard navigation and ARIA labels, handles loading/error/empty states, and passes responsive and accessibility checks.

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 web components that meet WCAG 2.1 AA standards?▼

Build accessible web components by applying semantic HTML markup, ARIA labeling, and keyboard navigation support to satisfy WCAG 2.1 AA standards. This approach ensures frontend interfaces are navigable and reliable for all users across various presentation states.

What is the best way to prevent inconsistent UI styling and generic AI aesthetics in frontend projects?▼

Prevent inconsistent UI styling and generic AI aesthetics by enforcing design system adherence through spacing and typography scales alongside semantic color tokens. This visual quality control replaces ad-hoc styling with consistent, production-ready user interfaces.

How do I implement responsive breakpoints and state management for frontend user interfaces?▼

Implement responsive breakpoints and state management by handling loading, error, and empty states alongside optimistic update patterns. This robust UX architecture ensures frontend user interfaces maintain data fetching separation from presentation logic across all devices.

How do I verify keyboard navigation and accessibility fixes in a frontend component?▼

Verify keyboard navigation and accessibility fixes by running automated accessibility audits and testing rendering without console errors. This verification checklist confirms responsive breakpoints function correctly and frontend components meet compliance requirements.

Does this frontend UI engineering approach work for component architecture and layout implementation?▼

Yes, frontend UI engineering applies to component architecture and layout implementation by promoting colocated files, composition over configuration, and focused single-responsibility components. This structure cleanly separates data fetching from presentation logic.

When do I need to apply design system tokens and semantic markup for end-user facing UI polishing?▼

Apply design system tokens and semantic markup for end-user facing UI polishing when visual consistency and accessibility are required across web frontend projects. This prevents ad-hoc styling and ensures interfaces pass automated accessibility audits.

Related Skills

Explore More Design & Creative Skills→
murphytruemanmurphytrueman
155

token-audit

Audits design system token definitions for naming violations and missing semantic tiers.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
zinohomezinohome
1

state-ux-flow-builder

Standardize loading, error, and empty states for data fetching with state machines.

Community
Intermediate
santanapolsantanapol

frontend-ui-engineering

Build accessible, responsive frontend interfaces compliant with WCAG 2.1 AA and design systems.

Community
Advanced