菜单
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
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.
| 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>