菜单
Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards.
用 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.
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
Fetch up-to-date library documentation for Astro, Tailwind CSS, TypeScript, and other Smile Savers project dependencies using Context7 MCP
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 | multi-module-generator |
| description | Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards. |
This skill guides the creation of modular, typesafe features using the latest Astro 6 Beta APIs and Tailwind 4.
All feature-based modules should live in src/modules/:
src/modules/
└── [feature-name]/
├── components/
├── layouts/
└── pages/
Astro 6 relies on the Content Layer. Always define typesafe schemas in src/content/config.ts.
import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';
export const collections = {
[feature-name]: defineCollection({
loader: glob({ pattern: "**/*.md", base: "./src/data/[feature-name]" }),
schema: z.object({
title: z.string(),
pubDate: z.date(),
description: z.string(),
})
}),
};
For form handling or dynamic data, use the Astro Actions API.
// src/actions/index.ts
import { defineAction, z } from 'astro:actions';
export const server = {
[feature-action]: defineAction({
input: z.object({ id: z.string() }),
handler: async (input) => {
// Logic here
return { success: true };
}
})
};
Each module should have a dedicated layout that imports the project's global Tailwind 4 stylesheet.
---
import '../../styles/global.css';
import { ClientRouter } from 'astro:transitions';
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<ClientRouter />
<title>{title}</title>
</head>
<body class="bg-white dark:bg-neutral-950 font-sans">
<slot />
</body>
</html>
When generating a module, always:
data/ folder with a sample entry.astro check to verify types.use context7 to fetch the latest 2026 syntax for Server Islands or Actions if needed.