Menu
Scaffold Astro components, pages, and layouts with best practices. Use when creating new .astro files or converting designs to components.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
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.
Based on SOC occupation classification
| 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.