skills.rest
pyoclaw
pyoclawCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Build accessible, responsive React components with design system tokens and tests.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures user-facing interfaces are built to production standards rather than generic AI-generated output by enforcing design system consistency, accessibility, and interaction quality so UIs are usable, performant, and review-ready.

Core Features & Use Cases

  • Component architecture & colocated files: Promote focused, testable components with colocated tests, types, and hooks to reduce complexity and improve maintainability.
  • Design system adherence & visual quality: Replace AI-default styling with project tokens, spacing scale, and typography hierarchy to preserve brand and visual hierarchy.
  • Accessibility and responsiveness: Enforce WCAG 2.1 AA practices, keyboard navigation, ARIA labeling, and mobile-first responsive layouts across common breakpoints.
  • Verification & testing: Include loading, error, and empty states, keyboard/ screen-reader checks, and component-level tests before review and merge.

Quick Start

Use the frontend-ui-engineering skill to convert a rough component mock into an accessible, responsive React component that follows the project's design system and includes tests and edge-case states.

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 follow a design system and meet accessibility standards?▼

Build accessible React components by applying design system tokens for spacing and typography, enforcing WCAG 2.1 AA practices, and ensuring keyboard navigation and ARIA labeling for screen reader compatibility.

What's the best way to structure frontend component architecture for maintainability?▼

Structure frontend component architecture with focused, testable components using colocated files for tests, types, and hooks to reduce complexity and improve maintainability across your web application project.

How do I ensure responsive design works across common mobile and desktop breakpoints?▼

Ensure responsive design works by applying mobile-first layout strategies and testing visual behavior across common breakpoints to guarantee interfaces adapt properly to various screen sizes.

Why does my AI-generated UI lack visual polish and break design system consistency?▼

AI-generated UI lacks polish because it uses default styling instead of project design tokens, spacing scales, and typography hierarchy, which this approach replaces to preserve brand consistency and visual structure.

Do I need to include loading, error, and empty states for production-ready frontend components?▼

Yes, production-ready frontend components require loading, error, and empty states alongside keyboard and screen-reader checks, plus component-level tests, before code review and merge.

Can I use this approach for modifying state management and interactivity in existing web applications?▼

Yes, use this approach when implementing or modifying frontend components, layouts, state management, interactivity, or responsive behavior in existing web applications to meet production-quality standards.

Related Skills

Explore More Software Engineering Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
korchard333korchard333
46

accessibility-ux

Apply WCAG 2.2 AA accessibility patterns to Power Platform UI components.

Community
Advanced
BRANDNEWSHVTBRANDNEWSHVT

accessibility-audit

Identify and fix WCAG 2.1 AA accessibility gaps in frontend user interfaces.

Official
Advanced
cy-walicy-wali

design-handoff

Generate developer handoff documentation from a Figma URL or design description.

Community
Advanced