Menu
Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional 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.