Forms Skill

This skill provides patterns for building accessible, semantic forms using HTML-first techniques with CSS-only validation feedback.

Philosophy

Forms should work without JavaScript. HTML5 provides robust validation, and CSS pseudo-classes (:user-valid, :user-invalid) enable visual feedback. The <output> element provides semantic validation messaging with built-in accessibility support.

The <form-field> Pattern

The <form-field> custom element groups each form control with its label and validation message:

<form-field>
  <label for="email">Email</label>
  <input type="email"
         id="email"