skills.rest
richardnguyen0715
richardnguyen0715COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Guide frontend developers in building accessible, design-system-aligned UI components.

Updated May 20, 2026
Search Tags:#accessibility#state management#design systems#UI development#component design
One-click install
npx skills add https://github.com/richardnguyen0715/ai-chatting-app --skill frontend-ui-engineering-richardnguyen0715
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/richardnguyen0715/ai-chatting-app/tree/main/.github/skills/frontend-ui-engineering
Command: npx skills add https://github.com/richardnguyen0715/ai-chatting-app --skill frontend-ui-engineering-richardnguyen0715

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses the challenges of creating user interfaces that are not only visually appealing but also accessible, performant, and aligned with established design systems.

Core Features & Use Cases

  • Component Architecture: Provides guidelines for component design, including file structure, patterns, and separation of concerns.
  • State Management: Offers best practices for managing state, including local state, lifted state, context, URL state, and global store.
  • Design System Adherence: Ensures that UI components are consistent with the project's design system, avoiding the 'AI aesthetic'.
  • Accessibility: Focuses on meeting WCAG 2.1 AA standards for keyboard navigation, ARIA labels, focus management, and meaningful empty/error states.
  • Responsive Design: Promotes mobile-first design with responsive breakpoints for testing at various screen sizes.
  • Loading and Transitions: Suggests best practices for skeleton loading and optimistic updates for perceived speed.
  • See Also: Links to detailed accessibility requirements and testing tools.

Quick Start

Run the frontend-ui-engineering skill to review a component's accessibility and responsiveness.

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

To build accessible UI components meeting WCAG 2.1 AA standards, ensure proper keyboard navigation, ARIA labels, focus management, and meaningful empty or error states. This guarantees interfaces are usable while maintaining design system adherence.

What is the best way to manage state in frontend UI development?▼

The best way to manage state in frontend UI development involves using local state, lifted state, context, URL state, and global stores. Proper state management ensures components remain modular and maintainable.

How do I avoid the AI aesthetic when generating UI components?▼

To avoid the AI aesthetic in UI components, strictly adhere to established design systems. Enforcing design system adherence ensures visual consistency and prevents generic looking interfaces.

What are the best practices for responsive design and loading states in component design?▼

Best practices for responsive design and loading states involve using mobile-first design with responsive breakpoints and implementing skeleton loading or optimistic updates. This ensures interfaces perform well across screen sizes.

Do I need specific frontend frameworks to use this UI engineering guidance?▼

You do not need specific frontend frameworks for this UI engineering guidance, but you do need knowledge of HTML, CSS, and JavaScript. The guidelines focus on component architecture independent of specific frameworks.

How do I structure frontend components for proper separation of concerns?▼

To structure frontend components for separation of concerns, follow guidelines on component architecture including file structure and patterns. This ensures UI components remain modular and maintainable.

Related Skills

Explore More Software Engineering Skills→
abeldotamabeldotam
13

tailwind-design-system

Establish a CSS-first Tailwind CSS v4 design system with @theme tokens and CVA components.

Community
Advanced
ils15ils15
10

web-ui-analysis

Analyze web interfaces for WCAG 2.1 compliance and Core Web Vitals.

Community
Advanced
grvpanchalgrvpanchal
1

state-state

Guide JavaScript state storage choices across local, lifted, global, server, and URL locations.

Community
Intermediate
sigridjinethsigridjineth
20

frontend-ui-ux

Create reusable UI components with responsive layouts and accessibility compliance.

Community
Intermediate