메뉴
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
| 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>
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.