Bits, Chips and Everything Tech

This guide is a pragmatic, production-minded checklist and how-to for hardening a SvelteKit landing site so it’s discoverable by search engines, understandable by AI crawlers, and delightful on modern devices. It includes file locations, example contents, and verification steps. Everything here works even if you only have a single landing page today. Branding note: this document uses a fictional brand (“Example Store”) and domain (example.com). Replace these with your own values when you implement. Quick To-Do Checklist • Serve a real XML sitemap at /sitemap.xml and reference it in robots.txt. • Add a lightweight, server-rendered /search?q=… endpoint (backs JSON-LD SearchAction). • Place ai.txt (allow/deny AI crawlers) and .well-known/security.txt (vuln-reporting). • Wire canonical Open Graph/Twitter tags and og.png for social previews. • Add platform icons (apple-touch-icon.png, safari-pinned-tab.svg) and site.webmanifest. • Harden app.html with meta theme-color (light/dark), color-sc...

This “what it is + how to” cheat‑sheet rounds up the patterns you see at big shops—implemented simply with Svelte, vanilla HTML, Tailwind, and daisyUI. 1) Skeleton Screens What it is: Placeholder UI that mimics the final layout while data loads. Reduces perceived wait time and layout shift. When to use: Lists, profile cards, dashboards, anywhere remote data drives the view. <!-- Svelte: skeleton component --> <!-- src/lib/SkeletonCard.svelte --> <script> export let rows = 2; </script> <div class="flex gap-3 items-start">   <div class="skeleton w-12 h-12 rounded-lg"></div>   <div class="flex-1">     {#each Array(rows) as _}       <div class="skeleton h-3 my-2"></div>     {/each}   </div> </div> <style>   /* If not using daisyUI .skeleton class, a minimal fallback: */   .skeleton { background: #e6e6e6; border-radius: .5rem; }   @media (prefers-redu...