astrodeck: Instructions file for GitHub Copilot

GitHub Copilot Instructions — AstroDeck

Project Overview

AstroDeck is an open-source component library and starter kit for building Astro.js websites. It provides pre-built, production-ready sections for landing pages and SaaS websites.

Always check PROJECT.md first for project-specific overrides, then follow the conventions in this file.

---

Tech Stack

Layer	Technology	Version
Framework	Astro	v7.x
Styling	Tailwind CSS	v4.x
Tailwind Integration	@tailwindcss/vite	(Vite plugin, NOT @astrojs/tailwind)
UI Components	shadcn/ui + Radix UI	React
Type Safety	TypeScript	strict mode

Critical: Tailwind CSS v4 is configured via the @tailwindcss/vite Vite plugin. Never suggest @astrojs/tailwind (v3 only) or tailwind.config.js.

---

Project Structure

src/
  components/
    sections/     # Page sections: Hero.astro, CTA.astro, Pricing.astro, FAQ.astro, etc.
    ui/           # shadcn/ui React components: button.tsx, card.tsx, etc.
  layouts/        # BaseLayout.astro, FullWidthLayout.astro, MinimalLayout.astro,
                  # AuthLayout.astro, ArticleLayout.astro
  pages/          # File-based routing — index.astro maps to /
  content/        # Astro Content Collections (blog posts)
  styles/
    globals.css   # All design tokens + Tailwind v4 @theme block — customize colors here
  lib/
    utils.ts      # cn() helper and utilities
public/           # Static assets (fonts, favicon, images)
astro.config.mjs  # Astro + Vite configuration

---

Code Style Rules

Imports

Always use the @/ path alias for imports from src/. Never use relative paths.

// Correct
import Hero from "@/components/sections/Hero.astro";
import { Button } from "@/components/ui/button";
import BaseLayout from "@/layouts/BaseLayout.astro";

// Wrong
import Hero from "../components/sections/Hero.astro";

Colors and Styling

Use CSS variable-based Tailwind classes. Never hardcode colors or use inline styles.