building-components

Guide building accessible UI components with semantic HTML and ARIA attributes.

Updated Mar 16, 2026

Search Tags:#accessibility #react #ui components #component design #composable

Ready to run

npx skills add https://github.com/PolGubau/catalogos-macetas --skill building-components-polgubau

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-components
Source: https://github.com/PolGubau/catalogos-macetas/tree/main/.augment/skills/building-components
Command: npx skills add https://github.com/PolGubau/catalogos-macetas --skill building-components-polgubau

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill guides you through building modern, accessible, and composable UI components, providing a framework for creating components that are easy to use, understand, and maintain.

Core Features & Use Cases

Component Building Guidelines: Offers best practices for building UI components, focusing on accessibility, composition, and theming.
Accessibility: Provides comprehensive guidelines for making components accessible to all users, including those with disabilities.
Component Composition: Offers patterns and techniques for composing components to create complex UI structures.
Use Case: If you're developing a web application and need to build custom components that adhere to modern design principles and accessibility standards, this Skill can help you do so efficiently.

Quick Start

Run the skill to start the component building process and follow the provided guidelines.

Frequently Asked Questions about building-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build accessible UI components with proper keyboard navigation and ARIA attributes?▼

To build accessible UI components, use semantic HTML, implement keyboard navigation, and apply ARIA attributes correctly. This skill provides specific guidelines covering these practices to ensure components are usable by everyone, including people with disabilities.

What are the best practices for composable component design in React?▼

Best practices for composable component design involve creating reusable structures that are easy to maintain. This skill offers patterns and techniques for composing components, allowing you to build complex UI structures efficiently while adhering to modern front-end principles.

When do I need semantic HTML for front-end web development?▼

You need semantic HTML for front-end web development when building custom components that must meet modern accessibility standards. It forms the foundation of accessible component design, ensuring screen readers and other assistive technologies can interpret your UI correctly.

Can I use these component building guidelines for an existing web application?▼

Yes, you can use these component building guidelines for an existing web application. They are applicable to front-end development workflows, particularly when you need to build or refactor custom components to adhere to modern design principles and accessibility standards.

How does component composition help create complex UI structures?▼

Component composition helps create complex UI structures by allowing you to combine smaller, independent pieces into larger, reusable elements. This skill provides specific patterns and techniques to compose components effectively, making your overall UI easy to understand and maintain.