skills.rest
tgmarinho
tgmarinhoCOMMUNITY
Explore all skills by this author →
Website𝕏@tgmarinhoGitHub

frontend-ui-engineering

Guide frontend UI component creation covering architecture, accessibility, and responsive design standards.

Updated Jul 2, 2026
Search Tags:#accessibility#state management#responsive design#design system#UI development#component architecture
One-click install
npx skills add https://github.com/tgmarinho/agent-super-powers-matt-pocock-skills-comparasions --skill frontend-ui-engineering-tgmarinho
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/tgmarinho/agent-super-powers-matt-pocock-skills-comparasions/tree/main/upstream-snapshots/agent-skills/skills/frontend-ui-engineering
Command: npx skills add https://github.com/tgmarinho/agent-super-powers-matt-pocock-skills-comparasions --skill frontend-ui-engineering-tgmarinho

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill streamlines the process of creating and modifying user interfaces, ensuring they are accessible, performant, and visually polished.

Core Features & Use Cases

  • Component Architecture: Provides guidelines for building maintainable and reusable UI components.
  • State Management: Offers advice on choosing the right state management approach for different scenarios.
  • Design System Adherence: Ensures UI components follow a consistent design system, avoiding the "AI aesthetic."
  • Accessibility: Ensures UI components meet WCAG 2.1 AA standards for accessibility.
  • Responsive Design: Promotes mobile-first design and testing at various breakpoints.
  • Loading and Transitions: Suggests best practices for handling loading states and transitions.
  • Use Case: Ideal for developers looking to implement a high-quality UI with minimal effort, focusing on accessibility and maintainability.

Quick Start

Run the frontend-ui-engineering skill to build a new UI component following the provided 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 accessibility and responsive design standards?▼

To build production-quality UI components, you need guidelines for component architecture, state management, and accessibility. This Skill ensures adherence to WCAG 2.1 AA standards and mobile-first responsive design while avoiding the inconsistent AI aesthetic.

What's the best way to maintain a consistent design system when generating UI components?▼

The best way to maintain a consistent design system is by enforcing strict design system adherence during component creation. This Skill guides you through architectural best practices to ensure UI components remain visually polished and follow your predefined system.

How do I choose the right state management approach for my UI component architecture?▼

Choosing the right state management approach requires evaluating your specific UI scenarios. This Skill offers advice on selecting appropriate state management strategies while ensuring your component architecture remains maintainable and reusable.

Can I use this to handle loading states and transitions for accessible web components?▼

Yes, you can handle loading states and transitions for accessible web components. This Skill suggests best practices for managing loading states and transitions while ensuring your UI components meet WCAG 2.1 AA accessibility standards.

Do I need an existing design system before building UI components with this approach?▼

Yes, an existing design system is required. This approach requires adherence to a consistent design system and a solid understanding of UI component architecture principles to effectively streamline the creation of production-quality interfaces.

Related Skills

Explore More Software Engineering Skills→
hulusi-tunchulusi-tunc
3

naming-convention

Establish naming conventions for design elements, components, and tokens.

Community
Intermediate
jonnabiojonnabio
6

accessibility-audit

Audits frontend interfaces for WCAP 2.1 AA compliance and accessibility best practices.

Community
Intermediate
syanixsyanix

frontend-dev-guidelines

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

Community
Intermediate
suhwansuhwan

phase-3-mockup

Generate HTML/CSS/JS mockups with a Next.js conversion plan.

Community
Advanced