メニュー
Astro framework: content-first sites, islands architecture, MDX collections, Cloudflare Workers/Pages deployment, View Transitions, SEO
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/UitbreidenOS/UitKit --skill astroコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Guidelines and instructions for Agent execution state rollback rules
Guidelines and instructions for Agent execution step counters limits
Guidelines and instructions for Agent execution timeout limits setups
SOC 職業分類に基づく
SKILL.md を表示中
| name | astro |
| description | Astro framework: content-first sites, islands architecture, MDX collections, Cloudflare Workers/Pages deployment, View Transitions, SEO |
npm create astro@latest my-site
# Options: Blog / Documentation / Empty
# TypeScript: Strict recommended
# Dependencies: Yes
# Add integrations
npx astro add tailwind react cloudflare
src/
├── content/
│ ├── config.ts # collection schemas
│ └── blog/ # .md / .mdx files
│ └── hello-world.md
├── layouts/
│ └── BlogPost.astro
├── pages/
│ ├── index.astro # becomes /
│ ├── blog/
│ │ ├── index.astro # /blog
│ │ └── [slug].astro # /blog/[slug]
│ └── rss.xml.ts # RSS feed
├── components/
│ ├── Header.astro # server-rendered
│ └── Counter.tsx # React island (client:load)
└── styles/
└── global.css
// src/content/config.ts
import { defineCollection, z } from 'astro:content'
const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(),
tags: z.array(z.string()).default([]),
draft: z.boolean().default(false),
}),
})
export const collections = { blog }
---
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content'
import BlogLayout from '../../layouts/BlogPost.astro'
export async function getStaticPaths() {
const posts = await getCollection('blog', ({ data }) => !data.draft)
return posts.map(post => ({
params: { slug: post.slug },
props: post,
}))
}
const post = Astro.props
const { Content } = await post.render()
---
<BlogLayout frontmatter={post.data}>
<Content />
</BlogLayout>
---
// Astro components: zero JS (server-rendered HTML only)
// React/Vue/Svelte components: hydrate when needed
---
<!-- Server-rendered — no JS shipped -->
<Header />
<ArticleContent />
<!-- Hydrate immediately on page load -->
<SearchBar client:load />
<!-- Hydrate when visible (lazy) -->
<CommentsSection client:visible />
<!-- Hydrate only on interaction -->
<ShareMenu client:idle />
<!-- Never hydrate (static) -->
<StaticWidget />
// astro.config.mjs
import { defineConfig } from 'astro/config'
import cloudflare from '@astrojs/cloudflare'
export default defineConfig({
output: 'server', // or 'hybrid' — static + server on demand
adapter: cloudflare({
mode: 'directory', // Cloudflare Pages Functions
// or 'advanced' for Cloudflare Workers
}),
})
# Deploy to Cloudflare Pages
npm run build
# Then connect repo to Cloudflare Pages dashboard
# Build command: npm run build
# Output dir: dist/
Cloudflare Workers (edge SSR):
// src/middleware.ts — runs at the edge
import type { MiddlewareHandler } from 'astro'
export const onRequest: MiddlewareHandler = async (context, next) => {
// Access Cloudflare bindings: KV, R2, D1, AI
const { env } = context.locals.runtime
const cache = await env.MY_KV.get('cached-data')
return next()
}
---
// src/layouts/Base.astro
import { ViewTransitions } from 'astro:transitions'
---
<html>
<head>
<ViewTransitions />
</head>
<body>
<slot />
</body>
</html>
<!-- Custom transition per element -->
<h1 transition:name="hero-title">Blog Post Title</h1>
<img transition:name="hero-image" src={heroImage} />
<!-- Elements with matching names animate between pages -->
---
// components/SEO.astro
const {
title,
description,
image = '/og-default.png',
canonicalURL = Astro.url,
} = Astro.props
---
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.site)} />
<meta property="og:url" content={canonicalURL} />
<meta name="twitter:card" content="summary_large_image" />
// src/pages/rss.xml.ts
import rss from '@astrojs/rss'
import { getCollection } from 'astro:content'
export async function GET(context) {
const posts = await getCollection('blog', p => !p.data.draft)
return rss({
title: 'My Blog',
description: 'Latest posts',
site: context.site,
items: posts.map(post => ({
title: post.data.title,
pubDate: post.data.pubDate,
description: post.data.description,
link: `/blog/${post.slug}/`,
})),
})
}
User: Build a developer blog with Astro — MDX posts with code highlighting, tag filtering, dark mode, RSS feed, and deploy to Cloudflare Pages.
Expected output:
src/content/config.ts — blog collection with title, description, pubDate, tags, draft schemasrc/pages/blog/[slug].astro — dynamic post page with getStaticPathssrc/pages/blog/[tag].astro — tag filtering pagesrc/components/SEO.astro — OG tags, canonical URLsrc/pages/rss.xml.ts — RSS feed endpointastro.config.mjs — Cloudflare adapter, Tailwind, MDX, syntax highlighting