skills.rest
zachbwh
zachbwhCOMMUNITY
Explore all skills by this author →
Website𝕏@zachbwhGitHub

astro-patterns

Codify idiomatic Astro 5 patterns for linking, assets, content collections, and routing.

2|Updated Jul 21, 2017
Search Tags:#routing#patterns#images#links#assets#astro
One-click install
npx skills add https://github.com/zachbwh/zachhuxford.net --skill astro-patterns-zachbwh
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-patterns
Source: https://github.com/zachbwh/zachhuxford.net/tree/main/.claude/skills/astro-patterns
Command: npx skills add https://github.com/zachbwh/zachhuxford.net --skill astro-patterns-zachbwh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill codifies idiomatic Astro patterns for linking, images and assets, content collections, and routing to ensure consistent, convention-aligned implementations.

Core Features & Use Cases

  • Provides guidance on idiomatic linking using root-relative paths and consistent navigation structures.
  • Guides image and asset handling across src/assets, public assets, and content collections for consistent rendering and caching.
  • Supports content collection queries and routing conventions to simplify page generation and URL structure.

Quick Start

Create a new Astro page following the linking, images/assets, and routing patterns described.

Frequently Asked Questions about astro-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure links and routing in an Astro project?▼

Astro routing uses file-based paths in the src/pages directory, and idiomatic linking relies on root-relative URLs to ensure consistent navigation across generated pages.

What is the best way to manage images and assets in Astro?▼

Astro asset management distinguishes between src/assets for processed images and public for static files, ensuring consistent rendering and caching across content collections and pages.

How do I query content collections to generate Astro pages?▼

Astro content collections allow you to query local markdown or data files, enabling dynamic page generation and simplified URL structures through defined routing conventions.

Can I use these Astro linking and asset patterns with Astro 5 templates?▼

Yes, these idiomatic Astro patterns for linking, images, and routing are designed for building Astro 5 sites and templates, ensuring convention-aligned implementations.

Why are my Astro images not rendering consistently across pages?▼

Inconsistent Astro image rendering often occurs when assets are misplaced between src/assets and the public directory instead of following codified asset handling conventions.

Related Skills

Explore More Software Engineering Skills→
cshyangcshyang

trigger-setup

Initialize Trigger.dev with npx trigger init and generate trigger.config.ts.

Community
Intermediate
7Lemaitre77Lemaitre7

astro

Create .astro components and configure islands for content-driven websites.

Community
Intermediate
dt418dt418

astro-blog

Automate Astro blog setup with content collections, RSS feeds, and sitemaps.

Community
Advanced
Baphomet480Baphomet480

cloudflare-pages

Deploy static websites to Cloudflare Pages with custom domains and CI/CD.

Community
Intermediate