菜单
Scaffold Astro components, pages, and layouts with best practices. Use when creating new .astro files or converting designs to components.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Guide complete integration setup including post-install configuration. Use when adding UI frameworks, adapters, or tooling to an Astro project.
Set up and configure Astro content collections with the current Content Layer API and type-safe schemas. Use when creating blogs, docs, or any structured content.
Search and retrieve Astro documentation using the Astro Docs MCP. Use when answering questions about Astro APIs, configuration, integrations, or best practices.
Guide migration to Astro from other frameworks or between Astro versions. Use when converting Next.js, Nuxt, Gatsby projects or upgrading Astro.
| name | create-component |
| description | Scaffold Astro components, pages, and layouts with best practices. Use when creating new .astro files or converting designs to components. |
.astro components, pages, or layoutsAsk or infer what type of file is needed:
| Type | Location | Purpose |
|---|---|---|
| Component | src/components/ | Reusable UI element |
| Page | src/pages/ | Route endpoint |
| Layout | src/layouts/ | Page wrapper with common structure |
| Content | src/content/ | Markdown/MDX content entry |
Before scaffolding, clarify:
---
interface Props {
title: string
variant?: 'primary' | 'secondary'
}
const { title, variant = 'primary' } = Astro.props
---
<div class:list={['component', variant]}>
<h2>{title}</h2>
<slot />
</div>
<style>
.component {
/* Scoped styles */
}
</style>
---
import Layout from '../layouts/Layout.astro'
const pageTitle = 'Page Title'
---
<Layout title={pageTitle}>
<main>
<h1>{pageTitle}</h1>
<slot />
</main>
</Layout>
---
interface Props {
title: string
description?: string
}
const { title, description } = Astro.props
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content={description} />
<title>{title}</title>
</head>
<body>
<slot />
</body>
</html>
Button.astro, NavBar.astro)class:list for conditional classesBefore finalizing, verify:
alt="" if decorative)For pages with dynamic routes:
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content'
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()
---
<Layout title={post.data.title}>
<article>
<h1>{post.data.title}</h1>
<Content />
</article>
</Layout>
When client-side JS is needed:
---
import Counter from '../components/Counter.tsx'
---
<!-- Only hydrate when visible in viewport -->
<Counter client:visible initialCount={0} />
Choose the appropriate client directive based on priority and use case.