AgentSkillsCN

astro-setup

Astro项目初始化与配置模式。当设置新Astro项目或配置Astro功能时使用。

SKILL.md
--- frontmatter
name: astro-setup
description: Astro project initialization and configuration patterns. Use when setting up new Astro projects or configuring Astro features.

Astro Setup Skill

Project Initialization

bash
npm create astro@latest project-name -- --template minimal --typescript strict
cd project-name

Essential Integrations

bash
npx astro add react
npx astro add mdx
npx astro add tailwind

Configuration Pattern

javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import mdx from '@astrojs/mdx';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  site: 'https://username.github.io',
  base: '/repo-name', // or '/' for user pages
  integrations: [react(), mdx(), tailwind()],
  output: 'static', // Required for GitHub Pages
  image: {
    service: {
      entrypoint: 'astro/assets/services/sharp'
    }
  }
});

Content Collections

Content collections go in src/content/ with a config.ts file defining schemas using Zod.

Best Practices

  • Use output: 'static' for GitHub Pages
  • Configure site and base for proper asset paths
  • Enable image optimization
  • Keep integrations minimal