addy-frontend-ui-engineering

Build and validate reusable frontend components with accessible, responsive markup.

Updated Mar 19, 2026

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

Ready to run

npx skills add https://github.com/japurcell/skills --skill addy-frontend-ui-engineering

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: addy-frontend-ui-engineering
Source: https://github.com/japurcell/skills/tree/main/skills/addy-frontend-ui-engineering
Command: npx skills add https://github.com/japurcell/skills --skill addy-frontend-ui-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Builds production-quality user interfaces that are accessible, performant, and visually polished, aligning with design systems and engineering best practices.

Core Features & Use Cases

Component-driven architecture with colocated files (src/components/*) for maintainable UI.
Accessibility-first patterns, responsive design, and performance-conscious patterns.
Real-world workflows include creating new components, implementing layouts, and refining state management across apps.

Quick Start

Start by outlining a new UI component using a design-system-friendly structure and implement it with accessible markup and responsive behavior.

Frequently Asked Questions about addy-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 align with a design system?▼

Build accessible React components by using a component-driven architecture with colocated files under src/components/*, ensuring accessible markup, responsive behavior, and design-system adherence for maintainable UI. This approach streamlines refining and validating reusable components across responsive web apps.

What's the best way to structure a React frontend for maintainable UI components?▼

Structure a React frontend for maintainable UI components using component-driven architecture with colocated files, applying accessibility-first patterns, responsive design, and performance-conscious patterns to streamline production-quality interfaces and engineering best practices.

Does this approach support validating accessibility standards in frontend UI engineering?▼

Validating accessibility standards in frontend UI engineering is supported directly, applying accessibility-first patterns and testing guidance to ensure production-ready, responsive web apps meet required compliance and performance benchmarks.

How do I implement responsive design and state management across web apps?▼

Implement responsive design and state management by refining reusable components with accessibility-first patterns and performance-conscious workflows, validating structure and patterns to deliver visually polished, production-quality interfaces across responsive web apps.

When should I use component-driven architecture for frontend UI engineering?▼

Use component-driven architecture for frontend UI engineering when building, refining, and validating reusable components across responsive web apps, ensuring design-system adherence, accessibility standards, and performance-conscious patterns for production-quality user interfaces.

Why does frontend UI engineering require colocated files for component architecture?▼

Frontend UI engineering requires colocated files for component architecture to maintain production-quality interfaces, streamlining the creation and refinement of reusable components while enforcing accessibility standards and design-system adherence across responsive web apps.