Astro

Automate and integrate Astro static site building and deployment workflows

Category: productivity Source: astrolicious/agent-skills

Astro is a community skill for building content-driven websites using the Astro framework, covering component authoring, content collections, static site generation, server-side rendering, and integration with UI frameworks for high-performance web projects.

What Is This?

Overview

Astro provides patterns for building fast websites that ship zero JavaScript by default. It covers Astro component syntax with frontmatter scripts and HTML templates for page authoring, content collections with schema validation for managing Markdown and MDX files, static site generation that pre-renders pages at build time for optimal performance, partial hydration through island architecture for adding interactivity only where needed, and framework integration that lets developers use React, Vue, or Svelte components within Astro pages. The skill enables developers to build content sites that load fast by sending minimal JavaScript to the browser while supporting dynamic islands for interactive features.

Who Should Use This

This skill serves web developers building blogs, documentation sites, and marketing pages where performance matters, teams migrating from heavier frameworks to a content-first approach, and developers who want to use multiple UI frameworks together in a single project.

Why Use It?

Problems It Solves

Traditional JavaScript frameworks ship large bundles to the browser even for content-heavy pages that need minimal interactivity. Managing Markdown content with frontmatter metadata requires custom parsing and validation logic. Adding interactive components to static pages typically requires committing to a single UI framework. Achieving fast page loads with server-rendered HTML while preserving client-side interactivity needs careful architecture.

Core Highlights

Zero JavaScript default ships pure HTML with no client-side bundle for static content. Island architecture hydrates only interactive components while keeping the rest static. Content collections provide typed schemas for Markdown and MDX files. Multi-framework support renders React, Vue, and Svelte components on the same page.

How to Use It?

Basic Usage

---
// src/pages/index.astro
import Layout from
  '../layouts/Layout.astro';
import Card from
  '../components/Card.astro';

const features = [
  { title: 'Fast',
    desc: 'Zero JS by default' },
  { title: 'Flexible',
    desc: 'Use any framework' },
  { title: 'Content',
    desc: 'Built-in collections' },
];
---

<Layout title="Home">
  <main>
    <h1>Welcome to My Site</h1>
    <div class="grid">
      {features.map((f) => (
        <Card
          title={f.title}
          body={f.desc}
        />
      ))}
    </div>
  </main>
</Layout>

<style>
  .grid {
    display: grid;
    grid-template-columns:
      repeat(3, 1fr);
    gap: 1rem;
  }
</style>

Real-World Examples

---
// src/pages/blog/[...slug].astro
import { getCollection } from
  'astro:content';
import Layout from
  '../../layouts/Layout.astro';

export async function
  getStaticPaths() {
  const posts = await getCollection(
    'blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;
const { Content } =
  await post.render();
---

<Layout title={post.data.title}>
  <article>
    <h1>{post.data.title}</h1>
    <time>
      {post.data.date
        .toLocaleDateString()}
    </time>
    <div class="tags">
      {post.data.tags.map((tag) => (
        <span class="tag">{tag}</span>
      ))}
    </div>
    <Content />
  </article>
</Layout>

<style>
  article {
    max-width: 65ch;
    margin: 0 auto;
    padding: 2rem;
  }
  .tag {
    background: #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
  }
</style>

Advanced Tips

Use the client:visible directive to hydrate interactive components only when they scroll into view, reducing initial page load. Define content collection schemas with Zod for type-safe frontmatter validation that catches errors at build time. Use Astro middleware for request-level logic like authentication checks and redirects in SSR mode.

When to Use It?

Use Cases

Build a documentation site with content collections, full-text search, and versioned pages. Create a marketing website with static pages and interactive React islands for forms and animations. Implement a blog platform with Markdown content, tag filtering, and RSS feed generation.

Important Notes

Requirements

Node.js 18 or later with the Astro CLI installed. UI framework integrations for React, Vue, or Svelte if using those components. A deployment target that supports static files or SSR.

Usage Recommendations

Do: use Astro components for static content and reserve framework components for interactive features. Define content collection schemas to validate frontmatter data at build time. Choose appropriate hydration directives to minimize client-side JavaScript.

Don't: hydrate all components with client:load when most content is static and needs no interactivity. Mix multiple UI frameworks in a single island when one framework suffices. Skip image optimization when Astro provides built-in image processing.

Limitations

Client-side state management across islands requires external stores since each island hydrates independently. Some UI framework features like context providers do not work across island boundaries. Build times increase with content collection size for very large static sites.