Generate Astro framework documentation and project guides
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 75/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Generate comprehensive documentation for Astro framework projects, leveraging Astro's content-driven architecture, islands pattern, and zero-JS-by-default philosophy.
This skill helps you create, structure, and maintain documentation for Astro projects. It understands Astro's unique architecture (islands, server-first rendering, content collections) and generates documentation that follows best practices for content-driven websites.
When the user requests Astro documentation assistance, follow these steps:
1. **Analyze the project structure**
- Check for `astro.config.mjs` or `astro.config.ts` to identify an Astro project
- Identify UI frameworks in use (React, Vue, Svelte, Solid, Preact, etc.)
- Look for content collections in `src/content/`
- Check for integrations (MDX, Markdoc, Partytown, etc.)
- Note server rendering mode (static, hybrid, or server)
2. **Understand documentation requirements**
- Ask what type of documentation is needed:
- Project README
- Component documentation
- Content collection schemas
- Routing and page structure
- Integration setup guides
- Deployment documentation
- API endpoint documentation
3. **Generate documentation following Astro conventions**
- Use Markdown format (`.md` or `.mdx` if MDX is installed)
- Structure content for Astro's file-based routing
- Document islands architecture patterns (client:* directives)
- Include TypeScript types for content collections
- Document server-first rendering strategies
- Explain any UI framework integrations
- Note performance optimizations (zero JS by default)
4. **Include Astro-specific details**
- **Frontmatter syntax**: Document YAML frontmatter for pages and collections
- **Component patterns**: Explain `.astro` component structure (frontmatter script + template)
- **Client directives**: Document when and why `client:load`, `client:idle`, `client:visible` are used
- **Content collections**: Include Zod schemas and collection configuration
- **Routing**: Explain file-based routing, dynamic routes, and catch-all routes
- **Islands**: Document interactive component boundaries
- **Build output**: Note static vs server rendering for each route
5. **Structure documentation files**
- Place in `docs/` or `src/pages/docs/` (for built-in documentation site)
- Use logical hierarchy (getting-started, components, content, deployment)
- Create index pages for navigation
- Link related documentation pages
- Include code examples with proper syntax highlighting
6. **Add code examples**
- Show `.astro` component examples with frontmatter and template sections
- Include content collection schemas with Zod validation
- Demonstrate island hydration patterns
- Provide configuration snippets (astro.config.mjs)
- Show integration usage examples
7. **Document performance considerations**
- Explain zero-JS-by-default philosophy
- Document when client-side JavaScript is added (and why)
- Note server-first rendering benefits
- Include bundle size considerations
- Mention view transitions if used
8. **Include deployment guidance**
- Document the build command (`astro build`)
- Note output directory (`dist/`)
- List supported adapters (Node, Vercel, Netlify, Cloudflare, etc.)
- Include environment variable setup
- Provide deployment platform instructions
```markdown
A reusable button component with optional client-side interactivity.
\`\`\`astro
---
import Button from '@/components/Button.astro';
---
<Button>Click me</Button>
<Button client:idle onclick="alert('Clicked!')">Interactive Button</Button>
\`\`\`
By default, this component renders as static HTML with zero JavaScript. Use a `client:*` directive only when interactivity is needed.
```
```markdown
Blog posts are managed as a content collection with type-safe frontmatter validation.
\`\`\`typescript
// src/content/config.ts
import { defineCollection, z } from 'astro:content';
export const collections = {
blog: defineCollection({
schema: z.object({
title: z.string(),
pubDate: z.date(),
author: z.string(),
tags: z.array(z.string()).optional(),
}),
}),
};
\`\`\`
Create a new file in `src/content/blog/`:
\`\`\`markdown
---
title: "My First Post"
pubDate: 2024-01-15
author: "Jane Doe"
tags: ["astro", "webdev"]
---
Your content here...
\`\`\`
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/astro-documentation-generator/raw