opencode-skill/skills/website-creator/templates/astro-tina-starter/AGENTS.md

Astro Tina Starter - Agent Knowledge Base

Generated: 2026-04-17
Version: 1.0.0
Type: Astro 6 + Tina CMS Starter Template

---

OVERVIEW

Starter template for building websites with Astro 6, Tina CMS, and Tailwind CSS 4.x.

Tech Stack

Component	Technology	Version
Framework	Astro	6.1.7
CMS	Tina CMS	2.x
Styling	Tailwind CSS	4.x
Database	Astro DB	0.14.x
State	Nano Stores	0.11.x

Key Features

• Self-hosted Tina CMS with schema-based content
• Tailwind CSS 4.x using @tailwindcss/vite plugin
• Astro DB for consent logging (PDPA compliant)
• Thai language support with Noto Sans Thai
• Docker-ready deployment

---

PROJECT STRUCTURE

astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── db/
│   ├── config.ts       # Astro DB schema
│   └── seed.ts         # Database seed script
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles + @theme
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   └── Header.astro
│   └── content/
│       ├── config.ts   # Astro content collections
│       ├── posts/       # Blog posts (MDX)
│       ├── pages/       # Static pages (MDX)
│       └── settings/    # Site settings (JSON)
├── public/
│   └── favicon.svg
├── Dockerfile
├── astro.config.mjs
├── tsconfig.json
└── package.json

---

IMPORTANT CONVENTIONS

Tailwind CSS 4.x Setup

CRITICAL: This template uses @tailwindcss/vite plugin, NOT @astrojs/tailwind.

// astro.config.mjs
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
})

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-primary: #1a1a1a;
  --color-accent: #3b82f6;
}

Tina CMS Content

Tina CMS manages content in src/content/:

• posts/ - Blog posts (MDX format)
• pages/ - Static pages (MDX format)
• settings/ - Site settings (JSON format)

Schema defined in .tina/schema.ts.

Astro DB Schema

Consent log table for PDPA compliance in db/config.ts.

---

CREDENTIALS

No external API credentials required for this template.

Optional Environment Variables

Variable	Description
TINA_TOKEN	Tina CMS production authentication
TINA_CLIENT_ID	Tina CMS client ID
DATABASE_URL	Custom database connection (optional)

---

COMMANDS

# Install dependencies
npm install

# Development
npm run dev          # Full dev (Tina + Astro)
npm run dev:astro    # Astro only
npm run dev:tina     # Tina CMS only

# Build
npm run build        # Production build
npm run preview      # Preview production build

# Database
npm run db:push      # Push schema to database
npm run db:seed      # Seed database

---

PDPA COMPLIANCE

Template includes consent logging via Astro DB:

// db/config.ts
export const ConsentLog = defineTable({
  columns: {
    action: text(),
    purpose: text(),
    analytics: boolean(),
    marketing: boolean(),
    functional: boolean(),
    userAgent: text(),
    ip: text(),
    timestamp: text(),
  },
})

---

ANTI-PATTERNS

• NEVER use @astrojs/tailwind (deprecated)
• ALWAYS use @tailwindcss/vite for Tailwind v4
• NEVER commit environment files (.env)

---

DEPLOYMENT

Docker

docker build -t astro-tina-starter .
docker run -p 8080:80 astro-tina-starter

Manual

npm install
npm run build
# Serve dist/ folder with any static server

---

NOTES

• Tina CMS admin: http://localhost:4321/admin
• Astro default port: 4321
• Tina dev server: 3001