home / skills / ehtbanton / claudeskillsrepo / astro-page-generator

astro-page-generator skill

safe

This skill generates complete Astro pages using islands architecture and content collections, delivering ready-to-use .astro files.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill astro-page-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

605 B

---
name: astro-page-generator
description: Generate Astro page components with islands architecture. Triggers on "create astro page", "generate astro component", "astro file", ".astro page".
---

# Astro Page Generator

Generate Astro pages with islands architecture and content collections.

## Output Requirements

**File Output:** `*.astro` page files
**Format:** Valid Astro component
**Standards:** Astro 4.x

## When Invoked

Immediately generate a complete Astro page.

## Example Invocations

**Prompt:** "Create Astro blog post page"
**Output:** Complete `[slug].astro` with content collection.

Overview

This skill generates complete Astro page components using the islands architecture and content collections. It produces valid .astro files compatible with Astro 4.x and outputs ready-to-drop page files such as [slug].astro. The focus is on generating working page markup, frontmatter, islands imports, and collection-aware routing.

How this skill works

When triggered, the skill creates a full Astro page component including frontmatter, imports for interactive islands, content collection hooks, and template markup. It ensures Astro 4.x syntax, proper file naming (e.g., [slug].astro), and places interactive UI as client: directives on island components. The result is a single .astro file ready to use in a project with content collections configured.

When to use it

You need a ready-to-use Astro page for blog posts, docs, or marketing pages
You want pages that include interactive islands (hydrated components) alongside static content
You want a quick scaffold for a collection-driven route like [slug].astro
You need Astro 4.x compliant page files with frontmatter and imports
You want consistent page structure for multiple similar pages

Best practices

Provide the desired route name or slug when invoking the generator (e.g., blog post, product page)
Specify which interactive components should be islands and their hydration strategy (client:load, client:idle, etc.)
Ensure the project has content collections configured if you request collection-aware pages
Review and adapt generated frontmatter fields (title, date, tags, draft) to match your collection schema
Keep island components small and focused to minimize client-side JS

Example use cases

Create a [slug].astro blog post page that pulls content from a posts collection and includes a comments island
Generate a product detail page with a client:load image gallery island and a static description from collections
Scaffold a documentation page template that uses a table-of-contents island and content collection metadata
Produce marketing landing pages where hero and signup form are islands and the body is static MD content
Quickly create author profile pages driven by an authors collection with a small interactive follow button island

FAQ

What file does this skill output?

It outputs a single .astro page file, typically named for the route (for example [slug].astro).

Which Astro version is supported?

Generated files follow Astro 4.x syntax and conventions.