diegosouzapw/awesome-omni-skills

Astro Web Framework

Übersicht

Diese öffentliche Aufnahmekopie verpackt plugins/antigravity-awesome-skills/skills/astro aus https://github.com/sickn33/antigravity-awesome-skills in das native Omni Skills-Redaktionsformat, ohne den Ursprung zu verbergen.

Verwenden Sie sie, wenn der Operator den upstream-Workflow, die Support-Dateien und den Repository-Kontext intakt halten muss, während der öffentliche Validator und der private Enhancer ihren normalen downstream-Fluss fortsetzen.

Diese Aufnahme bewahrt die kopierten upstream-Dateien intakt und verwendet den external_source-Block in metadata.json sowie ORIGIN.md als Provenienzanker für die Überprüfung.

Astro Web Framework

Importierte Quellabschnitte, die nicht sauber auf die öffentlichen Überschriften abgebildet werden konnten, sind unten oder in den Support-Dateien weiterhin erhalten. Bemerkenswerte importierte Abschnitte: Funktionsweise, Sicherheitshinweise, Häufige Fallstricke, Einschränkungen.

Wann diese Skill verwenden

Verwenden Sie diesen Abschnitt als Trigger-Filter. Er sollte die Aktivierungsgrenze explizit machen, bevor der Operator Dateien lädt, Befehle ausführt oder einen Pull-Request öffnet.

• Verwenden beim Erstellen eines Blogs, einer Dokumentationsseite, einer Marketingseite oder eines Portfolios
• Verwenden, wenn Performance und Core Web Vitals die höchste Priorität haben
• Verwenden, wenn das Projekt inhaltslastig mit Markdown- oder MDX-Dateien ist
• Verwenden, wenn Sie SSG (statische) Ausgabe mit optionalem SSR für dynamische Routen wünschen
• Verwenden, wenn der Benutzer nach .astro-Dateien, Astro.props, Content Collections oder client:-Direktiven fragt
• Verwenden, wenn die Anfrage klar mit der importierten Quellintention übereinstimmt: Inhaltsorientierte Websites mit Astro erstellen – standardmäßig null JavaScript, Insel-Architektur, Multi-Framework-Komponenten und Markdown/MDX-Unterstützung.

Bedientabelle

Situation	Hier starten	Warum es wichtig ist
Erste Verwendung	metadata.json	Bestätigt Repository, Branch, Commit und importierten Pfad durch den external_source-Block, bevor der kopierte Workflow berührt wird
Provenienzprüfung	ORIGIN.md	Gibt Prüfern einen Audit-Trail in Klartext für die importierte Quelle
Workflow-Ausführung	SKILL.md	Beginnt mit der kleinsten kopierten Datei, die die Ausführung materiell ändert
Unterstützender Kontext	SKILL.md	Fügt die nächstrelevanteste kopierte Quelldatei hinzu, ohne das gesamte Paket zu laden
Übergabeentscheidung	## Verwandte Skills	Hilft dem Operator, bei Abweichung der Aufgabe zu einer stärkeren nativen Skill zu wechseln

Workflow

Dieser Workflow ist bewusst gleichzeitig redaktionell und operativ. Er hält die importierte Quelle für den Operator nützlich, während er gleichzeitig die öffentlichen Aufnahmestandards erfüllt, die den downstream Enhancer-Fluss speisen.

1. Bestätigen Sie das Benutzerziel, den Umfang des importierten Workflows und ob diese Skill noch der richtige Router für die Aufgabe ist.
2. Lesen Sie die Übersichts- und Provenienzdateien, bevor Sie kopierte upstream Support-Dateien laden.
3. Laden Sie nur die Referenzen, Beispiele, Prompts oder Skripte, die das Ergebnis für die aktuelle Anfrage materiell ändern.
4. Führen Sie den upstream-Workflow aus, während Provenienz- und Quellgrenzen in den Arbeitsnotizen explizit bleiben.
5. Validieren Sie das Ergebnis anhand der upstream-Erwartungen und der Beweise, auf die Sie in den kopierten Dateien verweisen können.
6. Eskalieren oder übergeben Sie an eine verwandte Skill, wenn die Arbeit aus dem Kernbereich dieses importierten Workflows herausfällt.
7. Dokumentieren Sie vor dem Zusammenführen oder Schließen, was verwendet wurde, was geändert wurde und was der Prüfer noch überprüfen muss.

Importierte Workflow-Notizen

Importiert: Übersicht

Astro ist ein Web-Framework, das für inhaltsreiche Websites konzipiert ist – Blogs, Dokumentationen, Portfolios, Marketingseiten und E-Commerce. Seine Kerninnovation ist die Insel-Architektur: Standardmäßig sendet Astro null JavaScript an den Browser. Interaktive Komponenten werden selektiv als isolierte „Inseln“ hydriert. Astro unterstützt gleichzeitig React, Vue, Svelte, Solid und andere UI-Frameworks im selben Projekt, sodass Sie das richtige Werkzeug pro Komponente wählen können.

Importiert: Funktionsweise

Schritt 1: Projekteinrichtung

npm create astro@latest my-site
cd my-site
npm install
npm run dev

Integrationen nach Bedarf hinzufügen:

npx astro add tailwind        # Tailwind CSS
npx astro add react           # React-Komponentenunterstützung
npx astro add mdx             # MDX-Unterstützung
npx astro add sitemap         # Automatische sitemap.xml
npx astro add vercel          # Vercel SSR-Adapter

Projektstruktur:

src/
  pages/          ← Dateibasiertes Routing (.astro, .md, .mdx)
  layouts/        ← Wiederverwendbare Seiten-Schalen
  components/     ← UI-Komponenten (.astro, .tsx, .vue, usw.)
  content/        ← Typsichere Content Collections (Markdown/MDX)
  styles/         ← Globales CSS
public/           ← Statische Assets (werden unverändert kopiert)
astro.config.mjs  ← Framework-Konfiguration

Schritt 2: Astro-Komponentensyntax

.astro-Dateien haben einen Code-Fence oben (server-seitig) und eine Vorlage darunter:

---
// src/components/Card.astro
// Dieser Block läuft NUR auf dem Server – niemals im Browser
interface Props {
  title: string;
  href: string;
  description: string;
}

const { title, href, description } = Astro.props;
---

<article class="card">
  <h2><a href={href}>{title}</a></h2>
  <p>{description}</p>
</article>

<style>
  /* Automatisch auf diese Komponente begrenzt */
  .card { border: 1px solid #eee; padding: 1rem; }
</style>

Schritt 3: Dateibasierte Seiten und Routing

src/pages/index.astro          → /
src/pages/about.astro          → /about
src/pages/blog/[slug].astro    → /blog/:slug (dynamisch)
src/pages/blog/[...path].astro → /blog/* (Auffangpfad)

Dynamische Route mit getStaticPaths:

---
// src/pages/blog/[slug].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();
---

<h1>{post.data.title}</h1>
<Content />

Schritt 4: Content Collections

Content Collections bieten typsicheren Zugriff auf Markdown- und MDX-Dateien:

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.coerce.date(),
    tags: z.array(z.string()).default([]),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

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

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

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.data.title}</a>
      <time>{post.data.date.toLocaleDateString()}</time>
    </li>
  ))}
</ul>

Schritt 5: Inseln – Selektive Hydrierung

Standardmäßig rendern UI-Framework-Komponenten zu statischem HTML ohne JavaScript. Verwenden Sie client:-Direktiven zum Hydrieren:

---
import Counter from '../components/Counter.tsx';  // React-Komponente
import VideoPlayer from '../components/VideoPlayer.svelte';
---

<!-- Statisches HTML – kein JavaScript an den Browser gesendet -->
<Counter initialCount={0} />

<!-- Beim Seitenladen sofort hydrieren -->
<Counter initialCount={0} client:load />

<!-- Hydrieren, wenn die Komponente in den sichtbaren Bereich scrollt -->
<VideoPlayer src="/demo.mp4" client:visible />

<!-- Nur hydrieren, wenn der Browser im Leerlauf ist -->
<Analytics client:idle />

<!-- Nur bei einer bestimmten Media Query hydrieren -->
<MobileMenu client:media="(max-width: 768px)" />

Schritt 6: Layouts

---
// src/layouts/BaseLayout.astro
interface Props {
  title: string;
  description?: string;
}
const { title, description = 'My Astro Site' } = Astro.props;
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <nav>...</nav>
    <main>
      <slot />  <!-- Seiteninhalt wird hier gerendert -->
    </main>
    <footer>...</footer>
  </body>
</html>

---
// src/pages/about.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---

<BaseLayout title="About Us">
  <h1>About Us</h1>
  <p>Welcome to our company...</p>
</BaseLayout>

Schritt 7: SSR-Modus (On-Demand-Rendering)

Aktivieren Sie SSR für dynamische Seiten, indem Sie einen Adapter setzen:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'hybrid',  // 'static' | 'server' | 'hybrid'
  adapter: vercel(),
});

Einzelne Seiten mit export const prerender = false für SSR aktivieren.

Beispiele

Beispiel 1: Direkt nach dem upstream-Workflow fragen

Verwenden Sie @astro-v2 für <Aufgabe>. Starten Sie vom kopierten upstream-Workflow, laden Sie nur die Dateien, die das Ergebnis ändern, und halten Sie die Provenienz in der Antwort sichtbar.

Erklärung: Dies ist der sicherste Ausgangspunkt, wenn der Operator den importierten Workflow, aber nicht das gesamte Repository benötigt.

Beispiel 2: Um eine Provenienz-gestützte Überprüfung bitten

Überprüfen Sie @astro-v2 anhand von metadata.json und ORIGIN.md. Erklären Sie dann, welche kopierten upstream-Dateien Sie zuerst laden würden und warum.

Erklärung: Verwenden Sie dies vor der Überprüfung oder Fehlerbehebung, wenn Sie eine präzise, auditierbare Erklärung der Herkunft und Dateiauswahl benötigen.

Beispiel 3: Die kopierten Support-Dateien vor der Ausführung eingrenzen

Verwenden Sie @astro-v2 für <Aufgabe>. Laden Sie nur die kopierten Referenzen, Beispiele oder Skripte, die das Ergebnis ändern, und nennen Sie die Dateien explizit, bevor Sie fortfahren.

Erklärung: Dies hält die Skill im Einklang mit progressiver Offenlegung, anstatt standardmäßig das gesamte kopierte Paket zu laden.

Beispiel 4: Ein Prüfungspaket erstellen

Überprüfen Sie @astro-v2 anhand der kopierten upstream-Dateien plus Provenienz. Fassen Sie dann etwaige Lücken vor dem Zusammenführen zusammen.

Erklärung: Dies ist nützlich, wenn der PR auf eine menschliche Überprüfung wartet und Sie ein wiederholbares Audit-Paket wünschen.

Importierte Nutzungshinweise

Importiert: Beispiele

Beispiel 1: Blog mit RSS-Feed

// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog');
  return rss({
    title: 'My Blog',
    description: 'Latest posts',
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.date,
      link: `/blog/${post.slug}/`,
    })),
  });
}

Beispiel 2: API-Endpunkt (SSR)

// src/pages/api/subscribe.ts
import type { APIRoute } from 'astro';

export const POST: APIRoute = async ({ request }) => {
  const { email } = await request.json();

  if (!email) {
    return new Response(JSON.stringify({ error: 'Email required' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }

  await addToNewsletter(email);
  return new Response(JSON.stringify({ success: true }), { status: 200 });
};

Beispiel 3: React-Komponente als Insel

// src/components/SearchBox.tsx
import { useState } from 'react';

export default function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  async function search(e: React.FormEvent) {
    e.preventDefault();
    const data = await fetch(`/api/search?q=${query}`).then(r => r.json());
    setResults(data);
  }

  return (
    <form onSubmit={search}>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      <button type="submit">Search</button>
      <ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>
    </form>
  );
}

---
import SearchBox from '../components/SearchBox.tsx';
---
<!-- Sofort hydriert – diese Insel ist interaktiv -->
<SearchBox client:load />

Best Practices

Behandeln Sie die generierte öffentliche Skill als überprüfbare Verpackungsschicht um das upstream-Repository. Das Ziel ist es, die Provenienz explizit zu halten und nur das kopierte Quellmaterial zu laden, das die Ausführung materiell verbessert.

• ✅ Halten Sie die meisten Komponenten als statische .astro-Dateien – hydrieren Sie nur, was interaktiv sein muss
• ✅ Verwenden Sie Content Collections für alle Markdown/MDX-Inhalte – Sie erhalten Typsicherheit und automatische Validierung
• ✅ Bevorzugen Sie client:visible gegenüber client:load für Komponenten unterhalb des Bildschirmrands, um das anfängliche JS zu reduzieren
• ✅ Verwenden Sie import.meta.env für Umgebungsvariablen – prefixen Sie öffentliche Variablen mit PUBLIC_
• ✅ Fügen Sie von astro:transitions für flüssige Seitennavigation ohne vollständiges SPA hinzu
• ❌ Verwenden Sie nicht client:load auf jeder Komponente – dies konterkariert Astros Leistungsvorteil
• ❌ Setzen Sie keine Geheimnisse in .astro-Frontmatter, die in clientseitigen Vorlagen verwendet werden

Importierte Betriebshinweise

Importiert: Best Practices

• ✅ Halten Sie die meisten Komponenten als statische .astro-Dateien – hydrieren Sie nur, was interaktiv sein muss
• ✅ Verwenden Sie Content Collections für alle Markdown/MDX-Inhalte – Sie erhalten Typsicherheit und automatische Validierung
• ✅ Bevorzugen Sie client:visible über client:load für Komponenten unterhalb des Bildschirmrands, um das anfängliche JS zu reduzieren
• ✅ Verwenden Sie import.meta.env für Umgebungsvariablen – prefixen Sie öffentliche Variablen mit PUBLIC_
• ✅ Fügen Sie <ViewTransitions /> von astro:transitions für flüssige Seitennavigation ohne vollständiges SPA hinzu
• ❌ Verwenden Sie nicht client:load auf jeder Komponente – dies konterkariert Astros Leistungsvorteil
• ❌ Setzen Sie keine Geheimnisse in .astro-Frontmatter, die in clientseitigen Vorlagen verwendet werden
• ❌ Überspringen Sie nicht getStaticPaths für dynamische Routen im statischen Modus – Builds werden fehlschlagen

Fehlerbehebung

Problem: Der Operator hat den importierten Kontext übersprungen und zu generisch geantwortet

Symptome: Das Ergebnis ignoriert den upstream-Workflow in plugins/antigravity-awesome-skills/skills/astro, erwähnt keine Provenienz oder verwendet überhaupt keine kopierten Quelldateien. Lösung: Öffnen Sie erneut metadata.json, ORIGIN.md und die relevantesten kopierten upstream-Dateien. Prüfen Sie zuerst den external_source-Block, dann wiederholen Sie die Provenienz, bevor Sie fortfahren.

Problem: Der importierte Workflow fühlt sich bei der Überprüfung unvollständig an