astro
Astro Webフレームワークを使った開発をサポートするスキルです。Astroコンポーネントやページの作成、SSRアダプターの設定、コンテンツコレクションのセットアップ、静的サイトのデプロイ、プロジェクト構成やCLIコマンドの管理を支援します。ユーザーがAstroを使いたい場合、`.astro`ファイルについて言及している場合、静的サイト生成（SSG）・アイランドアーキテクチャ・コンテンツコレクション・Astroプロジェクトのデプロイについて質問している場合に活用してください。
description の原文を見る
Skill for building with the Astro web framework. Helps create Astro components and pages, configure SSR adapters, set up content collections, deploy static sites, and manage project structure and CLI commands. Use when the user needs to work with Astro, mentions .astro files, asks about static site generation (SSG), islands architecture, content collections, or deploying an Astro project.
SKILL.md 本文
Astro 使用ガイド
常に docs.astro.build でコード例と最新の API を確認してください。
Astro は、コンテンツドリブンなウェブサイト向けのウェブフレームワークです。
クイックリファレンス
ファイルの場所
CLI は ./ ディレクトリ内で astro.config.js、astro.config.mjs、astro.config.cjs、astro.config.ts を探します。カスタムパスを指定するには --config を使用してください。
CLI コマンド
npx astro dev- 開発サーバーを起動します。npx astro build- プロジェクトをビルドしてディスクに出力します。npx astro check- プロジェクトのエラーをチェックします。npx astro add- インテグレーションを追加します。npx astro sync- すべての Astro モジュール用の TypeScript 型を生成します。
プラグインを追加・変更した後は再実行してください。
プロジェクト構造
プロジェクト構造ドキュメント を参照してください。
src/*- プロジェクトのソースコード (コンポーネント、ページ、スタイル、画像など)src/pages- 必須。 すべてのページとルートを定義します。src/components- コンポーネント (規約であり、必須ではありません)。src/layouts- レイアウトコンポーネント (規約であり、必須ではありません)。src/styles- CSS/Sass ファイル (規約であり、必須ではありません)。public/*- コード以外の未処理アセット (フォント、アイコンなど)。ビルド出力にそのままコピーされます。package.json- プロジェクトマニフェスト。astro.config.{js,mjs,cjs,ts}- Astro 設定ファイル。(推奨)tsconfig.json- TypeScript 設定ファイル。(推奨)
コア設定オプション
| オプション | 説明 |
|---|---|
site | 最終的にデプロイされる URL。サイトマップと正規 URL を生成するために使用されます。 |
astro.config.ts の例
import { defineConfig } from 'astro/config';
export default defineConfig({
site: 'https://example.com',
});
一般的なワークフロー
基本的なページの作成
src/pages/ にファイルを追加します。ファイル名がルートになります:
---
// src/pages/index.astro
const title = 'Hello, Astro!';
---
<html>
<head><title>{title}</title></head>
<body>
<h1>{title}</h1>
</body>
</html>
コンポーネントの作成
---
// src/components/Card.astro
const { title, body } = Astro.props;
---
<div class="card">
<h2>{title}</h2>
<p>{body}</p>
</div>
アダプターでのデプロイ
- アダプターを追加します:
npx astro add vercel --yes(またはnode、cloudflare、netlify) npx astro checkを実行してビルド前に型とコンフィグエラーをキャッチします。npx astro buildを実行してデプロイメントアーティファクトを生成します。- ビルド出力ディレクトリ (例:
dist/) が存在し、空でないことを確認してから進めてください。 - アダプターのドキュメントに従って出力をデプロイしてください。
アダプター
ビルドアダプターを使用して、好みのサーバー、サーバーレス、またはエッジホストにデプロイします。アダプターを使用して Astro プロジェクトでオンデマンドレンダリングを有効にします。
astro add を使用して Node.js アダプターを追加:
npx astro add node --yes
astro add を使用して Cloudflare アダプターを追加:
npx astro add cloudflare --yes
astro add を使用して Netlify アダプターを追加:
npx astro add netlify --yes
astro add を使用して Vercel アダプターを追加:
npx astro add vercel --yes
リソース
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- astrolicious
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/astrolicious/agent-skills / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理（非同期ジェネレータを含む）、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。