skills.rest
hgflima
hgflimaCOMMUNITY
Explore all skills by this author โ†’
GitHub

frontend-ui-engineering

Create accessible, responsive UI components adhering to design systems.

1|1|Updated Jul 4, 2026
Search Tags:#accessibility#state management#responsive design#UI development#component architecture
One-click install
npx skills add https://github.com/hgflima/loopy --skill frontend-ui-engineering-hgflima
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/hgflima/loopy/tree/main/.claude/skills/frontend-ui-engineering
Command: npx skills add https://github.com/hgflima/loopy --skill frontend-ui-engineering-hgflima

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating professional, accessible, and performant user interfaces for web applications, reducing the time and complexity of UI development.

Core Features & Use Cases

  • Component Architecture: Offers guidelines for structuring UI components with best practices in composition, focus management, and state management.
  • Design System Adherence: Ensures UI components adhere to a project's design system, avoiding the 'AI aesthetic' and maintaining brand consistency.
  • Accessibility: Implements keyboard navigation, ARIA labels, and meaningful empty/error states to meet WCAG 2.1 AA standards.
  • Responsive Design: Provides mobile-first responsive design strategies for various breakpoints.
  • Loading and Transitions: Includes techniques for skeleton loading and optimistic updates to enhance user experience.
  • Use Case: Ideal for front-end developers building or modifying UI components, implementing layouts, and managing state in web applications.

Quick Start

Use the frontend-ui-engineering skill to build a responsive task list component.

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 UI components that meet WCAG 2.1 AA standards?โ–ผ

To build accessible UI components, this Skill guides you in implementing keyboard navigation, ARIA labels, and meaningful empty or error states to meet WCAG 2. AA standards. It automates these practices during development.

What is the best way to structure UI component architecture for state management?โ–ผ

The best way to structure UI component architecture is following guidelines for composition, focus management, and state management. This ensures your web application components remain scalable and maintainable.

How do I ensure my UI development adheres to an existing design system?โ–ผ

To ensure UI development adheres to a design system, this Skill enforces brand consistency and avoids the generic 'AI aesthetic'. It automates component creation by aligning with your project's specific design tokens and rules.

Can I use this to implement mobile-first responsive design for web applications?โ–ผ

Yes, you can use this to implement mobile-first responsive design. It provides specific strategies for handling various breakpoints, ensuring your UI components adapt correctly across different screen sizes.

How do I add skeleton loading and optimistic updates to UI components?โ–ผ

To add skeleton loading and optimistic updates, this Skill includes built-in techniques for managing transitions and loading states. This enhances user experience by providing immediate visual feedback during data fetching operations.

Does this Skill work for building production-quality web application UIs without external dependencies?โ–ผ

Yes, this Skill works for building production-quality web application UIs without external dependencies. It operates independently using internal scripts and references to guide the creation of professional interfaces and layouts.

Related Skills

Explore More Software Engineering Skillsโ†’
projectmilujuprojectmiluju

ui

Define UI design system tokens and component specifications for web products.

Community
Intermediate
AarononthewebAaronontheweb
1.1k

playwright-blazor-testing

Automate Blazor UI testing with Playwright for navigation, authentication, and SignalR updates.

Community
Advanced
tchiphuongtchiphuong

heroui-v3

Create HeroUI v3 UI components with React 19 and Tailwind CSS v4.

Community
Intermediate
pax-kpax-k
3

architecture-boundary-enforcer

Enforce and document architecture boundaries using dependency-cruiser, ESLint, import-linter, and custom scripts.

Community
Advanced