القائمة
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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>
Master agentic skill for the Smile Savers project. Enforces 'Council of Experts' standards for Astro 6, Tailwind 4, and Edge-Native excellence.
Fetch up-to-date library documentation for Astro, Tailwind CSS, TypeScript, and other Smile Savers project dependencies using Context7 MCP
Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards.
Performance profiling principles. Measurement, analysis, and optimization techniques.
Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying.
SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles.