frontend-ui-engineering

Build accessible, responsive React-style interfaces with design-system adherence.

Updated May 3, 2026
One-click install
npx skills add https://github.com/kevindree/geehoo-gateway --skill frontend-ui-engineering-kevindree
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/kevindree/geehoo-gateway/tree/main/.github/skills/frontend-ui-engineering
Command: npx skills add https://github.com/kevindree/geehoo-gateway --skill frontend-ui-engineering-kevindree

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers build user interfaces that look and behave like real production software instead of generic AI-generated layouts. It reduces the risk of weak accessibility, inconsistent spacing, missing states, and brittle component structure.

Core Features & Use Cases

  • Production-quality component design: Build focused, composable components with clear separation between presentation and data logic.
  • Accessibility by default: Apply keyboard support, ARIA labeling, focus management, and meaningful empty or error states.
  • Responsive interface implementation: Use mobile-first layouts that scale cleanly across common screen sizes.
  • Design system adherence: Follow the project’s spacing, typography, color, and interaction conventions instead of inventing ad hoc styling.
  • Use case: Ideal for creating a dashboard, form flow, settings page, or interactive list that needs to feel polished and trustworthy in a real product.

Quick Start

Use this skill to redesign the attached interface into a polished, accessible, responsive component set that matches the project’s 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 and responsive frontend components in React?▼

Build accessible and responsive frontend components by using composable component architecture with built-in keyboard support, ARIA labeling, and mobile-first layouts that scale cleanly across common screen sizes.

What is the best way to ensure design system adherence when creating UI components?▼

Ensure design system adherence by following the project’s established spacing, typography, color, and interaction conventions instead of inventing ad hoc styling during component creation.

How do I handle loading and empty states in production-quality user interfaces?▼

Handle loading and empty states in production-quality user interfaces by implementing meaningful fallbacks and clear visual indicators as part of the component's built-in interaction states.

Can I refactor existing layouts into polished, accessible interfaces without breaking visual consistency?▼

Yes, you can refactor existing layouts into polished, accessible interfaces by enforcing strict separation between presentation and data logic while applying the project's design system conventions.

Why do AI-generated layouts often lack keyboard accessibility and focus management?▼

AI-generated layouts often lack keyboard accessibility and focus management because they prioritize generic visual structures over production-ready interaction states, ARIA attributes, and proper focus handling.

Do I need state management libraries to build maintainable frontend UI components?▼

You do not strictly need state management libraries to build maintainable frontend UI components; focusing on clear separation between presentation and data logic ensures focused and composable structures.