html

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

63|2|Updated Mar 23, 2026
One-click install
npx skills add https://github.com/stolinski/s-stack --skill html-stolinski
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: html
Source: https://github.com/stolinski/s-stack/tree/main/skills/html
Command: npx skills add https://github.com/stolinski/s-stack --skill html-stolinski

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writes and reviews semantic, accessible HTML and template markup that stays readable and low-noise. Use when creating or refactoring HTML or Svelte templates, cleaning up div soup, choosing better elements, improving form markup, fixing heading or landmark structure, or replacing custom controls with native HTML.

Core Features & Use Cases

  • Writes semantic HTML that describes content with appropriate elements and landmarks.
  • Refactors noisy markup to reduce wrapper noise and improve readability in templates like Svelte.
  • Improves form labeling, heading structure, and element choices to ensure accessibility.

Quick Start

Review a Svelte component and replace non-semantic wrappers with semantic HTML while preserving behavior.

Frequently Asked Questions about html

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

FAQPage Schema
How do I write semantic HTML to fix div soup in my templates?

Semantic HTML replaces non-semantic wrapper divs with appropriate elements and landmarks to reduce wrapper noise and improve template readability. This approach describes content accurately while maintaining template behavior and compatibility.

What is the best way to improve HTML form markup for accessibility?

Improving HTML form markup for accessibility involves applying correct semantic elements and proper labeling. This ensures your forms follow accessibility guidelines, satisfy landmark structure requirements, and remain readable and low-noise.

Can I refactor Svelte components to use better semantic HTML elements?

Refactoring Svelte components with semantic HTML involves reviewing existing markup and replacing non-semantic wrappers with better elements. This preserves component behavior while improving heading structure and reducing template noise.

Why does my HTML heading structure fail accessibility guidelines?

HTML heading structure fails accessibility guidelines when semantic elements and landmarks are missing or incorrectly ordered. Fixing heading structure requires choosing appropriate semantic elements to describe content and satisfy accessibility requirements.

Does this approach work for replacing custom controls with native HTML?

Replacing custom controls with native HTML works by choosing better semantic elements that inherently support accessibility. This refactoring process maintains template compatibility while reducing wrapper noise and satisfying accessibility guidelines.

What are the limitations of refactoring HTML markup for semantics?

Refactoring HTML markup for semantics is limited by the need to preserve template behavior and compatibility. While reducing wrapper noise improves readability, you must ensure semantic element choices do not break existing Svelte template logic or custom control functionality.