القائمة
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.