skills.rest
japurcell
japurcellCOMMUNITY
Explore all skills by this author →
GitHub

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

Related Skills

Explore More Software Engineering Skills→
hulusi-tunchulusi-tunc
3

naming-convention

Establish naming conventions for design elements, components, and tokens.

Community
Intermediate
gelsonsimoesgelsonsimoes

webapp-testing

Automate web application testing with Playwright to verify end-to-end functionality.

Community
Intermediate
Higashi-KotaHigashi-Kota

ui-component

Build accessible React UI components with design tokens and ARIA patterns.

Community
Advanced
marjan-ahmedmarjan-ahmed

frontend-designer

Provides guidance for building responsive Angular apps with lazy loading and RxJS-powered data access.

Community
Basic