skills.rest
korwlik23
korwlik23COMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ux-engineering

Fix frontend UI and UX defects with responsive layout, accessibility, and state handling.

Updated May 6, 2026
Search Tags:#performance#accessibility#responsive design#core web vitals#component architecture#form validation#frontend ux
One-click install
npx skills add https://github.com/korwlik23/skills --skill frontend-ux-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ux-engineering
Source: https://github.com/korwlik23/skills/tree/main/v1/frontend-ux-engineering
Command: npx skills add https://github.com/korwlik23/skills --skill frontend-ux-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It resolves frontend UI breakage and UX regressions by improving layout correctness, accessibility, state handling, and performance so the application feels reliable across devices.

Core Features & Use Cases

  • Responsive, layout-safe fixes: identifies viewport-specific issues, prevents overflow/overlap, and validates breakpoints.
  • Accessibility and UX hardening: enforces semantic HTML, keyboard navigation, focus management, contrast, and proper error announcements.
  • Production-grade UI states: ensures loading, empty, error, disabled, and permission-denied states are handled with clear user feedback.
  • Performance and Core Web Vitals mindset: targets LCP/INP/CLS principles via image optimization, bundle discipline, and reduced layout shift.

Quick Start

Use the skill to review and repair the UI when you see a broken layout on mobile, missing accessibility labels, or inconsistent interactive behavior.

Frequently Asked Questions about frontend-ux-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix responsive layout overflow and overlap issues across viewport breakpoints?▼

Fix responsive layout overflow by identifying viewport-specific issues and validating breakpoints to prevent visual overlap. This ensures your layout remains structurally correct and adapts safely across different mobile and desktop screen sizes.

How do I enforce accessibility requirements for keyboard navigation and focus management?▼

Enforce accessibility requirements by applying semantic HTML, checking keyboard navigation, and managing focus states. This hardens your frontend UX by ensuring proper contrast, correct focus order, and clear error announcements for screen readers.

What is the best way to handle missing frontend UI states like empty, error, and loading feedback?▼

Handling missing frontend UI states requires implementing clear user feedback for loading, empty, error, disabled, and permission-denied scenarios. This ensures your web application maintains complete user-facing state handling and feels reliable during interactions.

How do I improve Core Web Vitals performance regressions related to layout shift?▼

Improve Core Web Vitals performance regressions by targeting LCP, INP, and CLS principles through image optimization and bundle discipline. This reduces layout shift and restores reliable, fast-loading interactive experiences for your users.

Does this frontend UX approach work for cleaning up an existing design system component architecture?▼

Yes, this approach works for design system cleanup by enforcing semantic HTML and validating component architecture improvements. It resolves frontend UI breakage and UX regressions without requiring external dependencies or specific framework lock-in.

Why does my form UX fail to announce validation errors to screen readers?▼

Form UX fails to announce validation errors when missing proper accessibility labels and semantic HTML structure. Fix this by enforcing complete user-facing state handling and clear error announcements during frontend component reviews.

Related Skills

Explore More Design & Creative Skills→
ketanswebsiteketanswebsite

ui-ux-design-advisor

Analyze project structure and design system to propose UI/UX design options.

Community
Advanced
racciolyraccioly

performance-profiling

Run Lighthouse audits and analyze Core Web Vitals to identify performance bottlenecks.

Community
Advanced
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
AGMO-IncAGMO-Inc
4

accessibility

Detect WCAG accessibility issues in React/HTML/CSS via static review.

Official
Intermediate