skills.rest
DagimAlemayehuu
DagimAlemayehuuCOMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Builds accessible, responsive, production-quality user interfaces following design system standards.

Updated Jul 19, 2026
Search Tags:#accessibility#frontend#react#responsive design#design system#wcag#ui components
One-click install
npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill frontend-ui-engineering-dagimalemayehuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/DagimAlemayehuu/AgenticEngineering/tree/main/agentic-engineering/core/dependencies/design/frontend-ui-engineering
Command: npx skills add https://github.com/DagimAlemayehuu/AgenticEngineering --skill frontend-ui-engineering-dagimalemayehuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? AI-generated UI often looks generic, ignores accessibility requirements, and breaks on different screen sizes. This Skill provides concrete engineering standards for building interfaces that meet WCAG 2.1 AA accessibility, follow real design systems, and avoid the recognizable "AI aesthetic" of purple gradients and stock card grids. ## Core Features & Use Cases - Component Architecture Patterns: Enforces composition over configuration, colocated file structures, and separation of data fetching from presentation in React/TypeScript components. - Accessibility Compliance: Provides keyboard navigation, ARIA labeling, focus management, and contrast requirements meeting WCAG 2.1 AA standards. - Responsive & State Design: Covers mobile-first breakpoints (320px to 1440px), state management selection (useState through Zustand/Redux), skeleton loading, and optimistic updates. - Use Case: When asked to build a task management page, the Skill guides creation of composable components with proper empty/error/loading states, keyboard-accessible interactions, semantic color tokens, and layouts tested across all breakpoints. ## Quick Start Use the frontend-ui-engineering skill to build an accessible, responsive task list page that follows our design system.

Frequently Asked Questions about frontend-ui-engineering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make React components accessible for keyboard users?▼

Use native interactive elements like <button> instead of <div> with onClick, since they are focusable by default. If a custom element is unavoidable, add role="button", tabIndex={0}, and handle Enter and Space key events explicitly.

How to choose between useState, Context, and Zustand for state management?▼

Use useState for component-specific UI state, Context for read-heavy values like theme or auth, URL search params for shareable filters, React Query for server data, and Zustand or Redux only for complex app-wide client state.

What breakpoints should responsive layouts be tested at?▼

Test at 320px, 768px, 1024px, and 1440px. Design mobile-first with single-column layouts, then expand using responsive utilities like Tailwind's sm: and lg: prefixes for larger screens.

Why does AI-generated UI look generic and how to avoid it?▼

AI defaults to purple gradients, excessive rounding, stock card grids, and oversized padding. Avoid this by using the project's actual color palette, semantic tokens, consistent spacing scale, and content-first layouts instead of templates.

What contrast ratio does WCAG 2.1 AA require for text?▼

WCAG 2.1 AA requires 4.5:1 contrast for normal text and 3:1 for large text. Never rely on color alone to convey state; combine it with icons, text, or patterns.

When should a component be split into smaller components?▼

Split components exceeding roughly 200 lines, and separate data fetching containers from presentational components. Avoid prop drilling deeper than three levels by introducing context or restructuring the tree.

Related Skills

Explore More Software Engineering Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
HouseGarofaloHouseGarofalo
3

cypress

Automate end-to-end and component testing for web applications with Cypress.

Official
Advanced
dinoudondinoudon

accessibility-audit

Audit web applications for WCAG 2.2 compliance across seven accessibility categories.

Community
Advanced
partme-aipartme-ai
610

react-native

Provides comprehensive guidance for developing cross-platform mobile applications with React Native.

Official
Intermediate