Wann verwenden

Landing Pages und Marketing-Websites
Unternehmenswebsites
Inhaltslastige Websites (Blogs, Dokumentationen)
Projekte, bei denen SEO und Performance entscheidend sind
Größtenteils statische Websites mit minimaler Interaktivität
Websites, die schnelle Ladezeiten und gute Core Web Vitals benötigen

NICHT für vollständige Web-Apps — verwenden Sie vue-frontend für interaktive Anwendungen (Dashboards, CRUD-Apps, Echtzeit-Apps).

Kritische Regeln

Zero JS standardmäßig — Astro liefert KEIN JavaScript aus, es sei denn, Sie fügen eine Client-Direktive hinzu
TypeScript IMMER — wie bei allen Vera Sesiom Projekten, strikter Modus
Content Collections für strukturierte Inhalte verwenden — Blogbeiträge, Dokumentationen, Fallstudien
Islands-Architektur — Vue/React-Komponenten nur dort, wo Interaktivität benötigt wird
Statische Ausgabe (SSG) standardmäßig — SSR nur bei dynamischen Inhalten erforderlich
Tailwind CSS für Styling — wie beim Vue-Frontend
Screaming Architecture — Ordner schreien die Domäne, nicht das Framework

Entscheidungskriterien: Astro vs. Vue

Wann Astro verwenden	Wann Vue verwenden
Landing Page, Marketing-Website	Web-Anwendung (Dashboard, Admin)
Inhaltslastig (Blog, Dokumentation)	Hochinteraktive Benutzeroberfläche
SEO ist entscheidend	Echtzeit-Funktionen erforderlich
Größtenteils statischer Inhalt	Komplexes State-Management
Minimale Interaktivität (Formulare, Karussells)	Vollständige SPA-Navigation
Zero JS ist ein Feature	Vue-Ökosystem-Vorteile sind wichtig

Regel: Wenn die Website Inhalte enthält, die Menschen LESEN → Astro. Wenn es eine App ist, die Menschen NUTZEN → Vue.

Projektstruktur (Screaming Architecture)

apps/landing/   (oder apps/website/)
├── src/
│   ├── pages/                    # Dateibasiertes Routing (.astro-Dateien)
│   │   ├── index.astro           # Startseite
│   │   ├── about.astro           # Über uns
│   │   ├── pricing.astro         # Preise
│   │   ├── blog/
│   │   │   ├── index.astro      # Blog-Liste
│   │   │   └── [slug].astro      # Blog-Beitrag (dynamisch)
│   │   └── contact.astro
│   ├── layouts/                  # Seitenlayouts
│   │   ├── BaseLayout.astro      # Basis-HTML-Struktur
│   │   ├── BlogLayout.astro      # Blogbeitrag-Layout
│   │   └── LandingLayout.astro   # Landing Page Layout
│   ├── components/               # Astro-Komponenten (standardmäßig statisch)
│   │   ├── sections/             # Seitenabschnitte
│   │   │   ├── Hero.astro
│   │   │   ├── Features.astro
│   │   │   ├── Pricing.astro
│   │   │   ├── Testimonials.astro
│   │   │   └── CTA.astro
│   │   ├── ui/                   # Wiederverwendbare UI-Atome
│   │   │   ├── Button.astro
│   │   │   ├── Card.astro
│   │   │   ├── Badge.astro
│   │   │   └── Input.astro
│   │   └── interactive/          # Vue/React Islands
│   │       ├── ContactForm.vue   # Formular mit Validierung
│   │       ├── Carousel.vue      # Bild-Karussell
│   │       └── MobileMenu.vue    # Mobile Navigation
│   ├── content/                  # Content Collections
│   │   ├── blog/                 # Markdown/MDX-Blogbeiträge
│   │   │   ├── post-1.md
│   │   │   └── post-2.mdx
│   │   └── config.ts             # Collection-Schema (Zod)
│   ├── styles/                   # Globale Styles
│   │   └── global.css            # Tailwind-Imports
│   ├── assets/                   # Optimierte Bilder, Schriftarten
│   │   ├── images/
│   │   └── fonts/
│   └── utils/                    # Hilfsfunktionen
│       ├── date-format.ts
│       └── seo.ts
├── public/                       # Statische Assets (keine Verarbeitung)
│   ├── favicon.ico
│   ├── robots.txt
│   └── fonts/
├── astro.config.mjs              # Astro-Konfiguration
├── tailwind.config.mjs           # Tailwind-Konfiguration
├── tsconfig.json
└── package.json

Astro-Komponenten-Muster

Jede .astro-Datei hat zwei Teile: Frontmatter (serverseitig) und Template (HTML).

---
// src/components/ui/Button.astro
// Frontmatter: läuft serverseitig, KEIN Browser-JavaScript

interface Props {
  variant?: 'primary' | 'secondary' | 'outline'
  size?: 'sm' | 'md' | 'lg'
  href?: string
}

const {
  variant = 'primary',
  size = 'md',
  href,
  ...rest
} = Astro.props

const baseClasses = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors'
const variantClasses = {
  primary: 'bg-blue-600 text-white hover:bg-blue-700',
  secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
  outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50'
}
const sizeClasses = {
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-base',
  lg: 'px-6 py-3 text-lg'
}

const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`
---

{href ? (
  <a href={href} class={classes} {...rest}>
    <slot />
  </a>
) : (
  <button class={classes} {...rest}>
    <slot />
  </button>
)}

Wichtige Punkte:

Frontmatter wird zur Build-Zeit (oder zur Anfragezeit bei SSR) ausgeführt
Kein export default nötig — das Template IST der Export
<slot /> für Kind-Inhalte
Props werden mit TypeScript-Interfaces typisiert

Layout-Muster

---
// src/layouts/BaseLayout.astro
import Nav from '../components/Nav.astro'
import Footer from '../components/Footer.astro'

interface Props {
  title: string
  description?: string
  image?: string
}

const { title, description = '', image = '/og-default.png' } = Astro.props
const canonicalURL = new URL(Astro.url.pathname, Astro.site)
---

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="canonical" href={canonicalURL} />
    <title>{title}</title>
    <meta name="description" content={description} />
    
    <!-- OpenGraph -->
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={image} />
    <meta property="og:url" content={canonicalURL} />
    <meta property="og:type" content="website" />
    
    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    
    <slot name="head" />
  </head>
  <body class="bg-white text-gray-900 antialiased">
    <Nav />
    <main>
      <slot />
    </main>
    <Footer />
  </body>
</html>

Verwendung:

---
// src/pages/index.astro
import BaseLayout from '../layouts/BaseLayout.astro'
import Hero from '../components/sections/Hero.astro'
---

<BaseLayout title="Vera Sesiom - Softwareentwicklung" description="Wir bauen Software, die zählt.">
  <Hero />
</BaseLayout>

Content Collection Muster

Definieren Sie strukturierte Inhalte mit Zod-Schema-Validierung.

// src/content/config.ts
import { defineCollection, z } from 'astro:content'

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    updatedDate: z.coerce.date().optional(),
    author: z.string().default('Vera Sesiom'),
    image: z.object({
      url: z.string(),
      alt: z.string()
    }).optional(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false)
  })
})

export const collections = {
  blog: blogCollection
}

---
title: "Warum wir Astro für Landing Pages gewählt haben"
description: "Performance und Entwicklererfahrung sind entscheidend. Hier ist, warum Astro unsere erste Wahl für Content-Seiten ist."
pubDate: 2024-01-15
author: "Tech Lead"
image:
  url: "/images/blog/astro-landing.jpg"
  alt: "Astro-Logo auf einer modernen Website"
tags: ["astro", "performance", "architecture"]
---

Hier steht der Inhalt...

---
// src/pages/blog/index.astro
import { getCollection } from 'astro:content'
import BaseLayout from '../../layouts/BaseLayout.astro'

const posts = (await getCollection('blog'))
  .filter(post => !post.data.draft)
  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
---

<BaseLayout title="Blog" description="Neueste Artikel von Vera Sesiom">
  <h1>Blog</h1>
  <ul>
    {posts.map(post => (
      <li>
        <a href={`/blog/${post.slug}`}>
          <h2>{post.data.title}</h2>
          <p>{post.data.description}</p>
          <time>{post.data.pubDate.toLocaleDateString()}</time>
        </a>
      </li>
    ))}
  </ul>
</BaseLayout>

---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content'
import BaseLayout from '../../layouts/BaseLayout.astro'

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post }
  }))
}

const { post } = Astro.props
const { Content } = await post.render()
---

<BaseLayout title={post.data.title} description={post.data.description}>
  <article>
    <header>
      <h1>{post.data.title}</h1>
      <time>{post.data.pubDate.toLocaleDateString()}</time>
      <p>Von {post.data.author}</p>
    </header>
    <Content />
  </article>
</BaseLayout>

Islands-Architektur (Vue-Komponenten)

Interaktive Komponenten liefern JS nur bei Bedarf aus. Verwenden Sie Client-Direktiven, um die Hydration zu steuern.

<!-- src/components/interactive/ContactForm.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

const form = ref({
  name: '',
  email: '',
  message: ''
})

const errors = ref<Record<string, string>>({})

const isValid = computed(() => {
  return form.value.name && 
         form.value.email.includes('@') && 
         form.value.message.length > 10
})

async function submitForm() {
  if (!isValid.value) return
  
  // An API senden
  const response = await fetch('/api/contact', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(form.value)
  })
  
  if (response.ok) {
    // Erfolg behandeln
    form.value = { name: '', email: '', message: '' }
  }
}
</script>

<template>
  <form @submit.prevent="submitForm" class="space-y-4">
    <div>
      <label for="name">Name</label>
      <input v-model="form.name" type="text" id="name" required />
    </div>
    <div>
      <label for="email">E-Mail</label>
      <input v-model="form.email" type="email" id="email" required />
    </div>
    <div>
      <label for="message">Nachricht</label>
      <textarea v-model="form.message" id="message" rows="4" required />
    </div>
    <button type="submit" :disabled="!isValid">
      Nachricht senden
    </button>
  </form>
</template>

Verwendung in Astro:

---
// src/pages/contact.astro
import BaseLayout from '../layouts/BaseLayout.astro'
import ContactForm from '../components/interactive/ContactForm.vue'
---

<BaseLayout title="Kontakt">
  <h1>Nehmen Sie Kontakt auf</h1>
  <p>Wir freuen uns, von Ihnen zu hören.</p>
  
  <!-- client:visible = hydrieren, wenn in den Viewport gescrollt (BEST PRACTICE) -->
  <ContactForm client:visible />
</BaseLayout>

Client-Direktiven Entscheidungsbaum

Direktive	Wann verwenden	JS wird ausgeliefert
Keine Direktive	Statischer Inhalt, keine Interaktivität	Kein JS
`client:visible`	Interaktivität unterhalb der Falz (Formulare, Karussells) — STANDARD	Beim Scrollen in den Viewport
`client:load`	Kritische Interaktivität oberhalb der Falz	Sofort
`client:idle`	Nicht-kritische Verbesserungen (Analytics, Chat)	Nachdem die Seite im Leerlauf ist
`client:media`	Bedingt nach Breakpoint (mobile Navigation)	Wenn die Media Query zutrifft
`client:only`	SPA-ähnliche Komponenten (SSR überspringen)	Sofort, kein SSR

Best Practices:

Standardmäßig keine Direktive — rein statisch
Standardmäßig client:visible, wenn Interaktivität benötigt wird
client:load sparsam verwenden — nur für kritische oberhalb der Falz
client:idle für nicht-blockierende Verbesserungen verwenden

---
<!-- Gute Beispiele -->
import Hero from './Hero.astro'                    <!-- Statisch, kein JS -->
import Carousel from './Carousel.vue'             
import MobileMenu from './MobileMenu.vue'         
import Chat from './Chat.vue'                     
import Stats from './Stats.astro'                  <!-- Statischer Zähler = CSS -->

<Hero />                                          <!-- Statisch, keine Hydration -->
<Carousel client:visible />                       <!-- Hydrieren, wenn sichtbar -->
<MobileMenu client:media="(max-width: 768px)" />  <!-- Nur mobil -->
<Chat client:idle />                               <!-- Nachdem die Seite geladen ist -->
<Stats />                                          <!-- Reine CSS-Animationen, kein JS nötig -->

Bildoptimierung

Verwenden Sie astro:assets für automatische Optimierung.

---
// src/pages/index.astro
import { Image } from 'astro:assets'
import heroImage from '../assets/images/hero.png'
---

<Image 
  src={heroImage} 
  alt="Hero-Bild" 
  width={800} 
  height={600}
  loading="lazy"
  format="webp"
/>

Für Bilder aus CMS oder externen Quellen:

---
import { Image } from 'astro:assets'
---

<Image 
  src="https://example.com/image.jpg" 
  alt="Externes Bild" 
  width={800}
  height={600}
/>

Regeln:

Immer width und height angeben, um CLS zu vermeiden
loading="lazy" für Bilder unterhalb der Falz verwenden
webp- oder avif-Formate bevorzugen
Hero-Bilder optimiert und angemessen dimensioniert halten

SEO-Muster

---
// src/components/SEO.astro
interface Props {
  title: string
  description: string
  image?: string
  article?: boolean
  publishedTime?: Date
  author?: string
  tags?: string[]
}

const { 
  title, 
  description, 
  image = '/og-default.png',
  article = false,
  publishedTime,
  author,
  tags = []
} = Astro.props

const canonicalURL = new URL(Astro.url.pathname, Astro.site)
const imageURL = new URL(image, Astro.site)
---

<!-- Primäre Meta-Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />

<!-- Open Graph -->
<meta property="og:type" content={article ? 'article' : 'website'} />
<meta property="og:url" content={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageURL} />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={imageURL} />

<!-- Artikel-Meta (falls zutreffend) -->
{article && publishedTime && (
  <meta property="article:published_time" content={publishedTime.toISOString()} />
)}
{article && author && (
  <meta property="article:author" content={author} />
)}
{tags.length > 0 && tags.map(tag => (
  <meta property="article:tag" content={tag} />
))}

<!-- Strukturierte Daten (JSON-LD) -->
<script type="application/ld+json" set:html={JSON.stringify({
  '@context': 'https://schema.org',
  '@type': article ? 'Article' : 'WebPage',
  name: title,
  description: description,
  url: canonicalURL,
  image: imageURL,
  ...(article && {
    datePublished: publishedTime?.toISOString(),
    author: { '@type': 'Person', name: author }
  })
})} />

asolis87/vera-sesiom-skills

Was ist vera-sesiom-skills?

In Ihrer bevorzugten KI fragen

Dokumentation

Wann verwenden

Kritische Regeln

Entscheidungskriterien: Astro vs. Vue

Projektstruktur (Screaming Architecture)

Astro-Komponenten-Muster

Layout-Muster

Content Collection Muster

Islands-Architektur (Vue-Komponenten)

Client-Direktiven Entscheidungsbaum

Bildoptimierung

SEO-Muster

Verwandte Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me