Menu
Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.