Documentation

Download and unzip the template. Open the folder in your AI coding tool (Claude Code, Cursor, Windsurf, etc.) and say:

Unzip the download, open a terminal in the project folder, and run:

npm install
npm run dev

Then open http://localhost:4321 in your browser.

The fastest way: describe your product and let the AI rewrite all content at once.

For more control, go page by page:

Content lives in the page files (not in section components). Edit these files:

Key rule: Change content in page files where sections are used, not in the section component definitions.

Place your logo file (SVG recommended) in the project root, then tell your AI:

Replace these files in public/:

Update site.webmanifest if your filenames differ.

Three steps in src/styles/globals.css:

/* 1. Replace @font-face */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2')
    format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* 2. Update @theme */
@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
}

/* 3. Place your .woff2 file in: */
/* public/fonts/Inter-Variable.woff2 */

Use variable fonts (single .woff2) for best performance. Download from Google Fonts or Fontsource.

The AI updates all tokens in both modes and verifies contrast compliance.

Edit src/styles/globals.css:

@theme {
  --color-primary:
    oklch(55% 0.25 260);
  --color-primary-foreground:
    oklch(98% 0 0);
}

.dark {
  --color-primary:
    oklch(70% 0.2 260);
  --color-primary-foreground:
    oklch(10% 0 0);
}

OKLCH format: oklch(lightness% chroma hue). Use oklch.com to pick colors.

To remove items:

Header — edit the dropdowns object in src/components/Header.astro:

const dropdowns = {
  Product: [
    { href: '/features', label: 'Features' },
    { href: '/pricing', label: 'Pricing' },
  ],
  Resources: [
    { href: '/docs', label: 'Docs' },
    { href: '/changelog', label: 'Changelog' },
  ],
};

Footer — edit footerLinks in src/components/Footer.astro:

const footerLinks = {
  pages: [
    { href: '/features', label: 'Features' },
    { href: '/pricing', label: 'Pricing' },
  ],
  system: [
    { href: '/contact', label: 'Contact' },
    { href: '/privacy', label: 'Privacy' },
  ],
};

The AI creates the page, imports sections, adds SEO meta tags, and updates navigation.

Create src/pages/about.astro:

---
import BaseLayout from "@/layouts/BaseLayout.astro";
import Team from
  "@/components/sections/Team.astro";
---

<BaseLayout
  title="About Us"
  description="Meet the team behind..."
>
  <section class="pt-36 pb-12 px-6">
    <div class="mx-auto max-w-3xl">
      <h1 class="text-4xl font-semibold mb-6">
        About Us
      </h1>
    </div>
  </section>
  <Team />
</BaseLayout>

The file name is the URL: about.astro → /about. Don't forget to add the link to Header and Footer.

The AI imports the Pricing component, configures the tiers array, and places it at the right position.

Import the component and pass your data as props:

---
import Pricing from
  "@/components/sections/Pricing.astro";

const tiers = [
  {
    name: "Free",
    price: "$0",
    description: "For personal projects",
    features: ["1 project", "Support"],
    cta: { href: "/signup", label: "Start" },
  },
  // ... more tiers
];
---

<Pricing title="Pricing" tiers={tiers} />

See all available sections at /sections.

To replace:

To remove:

Sections are imported and placed in page files. To swap or remove, edit the page:

---
// src/pages/index.astro
import Hero from "...";
// Remove: import LogoCloud from "...";
import Testimonials from
  "@/components/sections/Testimonials.astro";
---

<BaseLayout title="Home">
  <Hero ... />
  <!-- Removed: <LogoCloud /> -->
  <Testimonials
    testimonials={[
      { quote: "...", name: "...",
        role: "..." },
    ]}
  />
</BaseLayout>

Remove both the import statement and the component tag in the template.

The AI reads AGENTS.md to understand conventions and creates a component with typed props, proper imports, and consistent styling.

Create src/components/sections/HowItWorks.astro:

---
interface Props {
  title?: string;
  steps: {
    title: string;
    description: string;
  }[];
}

const { title = "How It Works", steps } =
  Astro.props;
---

<section class="py-20 px-6">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-semibold mb-12">
      {title}
    </h2>
    <div class="grid md:grid-cols-3 gap-8">
      {steps.map((step, i) => (
        <div>
          <span class="text-4xl font-bold
            text-muted-foreground/30">
            {String(i + 1).padStart(2, '0')}
          </span>
          <h3 class="text-xl font-semibold
            mt-4 mb-2">
            {step.title}
          </h3>
          <p class="text-muted-foreground">
            {step.description}
          </p>
        </div>
      ))}
    </div>
  </div>
</section>

Place images in src/assets/images/ (optimized) or public/ (served as-is):

---
import { Image } from 'astro:assets';
import teamPhoto from
  '@/assets/images/team-photo.jpg';
---

<!-- Optimized (recommended) -->
<Image
  src={teamPhoto}
  alt="Team at the annual retreat"
  widths={[400, 800, 1200]}
  sizes="calc(100vw - 3rem)"
  loading="lazy"
  class="w-full h-[50vh] object-cover"
/>

<!-- From public/ (no optimization) -->
<img
  src="/images/logo-partner.png"
  alt="Partner company logo"
  loading="lazy"
/>

Rule: Always add descriptive alt text. Use alt="" only for purely decorative images.

For OG image generation:

Each page sets SEO via layout props:

<BaseLayout
  title="Features - Your Product"
  description="Discover how Your Product
    helps teams ship faster."
  image="/og-features.png"
  type="website"
/>

Checklist:

• 1.Set site in astro.config.mjs to your domain
• 2.Unique title + description per page
• 3.OG image at public/cover.png (1200x630)
• 4.Update robots.txt sitemap URL
• 5.Auth pages: add noindex={true}

For deployment:

Build and preview locally:

npm run build
npm run preview

Deploy the dist/ folder to any static host:

• Vercel: Push to GitHub, import in dashboard
• Netlify: Connect repo, auto-detects Astro
• Cloudflare:npx wrangler pages deploy dist

Formspree

1. Create a free account at formspree.io
2. Create a new form and copy the endpoint URL
3. In src/pages/contact.astro, replace the form action:

<form action="https://formspree.io/f/YOUR_ID" method="POST">

Netlify Forms

1. Deploy to Netlify (forms are auto-detected)
2. Add the netlify attribute to the form tag:

<form name="contact" netlify method="POST">

Submissions appear in your Netlify dashboard under Forms.

Once set up, every AI assistant (Claude Code, Cursor, Copilot, Windsurf) will read PROJECT.md automatically and follow your rules.

Open PROJECT.md in the project root and add your rules:

## Brand
Product: Acme Analytics
Tagline: "Insights that move teams"
Audience: B2B SaaS, product managers

## Voice
Professional, clear, no jargon.
US English only.

## Design
Primary color: #2563EB
Keep the warm off-white background.
Use rounded-full on all buttons.

## Rules
- All forms must validate with Zod
- Never use "Sign Up" — use "Get Started"
- Footer must link to status.acme.com

Priority: PROJECT.md > AGENTS.md > README.md. Your rules always win.

In Claude Code, /plenum triggers parallel review agents. In other tools, the AI uses the self-audit prompts from system/prompts/.

Each task type follows a skill chain — a sequence of domain checks: