diegosouzapw/awesome-omni-skills

Astro Web フレームワーク

概要

このパブリックインテークコピーは、https://github.com/sickn33/antigravity-awesome-skills から plugins/antigravity-awesome-skills/skills/astro をパッケージ化し、その出典を隠すことなく、ネイティブの Omni Skills エディトリアルシェイプに適合させます。

パブリックバリデーターとプライベートエンハンサーが通常の下流フローを続ける間、オペレーターが上流のワークフロー、サポートファイル、リポジトリコンテキストをそのまま維持する必要がある場合に使用します。

このインテークは、コピーされた上流ファイルをそのまま保持し、metadata.json 内の external_source ブロックと ORIGIN.md をレビューのための出典アンカーとして使用します。

Astro Web フレームワーク

パブリック見出しにきれいにマッピングされなかったインポート元セクションも、以下またはサポートファイルに保存されています。注目すべきインポートセクション: 仕組み、セキュリティと安全性に関する注意事項、よくある落とし穴、制限事項。

このスキルを使用するタイミング

このセクションをトリガーフィルターとして使用します。オペレーターがファイルをロードしたり、コマンドを実行したり、プルリクエストを開いたりする前に、アクティベーション境界を明確にする必要があります。

• ブログ、ドキュメンテーションサイト、マーケティングページ、またはポートフォリオを構築する場合
• パフォーマンスと Core Web Vitals が最優先事項である場合
• プロジェクトが Markdown または MDX ファイルを使用したコンテンツ中心の場合
• SSG（静的）出力を希望し、動的ルートにオプションで SSR を使用する場合
• ユーザーが .astro ファイル、Astro.props、コンテンツコレクション、または client: ディレクティブについて質問する場合
• リクエストがインポート元の意図と明確に一致する場合: Astro を使用してコンテンツ重視のウェブサイトを構築する — デフォルトでゼロ JS、アイランドアーキテクチャ、マルチフレームワークコンポーネント、Markdown/MDX サポート。

操作テーブル

状況	開始場所	なぜ重要か
初回使用時	metadata.json	コピーされたワークフローに触れる前に、external_source ブロックを通じてリポジトリ、ブランチ、コミット、インポートパスを確認します
出典レビュー	ORIGIN.md	レビュー担当者にインポート元のわかりやすい監査証跡を提供します
ワークフロー実行	SKILL.md	実行を実質的に変更する最小のコピーファイルから開始します
サポートコンテキスト	SKILL.md	パッケージ全体をロードせずに、次に最も関連性の高いコピー元ソースファイルを追加します
引き継ぎ判断	## 関連スキル	タスクが逸脱した場合に、オペレーターがより強力なネイティブスキルに切り替えるのを支援します

ワークフロー

このワークフローは、意図的に編集的かつ運用的なものです。ダウンストリームのエンハンサーフローにフィードするパブリックインテーク基準を満たしながら、インポート元をオペレーターにとって有用に保ちます。

1. ユーザーの目標、インポートされたワークフローの範囲、およびこのスキルがタスクに適したルーターであるかどうかを確認します。
2. コピーされた上流サポートファイルをロードする前に、概要と出典ファイルを読みます。
3. 現在のリクエストの結果を実質的に変更する参照、例、プロンプト、またはスクリプトのみをロードします。
4. 作業メモで出典とソースの境界を明示的に保ちながら、上流のワークフローを実行します。
5. 上流の期待と、コピーされたファイルで指摘できる証拠に対して結果を検証します。
6. 作業がこのインポートワークフローの重心から外れた場合、関連スキルにエスカレーションまたは引き継ぎます。
7. マージまたはクローズの前に、何が使用され、何が変更され、レビュー担当者がまだ何を検証する必要があるかを記録します。

インポートされたワークフローノート

インポート: 概要

Astro は、コンテンツが豊富なウェブサイト（ブログ、ドキュメント、ポートフォリオ、マーケティングサイト、Eコマース）向けに設計されたウェブフレームワークです。その中核的な革新はアイランドアーキテクチャです。デフォルトでは、Astro はブラウザにゼロの JavaScript を配信します。インタラクティブなコンポーネントは、分離された「アイランド」として選択的にハイドレートされます。Astro は、React、Vue、Svelte、Solid、およびその他の UI フレームワークを同じプロジェクトで同時にサポートし、コンポーネントごとに適切なツールを選択できます。

インポート: 仕組み

ステップ 1: プロジェクトセットアップ

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

必要に応じてインテグレーションを追加:

npx astro add tailwind        # Tailwind CSS
npx astro add react           # React コンポーネントサポート
npx astro add mdx             # MDX サポート
npx astro add sitemap         # 自動 sitemap.xml
npx astro add vercel          # Vercel SSR アダプター

プロジェクト構造:

src/
  pages/          ← ファイルベースルーティング (.astro, .md, .mdx)
  layouts/        ← 再利用可能なページシェル
  components/     ← UI コンポーネント (.astro, .tsx, .vue など)
  content/        ← タイプセーフなコンテンツコレクション (Markdown/MDX)
  styles/         ← グローバル CSS
public/           ← 静的アセット (そのままコピー)
astro.config.mjs  ← フレームワーク設定

ステップ 2: Astro コンポーネント構文

.astro ファイルは、上部にコードフェンス（サーバー専用）があり、その下にテンプレートがあります:

---
// src/components/Card.astro
// このブロックはサーバー上でのみ実行されます — ブラウザでは決して実行されません
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>
  /* このコンポーネントに自動的にスコープされます */
  .card { border: 1px solid #eee; padding: 1rem; }
</style>

ステップ 3: ファイルベースのページとルーティング

src/pages/index.astro          → /
src/pages/about.astro          → /about
src/pages/blog/[slug].astro    → /blog/:slug (動的)
src/pages/blog/[...path].astro → /blog/* (キャッチオール)

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 />

ステップ 4: コンテンツコレクション

コンテンツコレクションは、Markdown および MDX ファイルへのタイプセーフなアクセスを提供します:

// 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>

ステップ 5: アイランド — 選択的水和

デフォルトでは、UI フレームワークコンポーネントは JS なしで静的 HTML にレンダリングされます。client: ディレクティブを使用してハイドレートします:

---
import Counter from '../components/Counter.tsx';  // React コンポーネント
import VideoPlayer from '../components/VideoPlayer.svelte';
---

<!-- 静的 HTML — ブラウザに JavaScript は送信されません -->
<Counter initialCount={0} />

<!-- ページ読み込み時に即座にハイドレート -->
<Counter initialCount={0} client:load />

<!-- コンポーネントがビューポートにスクロールされたときにハイドレート -->
<VideoPlayer src="/demo.mp4" client:visible />

<!-- ブラウザがアイドル状態のときにのみハイドレート -->
<Analytics client:idle />

<!-- 特定のメディアクエリでのみハイドレート -->
<MobileMenu client:media="(max-width: 768px)" />

ステップ 6: レイアウト

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

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <nav>...</nav>
    <main>
      <slot />  <!-- ページコンテンツはここにレンダリングされます -->
    </main>
    <footer>...</footer>
  </body>
</html>

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

<BaseLayout title="About Us">
  <h1>私たちについて</h1>
  <p>私たちの会社へようこそ...</p>
</BaseLayout>

ステップ 7: SSR モード（オンデマンドレンダリング）

アダプターを設定することで、動的ページに SSR を有効にします:

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

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

export const prerender = false で個々のページを SSR にオプトインします。

例

例 1: 上流ワークフローを直接依頼する

@astro-v2 を使用して <task> を処理します。コピーされた上流ワークフローから開始し、結果を変更するファイルのみをロードし、回答内で出典を可視化します。

説明: これは、オペレーターがインポートされたワークフローを必要とするが、リポジトリ全体は必要としない場合の最も安全な開始点です。

例 2: 出典に基づいたレビューを依頼する

metadata.json と ORIGIN.md に照らして @astro-v2 をレビューし、最初にどのコピー元上流ファイルをロードするか、その理由を説明します。

説明: レビューまたはトラブルシューティングの前に、出典とファイル選択の正確で監査可能な説明が必要な場合にこれを使用します。

例 3: 実行前にコピーされたサポートファイルを絞り込む

<task> に @astro-v2 を使用します。結果を変更するコピーされた参照、例、またはスクリプトのみをロードし、作業を進める前にファイルを明示的に指定します。

説明: これにより、デフォルトでコピーされたパッケージ全体をロードするのではなく、スキルを段階的な開示に合わせることができます。

例 4: レビュー担当者用パケットを作成する

コピーされた上流ファイルと出典を使用して @astro-v2 をレビューし、マージ前のギャップを要約します。

説明: PR が人間のレビューを待っており、再現可能な監査パケットが必要な場合に便利です。

インポートされた使用上の注意

インポート: 例

例 1: RSS フィード付きブログ

// 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: '最新の投稿',
    site: context.site,
    items: posts.map(post => ({
      title: post.data.title,
      pubDate: post.data.date,
      link: `/blog/${post.slug}/`,
    })),
  });
}

例 2: API エンドポイント (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: 'メールアドレスが必要です' }), {
      status: 400,
      headers: { 'Content-Type': 'application/json' },
    });
  }

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

例 3: アイランドとしての React コンポーネント

// 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">検索</button>
      <ul>{results.map(r => <li key={r.id}>{r.title}</li>)}</ul>
    </form>
  );
}

---
import SearchBox from '../components/SearchBox.tsx';
---
<!-- 即座にハイドレート — このアイランドはインタラクティブです -->
<SearchBox client:load />

ベストプラクティス

生成されたパブリックスキルを、上流リポジトリのレビュー可能なパッケージングレイヤーとして扱います。目標は、出典を明示的に保ち、実行を実質的に改善するコピーされたソースマテリアルのみをロードすることです。

• ✅ ほとんどのコンポーネントを静的 .astro ファイルとして保持 — インタラクティブにする必要があるもののみハイドレート
• ✅ すべての Markdown/MDX コンテンツにコンテンツコレクションを使用 — タイプセーフティと自動検証が得られます
• ✅ スクロール位置より下のコンポーネントには client:load よりも client:visible を優先 — 初期 JS を削減
• ✅ 環境変数には import.meta.env を使用 — パブリック変数には PUBLIC_ をプレフィックス
• ✅ astro:transitions から を追加 — フル SPA なしでスムーズなページナビゲーションを実現
• ❌ すべてのコンポーネントに client:load を使用しない — これでは Astro のパフォーマンス上の利点が損なわれます
• ❌ クライアント向けテンプレートで使用される .astro フロントマターにシークレットを入れない

インポートされた運用ノート

インポート: ベストプラクティス

• ✅ ほとんどのコンポーネントを静的 .astro ファイルとして保持 — インタラクティブにする必要があるもののみハイドレート
• ✅ すべての Markdown/MDX コンテンツにコンテンツコレクションを使用 — タイプセーフティと自動検証が得られます
• ✅ スクロール位置より下のコンポーネントには client:load よりも client:visible を優先 — 初期 JS を削減
• ✅ 環境変数には import.meta.env を使用 — パブリック変数には PUBLIC_ をプレフィックス
• ✅ astro:transitions から <ViewTransitions /> を追加 — フル SPA なしでスムーズなページナビゲーションを実現
• ❌ すべてのコンポーネントに client:load を使用しない — これでは Astro のパフォーマンス上の利点が損なわれます
• ❌ クライアント向けテンプレートで使用される .astro フロントマターにシークレットを入れない
• ❌ 静的モードでの動的ルートに getStaticPaths をスキップしない — ビルドが失敗します

トラブルシューティング

問題: オペレーターがインポートされたコンテキストをスキップし、あまりに一般的に回答した

症状: 結果が plugins/antigravity-awesome-skills/skills/astro の上流ワークフローを無視し、出典に言及せず、コピーされたソースファイルをまったく使用しません。 解決策: metadata.json、ORIGIN.md、および最も関連性の高いコピーされた上流ファイルを再度開きます。最初に external_source ブロックを確認し、続行する前に出典を再表明します。

問題: レビュー中にインポートされたワークフローが不完全に感じられる

…

[翻訳のため省略]