A

astro

by @astroliciousv
4.5(72)

Astroプロジェクト向けで、CLIコマンド、プロジェクト構造、およびコアコンセプトを網羅しています。AIエージェントスキルで、作業効率と自動化能力を向上させます。

astro-frameworkstatic-site-generationisland-architectureweb-performancefrontend-developmentGitHub
インストール方法
npx skills add astrolicious/agent-skills --skill astro
compare_arrows

Before / After 効果比較

1
使用前

従来のフロントエンドプロジェクトは設定が複雑で、パフォーマンス最適化には手動調整が必要であり、開発効率が制限されていました。開発者は環境構築とパフォーマンスチューニングに多くの時間を費やすことがよくありました。

使用後

Astroスキルは、プロジェクトの初期化と設定を簡素化し、明確なプロジェクト構造とCLIコマンドを提供します。これにより、パフォーマンスが自動的に最適化され、開発者はコンテンツ作成に集中し、高性能なウェブサイトを迅速に提供できます。

SKILL.md

Astro Usage Guide

Always consult docs.astro.build for code examples and latest API.

Astro is the web framework for content-driven websites.


Quick Reference

File Location

CLI looks for astro.config.js, astro.config.mjs, astro.config.cjs, and astro.config.ts in: ./. Use --config for custom path.

CLI Commands

  • npx astro dev - Start the development server.
  • npx astro build - Build your project and write it to disk.
  • npx astro check - Check your project for errors.
  • npx astro add - Add an integration.
  • npmx astro sync - Generate TypeScript types for all Astro modules.

Re-run after adding/changing plugins.

Project Structure

Astro leverages an opinionated folder layout for your project. Every Astro project root should include some directories and files. Reference project structure docs.

  • src/* - Your project source code (components, pages, styles, images, etc.)
  • src/pages - Required sub-directory in your Astro project. Without it, your site will have no pages or routes!
  • src/components - It is common to group and organize all of your project components together in this folder. This is a common convention in Astro projects, but it is not required. Feel free to organize your components however you like!
  • src/layouts - Just like src/components, this directory is a common convention but not required.
  • src/styles - It is a common convention to store your CSS or Sass files here, but this is not required. As long as your styles live somewhere in the src/ directory and are imported correctly, Astro will handle and optimize them.
  • public/* - Your non-code, unprocessed assets (fonts, icons, etc.). The files in this folder will be copied into the build folder untouched, and then your site will be built.
  • package.json - A project manifest.
  • astro.config.{js,mjs,cjs,ts} - An Astro configuration file. (recommended)
  • tsconfig.json - A TypeScript configuration file. (recommended)

Core Config Options

OptionNotes
siteYour final, deployed URL. Astro uses this full URL to generate your sitemap and canonical URLs in your final build.

Adapters

Deploy to your favorite server, serverless, or edge host with build adapters. Use an adapter to enable on-demand rendering in your Astro project.

Add Node.js adapter using astro add:

npx astro add node --yes

Add Cloudflare adapter using astro add:

npx astro add cloudflare --yes

Add Netlify adapter using astro add:

npx astro add netlify --yes

Add Vercel adapter using astro add:

npx astro add vercel --yes

Other Community adapters

Resources

ユーザーレビュー (0)

レビューを書く

効果
使いやすさ
ドキュメント
互換性

レビューなし

統計データ

インストール数6.4K
評価4.5 / 5.0
バージョン
更新日2026年5月23日
比較事例1 件

ユーザー評価

4.5(72)
5
17%
4
49%
3
31%
2
4%
1
0%

この Skill を評価

0.0

対応プラットフォーム

🔧Claude Code
🔧OpenClaw
🔧OpenCode
🔧Codex
🔧Gemini CLI
🔧GitHub Copilot
🔧Amp
🔧Kimi CLI

タイムライン

作成2026年3月16日
最終更新2026年5月23日