skills.rest
logo-solutions
logo-solutionsOFFICIAL
Explore all skills by this author →
GitHub

frontend-ui-engineering

Implement accessible, responsive UI components with WCAG 2.1 AA support.

Updated Apr 2, 2026
Search Tags:#ui#performance#accessibility#frontend#components#responsive#design-system
One-click install
npx skills add https://github.com/logo-solutions/NAS-logo --skill frontend-ui-engineering-logo-solutions
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/logo-solutions/NAS-logo/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/logo-solutions/NAS-logo --skill frontend-ui-engineering-logo-solutions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many UIs end up looking like generic, AI-generated interfaces that ignore design systems, accessibility, and real-world interaction needs; this Skill guides engineers to build interfaces that are polished, consistent, performant, and usable by everyone.

Core Features & Use Cases

  • Design system adherence: Enforce consistent spacing, typography, color tokens, and corner radii to match the project's visual language.
  • Accessibility-first patterns: Implement keyboard navigation, ARIA labeling, focus management, and meaningful empty/error states to meet WCAG 2.1 AA.
  • Component architecture & state: Recommend colocated components, clear separation of data fetching from presentation, and appropriate state management strategies for reliability and maintainability.
  • Responsive and performant UI: Mobile-first layouts, defined breakpoints, skeleton loading states, and optimistic updates for perceived speed.
  • Use case: Build a TaskList component that is responsive, testable, keyboard-accessible, visually aligned with the design system, and handles loading, empty, and error states.

Quick Start

Create a responsive TaskList component that follows the project's design system, includes keyboard accessibility and ARIA labels, separates data fetching from presentation, and handles loading, empty, and error states.

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 a responsive component that meets WCAG 2.1 AA accessibility requirements?▼

To build responsive components meeting WCAG 2.1 AA, implement mobile-first layouts with defined breakpoints, add ARIA labels, ensure keyboard navigation, and manage focus properly for screen reader support.

What's the best way to handle loading, empty, and error states in a UI component?▼

The best way to handle loading, empty, and error states is by using skeleton loading states for perceived performance and implementing meaningful empty and error UIs that adhere to your design system's visual language.

How do I separate data fetching from presentation logic in frontend components?▼

Separate data fetching from presentation by colocating components with a clear architectural boundary, using appropriate state management strategies to ensure maintainability and reliable UI rendering.

How do I ensure my user interface follows an existing design system?▼

Ensure design system adherence by enforcing consistent spacing, typography, color tokens, and corner radii during implementation, aligning all user-facing interfaces with the project's established visual language.

Can I use this approach for optimizing frontend performance and perceived speed?▼

Yes, you can optimize frontend performance by applying mobile-first layouts, using skeleton loading states, and implementing optimistic updates to significantly improve the perceived speed of user interactions.

Why do my AI-generated interfaces lack visual consistency and accessibility?▼

AI-generated interfaces often lack consistency because they ignore design system tokens, accessibility patterns like keyboard navigation, and real-world interaction needs required for production-quality UIs.

Related Skills

Explore More Software Engineering Skills→
ProfPowellProfPowell
1

open-props

Import modular CSS custom properties for design systems.

Community
Basic
tan-yong-shengtan-yong-sheng
4

ui-visual-validator

Analyze screenshots for visual regressions, design system compliance, and accessibility.

Community
Advanced
jcsoftdevjcsoftdev

presentational-container-pattern

Separate data fetching and business logic from UI rendering in React components.

Community
Intermediate
ClutchEngineeringClutchEngineering
14

slipstream

Compose static HTML sites with Slipstream and Tailwind CSS.

Official
Advanced