HTML, but Smarter.

<!-- HTML: skeleton placeholder -->
<div class="skeleton shimmer"
  id="img-placeholder"
  style="width:300px;height:200px;"></div>

// JS: set up IntersectionObserver
const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) return;
    const img = new Image();
    img.src = entry.target.dataset.src;
    img.onload  = () => swapIn(entry.target, img);
    img.onerror = () => tryFallback(entry.target);
    observer.unobserve(entry.target);
  });
}, { rootMargin: '100px', threshold: 0.1 });
observer.observe(document.getElementById('img-placeholder'));

// Swap placeholder with fade-in (~10 lines)
function swapIn(el, img) { ... }

// Fallback if image fails (~10 lines)
function tryFallback(el) { ... }

// CSS: @keyframes shimmer sweep (~8 lines)
// CSS: hover-zoom on :hover (~5 lines)
// Click-to-preview lightbox (~20 lines)
// ─────────────────────────────────────
// Total: ~67 lines per "image type"
// Copy-pasted for every page.

<!-- HTML: label + input + error element -->
<div class="form-group">
  <label for="email">Email
    <span class="required">*</span></label>
  <input type="email" id="email"
    class="form-control"
    placeholder="you@example.com">
  <span class="error-msg d-none"
    style="color:#dc3545;font-size:.8rem"></span>
</div>

// JS: attach blur validation
const input = document.getElementById('email');
const errEl = input.nextElementSibling;
input.addEventListener('blur', () => {
  if (!input.value.trim()) {
    showError('Email is required');
  } else if (!/\S+@\S+\.\S+/.test(input.value)) {
    showError('Enter a valid email address');
  } else { clearError(); }
});
function showError(msg) {
  input.classList.add('is-invalid');
  errEl.textContent = msg;
  errEl.classList.remove('d-none');
  input.style.animation = 'shake .3s';
  setTimeout(() => input.style.animation = '', 300);
}
// clearError() — ~5 lines
// @keyframes shake — ~8 CSS lines
// ×6–8 inputs per form = 300–400 lines total

<!-- HTML -->
<button id="saveBtn"
  class="btn btn-success">
  Save Changes
</button>

// JS: wire up everything manually
document.getElementById('saveBtn')
  .addEventListener('click', async e => {
    e.preventDefault();
    if (!confirm('Are you sure?')) return;

    btn.disabled = true;
    btn.innerHTML = `<span class="spinner-border
      spinner-border-sm"></span> Saving...`;

    try {
      const data = new FormData(
        document.getElementById('myForm'));
      const res = await fetch('/api/save',
        { method: 'POST', body: data });
      if (!res.ok) throw new Error();
      showToast('Saved!', 'success');
    } catch {
      showToast('Something went wrong', 'error');
    } finally {
      btn.innerHTML = 'Save Changes';
      btn.disabled = false;
    }
  });
// showToast() helper — another ~15 lines
// ×4 buttons per page = 180 lines of boilerplate