spb/ultra-sharp-agent-skills Public
Ultra-Sharp Agent Skills — a research-first skill-authoring system + 72 production-ready skills for AI agents.
Python 100%
1<!--2Author: Simon-Pierre Boucher3Contact: contact@spboucher.ai4-->56# Patterns — Semantic HTML Structure78## Contents9- Full page skeleton10- Complete head block (SEO + social)11- Article with sections12- Data table13- Figure, time, address, definition list14- Breadcrumbs15- Gotchas1617## Full page skeleton1819```html20<!doctype html>21<html lang="en">22<head>…see head block below…</head>23<body>24 <header>25 <a href="/" class="logo">Acme</a>26 <nav aria-label="Main">27 <ul>28 <li><a href="/products">Products</a></li>29 <li><a href="/pricing">Pricing</a></li>30 </ul>31 </nav>32 </header>3334 <main>35 <h1>Page topic — the only h1</h1>36 <section>37 <h2>First theme</h2>38 <p>…</p>39 </section>40 <aside aria-label="Related links">41 <h2>Related</h2>42 <ul>…</ul>43 </aside>44 </main>4546 <footer>47 <p><small>© 2026 Acme</small></p>48 </footer>49</body>50</html>51```5253## Complete head block (SEO + social)5455```html56<head>57 <meta charset="utf-8">58 <meta name="viewport" content="width=device-width, initial-scale=1">59 <title>Pricing — Acme</title> <!-- ≤60 chars, specific first -->60 <meta name="description" content="Acme plans from $9/mo. Compare Starter, Pro, and Team features."> <!-- ≤160 chars -->61 <link rel="canonical" href="https://acme.com/pricing">6263 <!-- Open Graph -->64 <meta property="og:title" content="Pricing — Acme">65 <meta property="og:description" content="Acme plans from $9/mo.">66 <meta property="og:image" content="https://acme.com/og/pricing.png"> <!-- 1200×630 -->67 <meta property="og:url" content="https://acme.com/pricing">68 <meta property="og:type" content="website">6970 <!-- Twitter -->71 <meta name="twitter:card" content="summary_large_image">72</head>73```7475## Article with sections7677```html78<article>79 <header>80 <h1>How we cut LCP to 1.8s</h1>81 <p>By <address style="display:inline">Jane Doe</address> ·82 <time datetime="2026-08-05">August 5, 2026</time></p>83 </header>84 <section>85 <h2>The problem</h2>86 <p>…</p>87 </section>88 <section>89 <h2>What we changed</h2>90 <h3>Images</h3>91 <p>…</p>92 </section>93 <footer>94 <p>Filed under <a href="/tags/perf">performance</a></p>95 </footer>96</article>97```9899## Data table100101```html102<table>103 <caption>Revenue by region, Q2 2026</caption>104 <thead>105 <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>106 </thead>107 <tbody>108 <tr><th scope="row">EMEA</th><td>$4.2M</td></tr>109 <tr><th scope="row">APAC</th><td>$3.1M</td></tr>110 </tbody>111</table>112```113114## Figure, time, address, definition list115116```html117<figure>118 <img src="chart.png" alt="Revenue grew 40% quarter over quarter in Q2 2026">119 <figcaption>Fig 1. Quarterly revenue</figcaption>120</figure>121122<time datetime="2026-08-05T14:30">Aug 5, 2:30 PM</time>123124<dl>125 <dt>Plan</dt><dd>Pro</dd>126 <dt>Seats</dt><dd>25</dd>127</dl>128```129130## Breadcrumbs131132```html133<nav aria-label="Breadcrumb">134 <ol>135 <li><a href="/">Home</a></li>136 <li><a href="/docs">Docs</a></li>137 <li aria-current="page">Installation</li>138 </ol>139</nav>140```141142## Gotchas143144- **`<section>` without a heading is meaningless** — if it has no heading, it should be a `<div>`.145- **`<article>` vs `<section>`:** ask "would this make sense in an RSS feed alone?" Yes → article.146- **Multiple `<nav>` landmarks need distinguishing `aria-label`s** ("Main", "Breadcrumb", "Footer") — otherwise they announce identically.147- **`<time>` requires machine-readable `datetime`** when the text isn't already ISO format.148- **`og:image` must be an absolute URL**; relative paths silently break social previews.149- **`<title>` and `og:title` can differ** — title is for tabs/SERP (include brand), og:title for the share card.150- **Skipping `<thead>`/`<th scope>`** makes header cells unassociable; screen readers and copy-paste both degrade.151- **`<b>`/`<i>` vs `<strong>`/`<em>`:** the former are stylistic offsets, the latter carry emphasis semantics — pick by meaning.152