skills.rest
Rosetears520
Rosetears520COMMUNITY
Explore all skills by this author →
GitHub

frontend-ui-engineering

Build accessible front-end components with design-system adherence and ARIA correctness.

2|Updated May 3, 2026
Search Tags:#accessibility#state management#frontend#responsive design#design system#ui engineering#ux quality
One-click install
npx skills add https://github.com/Rosetears520/aili-workflows --skill frontend-ui-engineering-rosetears520
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/Rosetears520/aili-workflows/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/Rosetears520/aili-workflows --skill frontend-ui-engineering-rosetears520

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents shipping user interfaces that look generic, feel unpolished, or fail accessibility and usability expectations by enforcing production UI standards early.

Core Features & Use Cases

  • Production-ready UI architecture: Establishes practical component structure (colocation, container vs presentation, composition over configuration) to keep code maintainable and reviewable.
  • State management guidance: Helps choose the simplest state approach (local, lifted, context, URL, server state, or global store) and avoids unnecessary complexity.
  • Design system + “avoid AI aesthetic” guardrails: Enforces spacing/typography/color rules and blocks common template-like UI patterns (generic hero sections, placeholder-driven layouts, excessive gradients/shadows).
  • Accessibility (WCAG 2.1 AA) requirements: Covers keyboard navigation, ARIA labeling, focus management, and meaningful empty/error/loading states.

Quick Start

Use the frontend-ui-engineering skill to review and refactor your UI component so it matches your design system, has correct accessibility behavior, and includes proper loading/empty/error handling.

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 user interfaces that meet WCAG 2.1 AA requirements?▼

Build accessible user interfaces by enforcing keyboard navigation, ARIA labeling, focus management, and meaningful empty, loading, and error states to meet WCAG 2.1 AA standards. This prevents shipping unpolished UIs that fail usability expectations.

What's the best way to manage frontend state without adding unnecessary complexity?▼

Manage frontend state by choosing the simplest approach: local, lifted, context, URL, server state, or a global store. This avoids unnecessary complexity and keeps your user-facing application maintainable during UI architecture implementation.

How do I avoid generic AI aesthetic styling patterns in my design system?▼

Avoid generic AI aesthetic styling patterns by applying design-system guardrails that block template-like UI patterns. Enforce strict spacing, typography, and color rules to prevent placeholder-driven layouts and excessive gradients or shadows.

How do I refactor UI components to match a production design system?▼

Refactor UI components by establishing practical UI architecture: colocation, container versus presentation separation, and composition over configuration. This ensures your components match your design system and remain reviewable and maintainable.

When do I need to test responsive layouts for frontend UI engineering?▼

Test responsive layouts whenever you implement or modify user-facing applications to ensure production-quality UIs. Responsive layout testing verifies that your components adapt correctly and avoid broken visual states across different devices.

Does frontend-ui-engineering support adding interactivity and state to existing layouts?▼

Frontend-ui-engineering supports modifying layouts, adding interactivity and state, and fixing UX or visual issues in user-facing applications. It requires keyboard navigation support and ARIA or focus correctness for all interactive components.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

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

Community
Basic
svssdevasvssdeva
1

frontend-ui-engineering

Build accessible frontend UIs with WCAG 2.1 AA compliance and design-system adherence.

Community
Advanced
syanixsyanix

frontend-dev-guidelines

Provide frontend development patterns for UI components, pages, and forms.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic