Documentation

Download and unzip AstroDeck. 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.

Your AI assistant will create src/pages/about.astro with the correct layout, SEO meta tags, and content structure.

Create src/pages/about.astro:

---
import BaseLayout from "@/layouts/BaseLayout.astro";
---

<BaseLayout
  title="About Us"
  description="Learn about our team"
>
  <div class="py-16">
    <h1 class="text-4xl font-bold mb-6">
      About Us
    </h1>
    <p class="text-muted-foreground">
      Your content here.
    </p>
  </div>
</BaseLayout>

Visit /about to see your new page.

The AI will import the Pricing component, configure the tiers array, and place it on your page.

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.

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

Create src/components/sections/FAQ.astro:

---
interface Props {
  title: string;
  items: {
    question: string;
    answer: string;
  }[];
}

const { title, items } = Astro.props;
---

<section class="py-12 px-6">
  <h2 class="text-3xl font-bold mb-8">
    {title}
  </h2>
  <div class="space-y-4">
    {items.map((item) => (
      <details class="border rounded-lg p-4">
        <summary class="font-medium
          cursor-pointer">
          {item.question}
        </summary>
        <p class="mt-2
          text-muted-foreground">
          {item.answer}
        </p>
      </details>
    ))}
  </div>
</section>

The AI updates both light and dark mode tokens in globals.css and ensures WCAG-compliant contrast.

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)

The AI updates the @font-face declarations, --radius, and all color tokens at once — in both light and dark mode.

All tokens live in src/styles/globals.css:

/* Fonts — replace woff2 files in
   public/fonts/ and update here */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/Geist-Variable.woff2')
    format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* Design tokens in @theme block */
@theme {
  --color-background: oklch(100% 0 0);
  --color-primary: oklch(11.2% ...);
  --color-secondary: oklch(96.1% ...);
  --color-muted: oklch(96.1% ...);
  --color-border: oklch(91.4% ...);
  --color-destructive: oklch(60.2% ...);
  --radius: 0.5rem;
}

/* Dark mode overrides */
.dark {
  --color-background: oklch(1.5% 0 0);
  --color-primary: oklch(98% 0 0);
  /* ... all tokens overridden */
}

The AI creates the Markdown file with proper frontmatter schema and optimized content.

Create src/content/blog/product-launch.md:

---
title: "Announcing Our Launch"
description: "We're live! Here's
  what we've built and why."
pubDate: 2026-03-15
author: "Your Name"
tags: ["news", "launch"]
---

# Announcing Our Launch

Write your content in Markdown.
Supports **bold**, *italic*,
[links](https://example.com),
images, and code blocks.

The post appears at /blog/product-launch.

The AI runs the build, reports issues, and can help fix them. 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