@schalkneethling/toolkit 0.5.1 → 0.6.0

package/skills/semantic-html/SKILL.md

@@ -209,9 +209,7 @@ When in doubt: if the content serves the primary purpose of the page, it belongs
 ```html
 <!-- Correct: pull quote from the article's own content -->
 <aside aria-label="Pull quote">
-  <p>
-    "The biggest gains came not from new features, but from removing old ones."
-  </p>
+  <p>"The biggest gains came not from new features, but from removing old ones."</p>
 </aside>
 
 <!-- Use blockquote for genuine external quotations -->
@@ -462,9 +460,7 @@ HTML's `required` attribute communicates required state to assistive technology,
 ```html
 <!-- Pattern: asterisk with legend explaining it -->
 <fieldset>
-  <legend>
-    Contact details <span aria-hidden="true">*</span> required fields
-  </legend>
+  <legend>Contact details <span aria-hidden="true">*</span> required fields</legend>
 
   <label for="name">Full name <span aria-hidden="true">*</span></label>
   <input type="text" id="name" required />
@@ -486,12 +482,7 @@ When inputs have format hints or helper text, associate them with the input via
 Multiple associations are allowed—comma-separated IDs work for both hint and error:
 
 ```html
-<input
-  type="email"
-  id="email"
-  aria-invalid="true"
-  aria-describedby="email-hint email-error"
-/>
+<input type="email" id="email" aria-invalid="true" aria-describedby="email-hint email-error" />
 ```
 
 ### Error Messages
@@ -505,15 +496,8 @@ Current best practice (due to browser support gaps with `aria-errormessage`):
 
 ```html
 <label for="email">Email</label>
-<input
-  type="email"
-  id="email"
-  aria-invalid="true"
-  aria-describedby="email-error"
-/>
-<p id="email-error" class="error">
-  Enter a valid email address, like name@example.com
-</p>
+<input type="email" id="email" aria-invalid="true" aria-describedby="email-error" />
+<p id="email-error" class="error">Enter a valid email address, like name@example.com</p>
 ```
 
 ## Tables

package/skills/semantic-html/references/heading-patterns.md

@@ -139,11 +139,7 @@ function Card({ title, headingLevel = 3, headingClass, children }) {
 // Specialised product card - knows its context
 function ProductCard({ product, headingLevel = 3 }) {
   return (
-    <Card
-      title={product.name}
-      headingLevel={headingLevel}
-      headingClass="product-card__title"
-    >
+    <Card title={product.name} headingLevel={headingLevel} headingClass="product-card__title">
       <p className="product-card__price">{product.price}</p>
       <p className="product-card__description">{product.description}</p>
     </Card>