Guide HTML attribute usage for accessibility and web design best practices.
npx skills add https://github.com/grvpanchal/elegant --skill ui-attributes
Please help me install this Agent Skill. Skill: ui-attributes Source: https://github.com/grvpanchal/elegant/tree/main/skills/ui-attributes Command: npx skills add https://github.com/grvpanchal/elegant --skill ui-attributes
This Skill addresses common web development challenges related to HTML attributes, ensuring that developers can write accessible and efficient code.
disabled="false" attribute doesn't function as expected or want to add custom metadata to elements without non-standard attributes.Add this skill to your project to enhance your understanding of HTML attribute usage.
High-intent search queries and answers about installing and using this skill.
HTML boolean attributes activate based on their presence in the markup, not their assigned value. Setting disabled="false" still enables the attribute because the browser only checks if the attribute exists. Remove the attribute entirely to disable it.
HTML attributes are defined in the markup and initialize default values, while DOM properties represent the current live values in the JavaScript object model. Attributes remain static after initial parsing, whereas properties update dynamically through user interaction and scripts.
Data-* attributes allow you to store custom metadata directly on HTML elements without using non-standard attributes. Prefix your custom attribute name with data- and access the values through JavaScript using the dataset property or the getAttribute method.
ARIA attributes enhance web accessibility by adding semantic meaning to interactive elements for screen readers. Apply roles, states, and properties directly in the HTML markup to ensure assistive technologies can interpret dynamic content, form inputs, and UI updates correctly.
HTML attributes provide static initialization for form inputs but cannot handle dynamic state changes or complex validation. Boolean attributes lack granular control, and non-standard attributes may cause validation errors or accessibility compliance issues.
stolinskiWrite and review semantic, accessible HTML and Svelte template markup.
theofernandezzApply WCAG-compatible patterns and ARIA semantics to web interfaces.
Impertio-StudioExplain and demonstrate Tailwind CSS state modifiers and pseudo-elements for styling interactive elements.
thec3ukGuide frontend code to meet accessibility standards like ARIA and keyboard navigation.