メニュー
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Specialist agent for managing the AI workforce's own internal health, portability, and continuous learning. Auto-implements lessons into core protocols.
UI/UX design specialist for Astro 6 + Tailwind 4 + DaisyUI 5 stack. Provides design decisions, component layouts, and accessibility guidance.
Autonomous development agent for Astro 6 projects. Handles end-to-end feature implementation with minimal human intervention.
Pragmatic coding standards - concise, direct, no over-engineering, no unnecessary comments
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
Main application building orchestrator. Creates full-stack applications from natural language requests. Determines project type, selects tech stack, coordinates agents.
| version | 1.0.0 |
| name | Astro 5 Component Generator |
| description | Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands. |
⚠️ CORE DIRECTIVE: Astro 5 is "Content-Driven" and "Server-First". Use the Content Layer for data and Server Islands for dynamic UI.
Stop using fs or import. Use the Content Layer for typesafe data.
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
const services = defineCollection({
loader: glob({ pattern: "**/*.md", base: "./src/data/services" }),
schema: z.object({
title: z.string(),
price: z.number().optional(),
})
});
Dynamic content shouldn't block the initial paint. Use server:defer.
<!-- UserStatus.astro -->
<div transition:persist>
{isLoggedIn ? <Avatar /> : <LoginBtn />}
</div>
<!-- Usage -->
<UserStatus server:defer>
<div slot="fallback">Loading user...</div>
</UserStatus>
Don't build API routes manually for form handling. Use Actions.
// src/actions/index.ts
import { defineAction, z } from 'astro:actions';
export const server = {
subscribe: defineAction({
input: z.object({ email: z.string().email() }),
handler: async (input) => {
// DB logic here
return { success: true };
}
})
};
ALWAYS use <Image /> or <Picture />.
import { Image } from 'astro:assets';
import myImage from '../assets/smile.jpg';
<Image src={myImage} alt="Happy patient" width={800} format="avif" />
Enable native-like navigation.
---
import { ClientRouter } from 'astro:transitions';
---
<head>
<ClientRouter />
</head>