skills.rest
udsy19
udsy19COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Design accessible, responsive web UI components adhering to design systems.

Updated Jun 24, 2026
Search Tags:#accessibility#state management#responsive design#UI development#web design
One-click install
npx skills add https://github.com/udsy19/.claude --skill frontend-ui-engineering-udsy19
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/udsy19/.claude/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/udsy19/.claude --skill frontend-ui-engineering-udsy19

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually appealing, accessible, and performant user interfaces for web applications, ensuring they meet high-quality standards.

Core Features & Use Cases

  • UI Component Development: Provides guidelines for creating UI components following best practices.
  • Responsive Design: Ensures UIs are mobile-first and adapt to various screen sizes.
  • Accessibility: Adheres to WCAG 2.1 AA standards for keyboard navigation, ARIA labels, and focus management.
  • State Management: Offers advice on choosing the right state management approach.
  • Design System Adherence: Promotes the use of design systems for consistency and quality.
  • Use Case: A developer can use this Skill to design and implement a responsive and accessible task list component.

Quick Start

Generate a new UI component for a task list using the frontend-ui-engineering skill.

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

To build accessible web UI components, implement WCAG 2.1 AA standards by ensuring proper keyboard navigation, applying accurate ARIA labeling, and managing focus during user interactions.

What is the best way to implement responsive design for web applications?▼

The best way to implement responsive design is adopting a mobile-first approach that ensures your UI components adapt seamlessly to various screen sizes while maintaining visual appeal and performance.

How do I choose the right state management approach for UI development?▼

Choosing the right state management approach requires evaluating your UI component architecture and interaction complexity to ensure responsive data flow and adherence to your established design system.

Can I use this approach to create a production-quality task list component?▼

Yes, you can use this approach to create a production-quality task list component by following UI development best practices, ensuring accessibility, and adhering to your design system.

Do I need a predefined design system to build accessible user interfaces?▼

While not strictly required, having a predefined design system significantly improves UI consistency and quality, making it easier to enforce accessibility standards and responsive design across components.

Why does keyboard navigation break in my responsive web design?▼

Keyboard navigation often breaks in responsive designs when focus management is neglected during dynamic UI updates, requiring proper ARIA labels and logical tab order to restore accessibility.

Related Skills

Explore More Software Engineering Skills→
bryllimbryllim
99

bryl-minimal-design

Establish semantic design tokens and typography specifications for minimalist web UIs.

Community
Basic
sgcarstrendssgcarstrends
21

e2e-testing

Automate end-to-end UI testing with Playwright across browsers.

Official
Advanced
applewaveapplewave
1

phase-5-design-system

Create platform-agnostic design systems with tokens and base components.

Community
Advanced
Doyajin174Doyajin174
1

accessibility-wcag

Audit frontend codebases for WCAG 2.2 accessibility compliance.

Community
Advanced