frontend-ui-engineering

Name: frontend-ui-engineering
Availability: InStock
Author: harishgovardhandamodar

Build accessible React and TypeScript components with design system adherence.

Updated Apr 8, 2026

Search Tags:#ui #accessibility #frontend #react #responsive #design-system #component-architecture

Ready to run

npx skills add https://github.com/harishgovardhandamodar/adversarialStudy --skill frontend-ui-engineering-harishgovardhandamodar

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/harishgovardhandamodar/adversarialStudy/tree/main/Distributionally-Adversarial-Attack/.agents/skills/frontend-ui-engineering
Command: npx skills add https://github.com/harishgovardhandamodar/adversarialStudy --skill frontend-ui-engineering-harishgovardhandamodar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the uncertainty and low-quality output that comes from AI-generated interfaces by guiding engineers to build production-ready, accessible, and design-system-compliant user interfaces that behave and look like hand-crafted components.

Core Features & Use Cases

Design system adherence: Enforce spacing scales, color tokens, typography hierarchy, and consistent border radii to match project standards.
Accessibility & interaction: Ensure keyboard navigation, ARIA labeling, focus management, and meaningful empty/error states for WCAG 2.1 AA compliance.
Component architecture & patterns: Promote composition over heavy configuration, separate data fetching from presentation, and provide responsive, testable components for React/TypeScript projects.
Use Case: Build a responsive TaskList component that includes loading skeletons, error handling, keyboard interactions, and unit tests while matching the project's design tokens.

Quick Start

Create a production-quality, accessible React TaskList component using the project's design system, include keyboard navigation, loading/error/empty states, and add unit tests and storybook entries.

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

Build accessible React components by implementing keyboard navigation, ARIA labeling, and focus management. This ensures WCAG 2.1 AA compliance for production-grade user interfaces, covering meaningful empty, error, and loading states.

How do I enforce design system tokens in a React and TypeScript project?▼

Enforce design system tokens in React and TypeScript by applying consistent spacing scales, color tokens, typography hierarchy, and border radii. This approach ensures generated components match project standards and look hand-crafted.

What is the best way to separate data fetching from presentation in React?▼

The best way to separate data fetching from presentation in React is using composition over heavy configuration. This pattern provides responsive, testable components while isolating UI rendering from data logic.

Does this approach support responsive layouts with loading and error states?▼

Yes, this approach supports responsive layouts by testing breakpoints and explicitly handling loading, error, and empty states. It ensures robust component behavior across different screen sizes and data fetching conditions.

How do I add unit tests and stories for a production-grade UI component?▼

Add unit tests and stories by building testable component architectures using React and TypeScript. Include loading skeletons, error handling, and keyboard interactions to verify accessibility and design system compliance.