SkillsAdd

terminalskills/skills

astro

>- Assists with building content-driven websites using Astro's island architecture. Use when creating static sites, blogs, documentation, or marketing pages that ship zero JavaScript by default. Trigger words: astro, static site, island architecture, content collections, SSG, hybrid rendering, astro components.

First seen Mar 17, 2026

Installation

$ npx skills add terminalskills/skills --skill astro
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

clerk-astro-patterns Similar name
clerk/skills

Astro patterns with Clerk — middleware, SSR pages, island components, API routes, static vs SSR…

11.6K installs
astro Similar name
astrolicious/agent-skills

Skill for building with the Astro web framework.

14.6K installs
astro-framework Similar name
delineas/astro-framework-agents

Astro framework specialist for building fast, content-driven websites with islands architecture.

2K installs
astropy Similar name
k-dense-ai/scientific-agent-skills

Core Python library for astronomy and astrophysics workflows that need Astropy APIs, including …

1.3K installs
managing-astro-local-env Similar name
astronomer/agents

Manage local Airflow environment with Astro CLI (Docker and standalone modes). Use when the use…

990 installs
setting-up-astro-project Similar name
astronomer/agents

Initialize and configure Astro/Airflow projects. Use when the user wants to create a new projec…

979 installs

Also in this package

Other skills from terminalskills/skills · top by installs.

npx skills add terminalskills/skills
instagram-marketing 350 api-tester 139 claude-hud 112 coolify 82 directus 50 davinci-resolve 42 agent-memory 29 playwright-testing 25 claude-mem 23 blender-scripting 20

Browse all from terminalskills/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 146
License LICENSE
Default branch main
Open issues 1
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseApache-2.0
CompatibilityRequires Node.js 18+
More metadata
author
terminal-skills
version
1.0.0
category
development
tags
["astro","static-site","island-architecture","ssg","content"]

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,895 B
  • docs SUMMARY.md 322 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 6 installs

SKILL.md

Astro

Overview

Astro is a web framework for building content-driven websites that ships zero JavaScript by default. Its island architecture hydrates only interactive components, achieving excellent Lighthouse scores while supporting React, Vue, Svelte, or any UI framework where interactivity is needed.

Instructions

  • When creating pages, use file-based routing in src/pages/ with .astro, .md, or .mdx files, and organize shared structure in src/layouts/.
  • When adding interactivity, use client directives on framework components: prefer client:visible or client:idle over client:load since most components do not need immediate hydration.
  • When managing content, define Content Collections in src/content/ with strict Zod schemas using defineCollection(), and query with getCollection() and getEntry().
  • When choosing rendering modes, default to static (SSG) for marketing and content pages, use output: "server" for dynamic pages, or use hybrid rendering with per-page export const prerender = false.
  • When optimizing images, use the <Image> component from astro:assets for automatic format conversion (WebP/AVIF), resizing, and lazy loading instead of raw <img> tags.
  • When adding page transitions, enable View Transitions with <ViewTransitions /> for SPA-like navigation without shipping a client-side router.
  • When integrating UI frameworks, install the appropriate integration (@astrojs/react, @astrojs/vue, @astrojs/svelte) and use Astro components for static content, reaching for framework components only when interactivity is required.

Examples

Example 1: Build a blog with Content Collections

User request: "Create an Astro blog with type-safe Markdown content"

Actions:

  1. Define a blog Content Collection with Zod schema for frontmatter (title, date, tags, author)
  2. Create dynamic route src/pages/blog/[slug].astro with getStaticPaths()
  3. Build blog index page querying getCollection("blog") with sorting
  4. Add layout with SEO meta tags, navigation, and View Transitions

Output: A statically generated blog with validated content, clean URLs, and smooth page transitions.

Example 2: Add interactive components to a static site

User request: "Add a React search component to my Astro documentation site"

Actions:

  1. Install @astrojs/react integration
  2. Create the React search component with state and event handling
  3. Add the component to the page with client:idle directive
  4. Pass static data as props from the Astro page frontmatter

Output: A documentation site that is fully static except for the interactive search island.

Guidelines

  • Use Astro components (.astro) for static content; only use React/Vue/Svelte when interactivity is needed.
  • Default to client:visible or client:idle over client:load for hydration directives.
  • Define Content Collections with strict Zod schemas to catch content errors at build time.
  • Use astro:assets <Image> over raw <img> tags for automatic optimization.
  • Keep layouts thin with shared <head>, navigation, and footer; put page-specific content in pages.
  • Use hybrid rendering: static for marketing pages, SSR only for personalized or dynamic pages.
  • Enable View Transitions for SPA-like navigation without shipping a router.