skills.rest
alissonpef
alissonpefCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Build accessible, responsive user interfaces with keyboard navigation and ARIA labeling.

Updated Apr 21, 2026
Search Tags:#ui#accessibility#frontend#react#responsive design#design system
One-click install
npx skills add https://github.com/alissonpef/copilot-agent-skills --skill frontend-ui-engineering-alissonpef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/alissonpef/copilot-agent-skills/tree/main/.github/skills/frontend-ui-engineering
Command: npx skills add https://github.com/alissonpef/copilot-agent-skills --skill frontend-ui-engineering-alissonpef

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build or improve user interfaces that look production-ready instead of generic, with the right structure, interactions, and visual polish from the start.

Core Features & Use Cases

  • Production-quality UI building: Create new components, pages, and responsive layouts that feel consistent with a real design system.
  • Accessibility and interaction quality: Ensure keyboard navigation, ARIA labeling, focus handling, loading states, empty states, and readable hierarchy are all accounted for.
  • Design-system adherence: Avoid common AI-style patterns by using appropriate spacing, typography, color tokens, and composition choices.
  • Use case: When you need to add a task dashboard, checkout flow, or settings panel, this Skill guides the implementation so it is usable, responsive, and visually refined rather than template-like.

Quick Start

Use this Skill to design and implement a production-quality user interface for my feature with strong accessibility, responsive behavior, and polished visual details.

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 with proper keyboard navigation?▼

Accessible React components require semantic HTML structure, ARIA labeling, and focus management. This ensures proper keyboard navigation and screen reader compatibility for production-quality user interfaces.

How do I avoid generic AI aesthetic when creating frontend UI layouts?▼

Avoid generic AI aesthetics by applying design system tokens for spacing, typography, and color. This creates visually refined, production-ready frontend UI layouts instead of template-like results.

What is the best way to implement responsive design and loading states in a UI?▼

The best way to implement responsive design and loading states is to account for viewport behavior and data fetching phases. This ensures the UI remains polished and usable during all interaction states.

Can I use this approach to build a task dashboard with empty states?▼

Yes, you can use this approach to build task dashboards, checkout flows, or settings panels. It guides the implementation of empty states, stateful interactions, and readable hierarchy.

Does this UI engineering method require a pre-existing design system?▼

No pre-existing design system dependency is required. The method applies design-system-driven principles using appropriate spacing, typography, and color tokens to ensure consistent, polished visual details.

Related Skills

Explore More Software Engineering Skills→
bdfinstbdfinst
18

new-component

Create React components with PropTypes, default props, and data-testid attributes.

Community
Intermediate
Hack23Hack23
235

playwright-ui-testing

Automate cross-browser UI tests with Playwright for the CIA platform.

Official
Intermediate
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

react-ui-patterns

Implement React UI patterns for loading states, error handling, and data fetching.

Community
Intermediate
theofernandezztheofernandezz

Accessibility (a11y)

Apply WCAG-compatible patterns and ARIA semantics to web interfaces.

Community
Advanced