skills.rest
harishgovardhandamodar
harishgovardhandamodarCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

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
One-click install
npx skills add https://github.com/harishgovardhandamodar/adversarialStudy --skill frontend-ui-engineering-harishgovardhandamodar
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
mrodrigues1mrodrigues1

visual-design-foundations

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

Community
Intermediate
solrac97grsolrac97gr
2

new-component

Generate React components with TypeScript, Tailwind CSS, unit tests, and Storybook stories.

Community
Intermediate
giosuetedeschi-specgiosuetedeschi-spec

react-ui-patterns

Standardize loading, error, and empty states in React components.

Community
Intermediate
Chenm4Chenm4

react

Create React .tsx components with Lobehub UI and routing patterns.

Community
Basic