skills.rest
bluewaves-creations
bluewaves-creationsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

astro-patterns

Implement Astro 5 hybrid SSR patterns for pages, components, and API routes.

1|Updated Feb 21, 2026
Search Tags:#web development#frontend#routing#components#astro#ssr
One-click install
npx skills add https://github.com/bluewaves-creations/website-foundation --skill astro-patterns-bluewaves-creations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-patterns
Source: https://github.com/bluewaves-creations/website-foundation/tree/main/.claude/skills/astro-patterns
Command: npx skills add https://github.com/bluewaves-creations/website-foundation --skill astro-patterns-bluewaves-creations

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidelines and examples for leveraging Astro 5's hybrid rendering capabilities, ensuring consistent and efficient development of pages, components, and API routes.

Core Features & Use Cases

  • Rendering Modes: Understand and implement static (prerendered) vs. server-side rendering (SSR) for optimal performance.
  • File-Based Routing: Learn how file structure in src/pages/ maps directly to URL routes, including dynamic routes.
  • Component & Layout Patterns: Follow established patterns for creating reusable Astro components with typed Props and utilizing a base layout for consistent structure.
  • Client-Side Scripting: Differentiate between bundled and inline scripts for effective client-side interactivity.
  • Use Case: When adding a new blog post, you'll use the [slug].astro pattern for dynamic routing and ensure it's set to prerender = true for static generation.

Quick Start

Use the astro-patterns skill to add a new static page to the website.

Frequently Asked Questions about astro-patterns

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

FAQPage Schema
How do I route dynamic pages in Astro?▼

Dynamic routing in Astro uses bracket syntax like `[slug].astro` within the `src/pages/` directory. You must implement the `getStaticPaths` function to define which dynamic route parameters generate static pages during the build process.

How do I configure static vs. SSR rendering modes in Astro 5?▼

Astro 5 supports hybrid rendering by setting `prerender = true` for static generation or leaving it false for server-side rendering. This allows you to mix prerendered pages and SSR pages within the same project.

What is the best way to structure layouts and components in Astro?▼

Astro components should use typed Props for reusability, while base layouts provide consistent page structures. This pattern ensures maintainable component development and standardized rendering across your web application.

How do I add client-side scripts to an Astro project?▼

Astro differentiates between bundled and inline scripts for client-side interactivity. Bundled scripts are processed and optimized by the build system, while inline scripts are included directly in the HTML output.

Can I define API routes using file-based routing in Astro?▼

Yes, Astro file-based routing maps files in `src/pages/` directly to URL routes, including API endpoints. This allows you to define server-side API routes alongside your standard page components.

Related Skills

Explore More Software Engineering Skills→
svssdevasvssdeva
1

astro

Configure Astro projects with src/pages routing and adapter-based deployments.

Community
Intermediate
amplitudeamplitude
28

integration-astro-hybrid

Integrate Amplitude analytics into Astro hybrid projects with client and server events.

Official
Intermediate
NITRR-OfficialNITRR-Official
4

frontend-patterns

Guide React component development with Next.js and Tailwind CSS.

Official
Intermediate
AmidVoshakulAmidVoshakul

sveltekit

Manage file-based routing, SSR, and API routes in SvelteKit applications.

Community
Advanced