frontend-ui-engineering

Develops React UI components and layouts meeting WCAG 2.1 AA accessibility standards.

Updated Jun 29, 2026
One-click install
npx skills add https://github.com/tuanfung/pqt-agent-skills --skill frontend-ui-engineering-tuanfung
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/tuanfung/pqt-agent-skills/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/tuanfung/pqt-agent-skills --skill frontend-ui-engineering-tuanfung

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 user interfaces that look and feel like they were designed by a human expert, ensuring accessibility, performance, and visual appeal.

Core Features & Use Cases

  • Component Development: Build reusable UI components following best practices.
  • Layouts and State Management: Implement responsive layouts and manage state effectively.
  • Accessibility: Ensure components meet WCAG 2.1 AA standards for accessibility.
  • Use Case: For a new project, use this Skill to design and implement a set of UI components that adhere to a design system and are accessible to all users.

Quick Start

Start by creating a new component for your UI 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 React components that meet WCAG 2.1 AA accessibility standards?

To build accessible React components meeting WCAG 2.1 AA standards, develop reusable UI elements using component composition and established accessibility best practices. This approach ensures user interfaces are accessible to all users while maintaining performance and visual appeal.

What is the best way to develop responsive layouts and manage state in reusable UI components?

The best way to develop responsive layouts and manage state in reusable UI components is applying React best practices and component composition. This method ensures effective state management while building user interfaces that look and feel designed by a human expert.

Can I use this approach to implement a complete design system for a new project?

Yes, you can use this approach to implement a design system for a new project. It focuses on developing user interface components and layouts that adhere to design systems, ensuring visual appeal and accessibility across your front-end development workflow.

How do I ensure my front-end UI development focuses on product realism and performance?

To ensure front-end UI development focuses on product realism and performance, build high-quality user interfaces by applying React best practices. This technique creates human-like UIs while maintaining strict adherence to performance optimization and accessibility standards.

Does this UI development method work for both new projects and existing front-end workflows?

Yes, this UI development method works for both new projects and existing front-end workflows. It applies to front-end development workflows wherever high-quality, human-like UIs are required, allowing you to design and implement components adhering to design systems.