Claravine

A website template your AI can make its own

An Astro starter for personal and project sites. The technical SEO is done and guarded by CI, every vendor is swappable, and the brand guideline lives inside the site. AGENTS.md explains the codebase to Claude Code, Codex, Cursor, or any AI coding agent, so you can ask for changes in plain words.

Get startedRead the blog →

Ahrefs site health 100Security headers ALighthouse 4×100

Terminal
$ npm create astro@latest my-site \
    -- --template Zmoki/zmoki-astro-starter
$ cd my-site
$ claude
> /run
  ➜ http://localhost:4321

Technical SEO

The technical SEO is already done

The invisible work search engines check is wired in, and CI guards it on every push. You write posts. The crawlers get everything they ask for.

100Ahrefs site healthExcellent
ASecurity headerssecurityheaders.com100Lighthouse SEOand 100 on the other three

Indexing

  • Sitemap with images

    Every indexable page is in the sitemap, and post covers ship in the image sitemap.

    <image:loc>…/cover.jpg</image:loc>

  • Smart canonicals

    Each page declares its own canonical URL. A cross-posted article can point at the original.

    <link rel="canonical" href="…">

  • Robots on both layers

    Per-page robots directives in the HTML and X-Robots-Tag rules in the response headers.

    X-Robots-Tag: noindex

Rich results

  • Structured data

    schema.org JSON-LD that follows Google's guidelines, on every page that qualifies.

    "@type": "BlogPosting"

  • Open Graph images

    Purpose-built social cards, rendered at build time. Design your own templates in the brand system.

    og:image → /og/blog/my-post.png

  • Ready for Google Discover

    Posts carry a real cover photo at 1200px or wider, and the cover feeds the image sitemap.

    max-image-preview:large

Trust and guardrails

  • E-E-A-T signals

    Authors with bios on every post, privacy and terms pages, and a license on every content image.

    "author": { "@type": "Person" }

  • CI that guards SEO

    Broken links, sitemap gaps, and malformed structured data turn the build red. Lighthouse CI tracks the SEO score.

    ✓ links ✓ sitemap ✓ structured data

  • Version meta tag

    Every page carries the commit hash it was built from, so an Ahrefs or Semrush crawl maps to an exact version.

    <meta name="version" content="d69d20c">

Platform agnostic

No vendor lock-in, anywhere it matters

Every integration point ships with a working default and a clean seam to swap it out. Pick your own host, analytics vendor, form backend, captcha, or image CDN without touching the rest of the codebase.

AI coding tools

AGENTS.md is the canonical spec. CLAUDE.md imports it, and Cursor or any other tool reads it directly, so any coding agent understands the codebase and can rebrand it on request.

Claude Code CursorCodex

Deploy target

Redirects and response headers are authored once, platform-neutral, then compiled per host from a single site.config.ts setting. Switching hosts is a one-line change plus a rebuild.

Cloudflare Pages

Analytics

Call sites fire through one window.track facade, never a vendor SDK directly. Add a new provider by writing one component. The pages that call track don't change.

Google Tag Manager

Forms

The lead-magnet gate posts through a single dispatcher. The backend handles validation, storage, and delivery. Swap it without touching the page template.

BrevoFormspree

Captcha

Bot protection is single-select and self-gating. A provider renders only when its site key is set, and only one widget ever loads at a time.

Image CDN

Host originals on any bucket or CDN behind a custom domain. Astro downloads and optimizes them at build. Fully decoupled from the deploy host.

Fast & accessible

A perfect 100, across the board

Every page scores 100 on all four Lighthouse categories, on both desktop and mobile. Reproduce it yourself with npm run lhci:mobile.

100
Performance
100
Accessibility
100
Best Practices
100
SEO

Brand system

A living brand guideline, built in

Every site ships with an internal style guide for color, typography, forms, components, and voice & tone. It renders from the same design tokens the site itself uses. Change a token and the guideline and the site move together.

The /brand skill lets Claude Code or any agent evolve it end to end. Recolor the palette, swap fonts, rewrite the voice, and keep the guideline and the implementation in sync.

Open the brand system →

Ready to get started?

Grab the template, tell your AI agent what you want, and deploy.

Use this template

Ahrefs site health 100Security headers ALighthouse 4×100