skills.rest
akbarhlubis
akbarhlubisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-ui-engineering

Develop accessible, responsive user interfaces adhering to design systems.

Updated Aug 27, 2026
Search Tags:#accessibility#responsive design#design systems#UI development#component architecture
One-click install
npx skills add https://github.com/akbarhlubis/agent-skills --skill frontend-ui-engineering-akbarhlubis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/akbarhlubis/agent-skills/tree/main/frontend-ui-engineering
Command: npx skills add https://github.com/akbarhlubis/agent-skills --skill frontend-ui-engineering-akbarhlubis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating high-quality, production-ready user interfaces that adhere to design systems and accessibility standards, ensuring a polished and accessible user experience.

Core Features & Use Cases

  • Component Architecture: Provides a structured approach to building UI components with best practices for composition, focus management, and state management.
  • Design System Adherence: Encourages the use of consistent spacing, typography, and color to avoid the "AI aesthetic" and ensure a professional look.
  • Accessibility: Ensures that every component meets WCAG 2.1 AA standards, including keyboard navigation, ARIA labels, and meaningful empty states.
  • Responsive Design: Promotes mobile-first design and testing at various breakpoints for a seamless user experience across devices.
  • Loading and Transitions: Offers guidance on implementing skeleton loading and optimistic updates for perceived speed and performance.
  • Use Case: Ideal for developers looking to create or modify user-facing interfaces that require a high level of design and accessibility compliance.

Quick Start

Use the frontend-ui-engineering skill to build a new UI component following the established design system and accessibility guidelines.

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 production-quality UI components that meet WCAG 2.1 AA accessibility standards?▼

To build production-quality UI components meeting WCAG 2.1 AA accessibility standards, implement structured component architecture with proper focus management, keyboard navigation, and ARIA labels. This ensures a polished, accessible user experience across all interactive elements.

What's the best way to avoid the AI aesthetic when generating user interfaces?▼

Avoid the AI aesthetic in user interfaces by enforcing strict design system adherence with consistent spacing, typography, and color. Coordinating these design principles ensures a professional look rather than a generic, auto-generated appearance.

How do I implement responsive design and loading states for mobile-first web applications?▼

Implement responsive design for mobile-first web applications by testing at various breakpoints and using skeleton loading for transitions. This approach ensures seamless user experiences across devices while optimizing perceived speed and performance.

Does this approach to UI development support complex state management and component composition?▼

Yes, this UI development approach fully supports complex state management and component composition. It provides structured best practices for building UI components, coordinating architecture to ensure a polished and accessible interface.

When should I use a structured design system approach for front-end development?▼

Use a structured design system approach for front-end development when creating or modifying user-facing interfaces that require strict design and accessibility compliance. It ensures consistent spacing, typography, and color throughout the application.

Related Skills

Explore More Software Engineering Skills→
mrodrigues1mrodrigues1

visual-design-foundations

Define visual design systems using typography, color, spacing, and iconography.

Community
Intermediate
manutejmanutej
1

playwright-visual-testing

Automate browser testing and visual regression analysis with Playwright.

Community
Advanced
dylantarredylantarre
38

compound-components

Build accessible React UI primitives with compound component patterns.

Community
Advanced
ConnectiveTCSConnectiveTCS

tailwindcss

Style JARVIS UI components with Tailwind CSS utility classes and responsive theming.

Community
Intermediate