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

Astro Tina Starter - Agent Knowledge Base

Generated: 2026-04-17 Version: 2.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

Key Features

• Self-hosted Tina CMS with schema-based content
• Tailwind CSS 4.x using @tailwindcss/vite plugin
• External consent system integration
• Thai language support with Noto Sans Thai
• Docker-ready with nginx

---

PROJECT STRUCTURE

astro-tina-starter/
├── .tina/
│   ├── config.ts       # Tina CMS configuration
│   └── schema.ts       # Content schema definitions
├── src/
│   ├── styles/
│   │   └── global.css  # Tailwind v4 styles + @theme
│   ├── layouts/
│   │   └── Layout.astro
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   │   ├── Header.astro
│   │   └── TrackingScripts.astro  # Tracking scripts (GA4, FB Pixel, etc.)
│   └── content/
│       ├── config.ts   # Astro content collections
│       ├── posts/       # Blog posts (MDX)
│       ├── pages/       # Static pages (MDX)
│       └── settings/    # Site settings (JSON)
├── public/
│   └── favicon.svg
├── Dockerfile
├── nginx.conf
├── 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.

ConsentOS + Tracking System

ConsentOS (consent.moreminimore.com) manages consent and blocking:

# ConsentOS
PUBLIC_CONSENT_SITE_ID=your-site-id
PUBLIC_CONSENT_API_BASE=https://consent.moreminimore.com

# Analytics
PUBLIC_GA4_ID=G-XXXXXXXXXX
PUBLIC_GTM_ID=GTM-XXXXXXX
PUBLIC_UMAMI_URL=https://umami.example.com
PUBLIC_UMAMI_WEBSITE_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
PUBLIC_CLARITY_ID=xxxxxxxxxx

# Marketing
PUBLIC_FB_PIXEL_ID=123456789
PUBLIC_GOOGLE_ADS_ID=AW-123456789
PUBLIC_TIKTOK_PIXEL_ID=XXXXXXXX
PUBLIC_LINE_CHANNEL_ID=1234567890

Tracking Scripts:

• TrackingScripts.astro - contains all tracking scripts
• Scripts are auto-blocked by ConsentOS until user consent
• Categories: analytics, marketing

---

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
PUBLIC_CONSENT_SITE_ID	ConsentOS site ID
PUBLIC_CONSENT_API_BASE	ConsentOS API base URL
PUBLIC_GA4_ID	Google Analytics 4
PUBLIC_GTM_ID	Google Tag Manager
PUBLIC_UMAMI_URL	Umami analytics URL
PUBLIC_UMAMI_WEBSITE_ID	Umami website ID
PUBLIC_CLARITY_ID	Microsoft Clarity
PUBLIC_FB_PIXEL_ID	Facebook Pixel
PUBLIC_GOOGLE_ADS_ID	Google Ads conversion ID
PUBLIC_TIKTOK_PIXEL_ID	TikTok Pixel
PUBLIC_LINE_CHANNEL_ID	LINE Channel Tag

---

COMMANDS

# Install dependencies
npm install

# Development
npm run dev

# Build
npm run build

# Preview
npm run preview

---

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

Easypanel

Static hosting - no persistent volume needed.

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