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.

Multi-Module Generator (Astro 6)

This skill guides the creation of modular, typesafe features using the latest Astro 6 Beta APIs and Tailwind 4.

1. Directory Structure

All feature-based modules should live in src/modules/:

src/modules/
└── [feature-name]/
    ├── components/
    ├── layouts/
    └── pages/

2. Content Layer Configuration

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(),
    })
  }),
};

3. Dynamic Logic & Backend (Actions)

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 };
    }
  })
};

4. Standard Layout

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>

4. Workflow Integration

When generating a module, always:

Initialize the data/ folder with a sample entry.
Run astro check to verify types.
Use use context7 to fetch the latest 2026 syntax for Server Islands or Actions if needed.

Más de este repositorio

mismo repositorio

smile-savers-elite

rahlplx/New-Smile-Savers

Master agentic skill for the Smile Savers project. Enforces 'Council of Experts' standards for Astro 6, Tailwind 4, and Edge-Native excellence.

2026-01-290

astro-5-component-generator

rahlplx/New-Smile-Savers

Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.

2026-01-290

context7-documentation-fetcher

rahlplx/New-Smile-Savers

Fetch up-to-date library documentation for Astro, Tailwind CSS, TypeScript, and other Smile Savers project dependencies using Context7 MCP

2026-01-290

performance-profiling

rahlplx/New-Smile-Savers

Performance profiling principles. Measurement, analysis, and optimization techniques.

2026-01-290

python-patterns

rahlplx/New-Smile-Savers

Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying.

2026-01-290

seo-fundamentals

rahlplx/New-Smile-Savers

SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles.

2026-01-290

Multi-Module Generator (Astro 6)

This skill guides the creation of modular, typesafe features using the latest Astro 6 Beta APIs and Tailwind 4.

1. Directory Structure

All feature-based modules should live in src/modules/:

src/modules/ └── [feature-name]/ ├── components/ ├── layouts/ └── pages/

2. Content Layer Configuration

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(), }) }), };

3. Dynamic Logic & Backend (Actions)

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 }; } }) };

4. Standard Layout

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>

4. Workflow Integration

When generating a module, always:

Initialize the data/ folder with a sample entry.

Run astro check to verify types.

Use use context7 to fetch the latest 2026 syntax for Server Islands or Actions if needed.