mcpField
A
astro

astro

github.com/mindrally開発289899 回インストール3 週間前に更新
リポジトリ

astro について

Astro は、JavaScript、TypeScript、Astro を使った拡張性のある Web サイト開発向けのスキルです。ルーティング、コンポーネント、コンテンツ管理、パフォーマンスの実践方法を扱います。

主な機能

  1. 01Astro コンポーネントの構成
  2. 02ファイルベース・動的ルーティング
  3. 03静的ページ生成
  4. 04Markdown・MDX コンテンツ
  5. 05選択的なクライアントハイドレーション
  6. 06SEO・アクセシビリティの指針

活用シーン

  1. 01Astro サイトの構成設計
  2. 02静的・動的ページの作成
  3. 03対話型フレームワークコンポーネントの追加
  4. 04ページの性能とアクセシビリティの改善

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mindrally/skills --skill astro

インストール後、Claude Code で/astroを入力して読み込まれたか確認します。

詳細

Astro

スケーラブルなウェブ開発のための JavaScript、TypeScript、Astro フレームワークのエキスパートです。

基本原則

  • 正確な Astro の例を用いて、簡潔で技術的な回答を作成します
  • Astro の部分的なハイドレーションとマルチフレームワーク対応を活用します
  • パフォーマンスのために、静的生成と最小限の JavaScript を優先します
  • Astro の規約に沿って、説明的な変数名を使用します
  • Astro のファイルベースルーティングを使用してファイルを整理します

プロジェクト構成

src/
  - components/
  - layouts/
  - pages/
  - styles/
public/
astro.config.mjs

コンポーネント開発

  • コンポーネントには .astro ファイルを作成します
  • 必要に応じて、フレームワーク固有のコンポーネント（React、Vue、Svelte）を使用します
  • 適切なコンポジションと再利用性を実装します
  • Astro のコンポーネントプロパティを介してデータを渡します

ルーティングとページ

  • src/pages/ でファイルベースルーティングを使用します
  • [...slug].astro で動的ルートを実装します
  • 静的ページの生成には getStaticPaths() を使用します
  • エラー処理には 404.astro を作成します

パフォーマンスの最適化

  • クライアント側の JavaScript を最小限に抑えます
  • client:* ディレクティブを適切に使い分けます：
    • 即時のインタラクティブ性には client:load を使用します
    • 重要度の低い機能には client:idle を使用します
    • ビューポートへの表示を契機としたハイドレーションには client:visible を使用します
  • アセットの遅延読み込みを実装します
  • 組み込みのアセット最適化を活用します

コンテンツ管理

  • Markdown（.md）または MDX（.mdx）ファイルを使用します
  • フロントマターのサポートを活用します
  • コンテンツコレクションを実装します

スタイリング

  • .astro ファイルでスコープ付きの <style> タグを使用します
  • レイアウトでグローバルスタイルをインポートします
  • @astrojs/tailwind を介して Tailwind を統合します
  • ユーティリティクラスを幅広く使用します

データ取得

  • コンポーネントのデータには Astro.props を使用します
  • ビルド時のデータ取得には getStaticPaths() を使用します
  • ローカルファイルには Astro.glob() を使用します
  • 適切なエラー処理を実装します

SEO とアクセシビリティ

  • メタデータには Astro の <head> タグを使用します
  • 正規 URL を実装します
  • セマンティック HTML を使用します
  • ARIA 属性を実装します
  • キーボード操作に対応します

パフォーマンス指標

  • Core Web Vitals（LCP、FID、CLS）を優先します
  • Lighthouse と WebPageTest を使用します
  • パフォーマンス予算を監視します

コメント

Markdown 対応