skills.rest
hschne
hschneCOMMUNITY
Explore all skills by this author →
Website𝕏@hschnedlitzGitHub

html

Write and refactor semantic, accessible HTML across plain HTML, ERB, and Svelte templates.

1|Updated Apr 14, 2026
Search Tags:#html#accessibility#frontend#forms#web-development#semantic-html#interactive-ui
One-click install
npx skills add https://github.com/hschne/pi-stuff --skill html-hschne
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html
Source: https://github.com/hschne/pi-stuff/tree/main/skills/html
Command: npx skills add https://github.com/hschne/pi-stuff --skill html-hschne

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the common pain point of writing non-semantic, inaccessible HTML that relies on ARIA hacks, div-soup, and unnecessary JavaScript workarounds, which creates poor experiences for assistive technology users, increases maintenance overhead, and introduces browser compatibility risks.

Core Features & Use Cases

  • Native Element Usage: Enforces using native HTML elements (button, dialog, details, input) over custom ARIA widgets and clickable divs for built-in accessibility and browser behavior.
  • Multi-Template Support: Provides consistent rules for writing HTML in plain HTML, ERB, and Svelte templates, covering document structure, accessible forms, interactive patterns, and media elements.
  • Use Case: When refactoring a legacy web app's templates, use this Skill to replace all clickable div action triggers with native buttons, add missing associated labels for form inputs, and implement accessible modal dialogs with proper focus management.

Quick Start

Use the html skill to review the attached ERB template and replace all clickable div elements with native button elements while adding associated labels for every form input.

Frequently Asked Questions about html

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

FAQPage Schema
How do I make accessible HTML forms without relying on ARIA hacks?▼

To build accessible HTML forms, use native input elements with properly associated labels instead of ARIA hacks. This approach ensures built-in accessibility, reduces maintenance overhead, and provides cross-browser compatibility without relying on JavaScript workarounds.

What is semantic HTML and why should I use native elements over div-soup?▼

Semantic HTML uses native elements like button and dialog to convey meaning and built-in behavior. Using semantic HTML over div-soup eliminates accessibility barriers, reduces JavaScript dependencies, and ensures robust interactive widgets for assistive technology users.

Can I use this approach to refactor HTML in ERB and Svelte templates?▼

Yes, you can apply these semantic HTML rules to refactor ERB and Svelte templates. The approach provides consistent guidelines for replacing clickable divs with native buttons, implementing accessible dialogs, and structuring documents across multiple template formats.

What's the best way to implement accessible modal dialogs with proper focus management?▼

The best way to implement accessible modal dialogs is using the native HTML dialog element. This provides built-in focus management and browser behavior, satisfying WCAG-compliant accessible markup requirements without custom ARIA widgets or JavaScript focus traps.

How do I ensure my interactive UI widgets are WCAG-compliant?▼

Ensure interactive UI widgets are WCAG-compliant by adopting native HTML elements like details and dialog for progressive enhancement. This native browser feature adoption satisfies accessibility requirements while maintaining cross-browser compatibility.

Related Skills

Explore More Software Engineering Skills→
stolinskistolinski
63

html

Write and review semantic, accessible HTML and Svelte template markup.

Community
Intermediate
hschnehschne
1

css

Guide writing modern native CSS for cross-browser compatible, accessible styling.

Community
Intermediate
benswiftbenswift
26

frontend-web-engineer

Develops accessible, responsive HTML/CSS/JavaScript interfaces with Playwright-based testing.

Community
Intermediate
thisisAhsanIqbalthisisAhsanIqbal
7

semantic-layout

Validate HTML semantic elements and accessibility structure for SEO clarity.

Community
Intermediate