skills.rest
fm-dev-mx
fm-dev-mxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

astro-patterns

Apply idiomatic Astro patterns for data fetching, image optimization, and partial hydration.

Updated Jun 21, 2024
Search Tags:#performance#data fetching#optimization#astro#component architecture#hydration
One-click install
npx skills add https://github.com/fm-dev-mx/celebra-me --skill astro-patterns-fm-dev-mx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-patterns
Source: https://github.com/fm-dev-mx/celebra-me/tree/main/.agent/skills/astro-patterns
Command: npx skills add https://github.com/fm-dev-mx/celebra-me --skill astro-patterns-fm-dev-mx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that Astro components are built using idiomatic patterns for optimal performance, maintainability, and effective use of framework features.

Core Features & Use Cases

  • Data Fetching: Implements strategies for static content (Content Collections) and dynamic content (BFF pattern with Server Islands or client-side fetching).
  • Partial Hydration: Guides the use of client directives (client:load, client:visible, client:idle, client:media) for efficient interactivity.
  • Image Optimization: Enforces the use of astro:assets for responsive and performant images.
  • Component Architecture: Promotes the "Islands" mental model and typed props interfaces.

Quick Start

Apply the astro-patterns skill to refactor the GuestStatus component to use server:defer for dynamic loading.

Frequently Asked Questions about astro-patterns

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

FAQPage Schema
How do I optimize Astro component architecture for better performance?▼

Astro partial hydration uses client directives like `client:load`, `client:visible`, `client:idle`, and `client:media` to load JavaScript only when needed, reducing unnecessary client-side execution and improving page load performance.

What is the best way to fetch dynamic data in Astro without losing static performance?▼

The best way to fetch dynamic data in Astro is using the Backend-For-Frontend (BFF) pattern with Server Islands, allowing you to defer dynamic content loading while keeping the rest of the page static.

How do I use Content Collections for static data fetching in Astro?▼

Astro Content Collections provide a typed, optimized approach for static data fetching by localizing content files and validating their schemas, ensuring maintainability and type safety for your static site.

When should I use `astro:assets` for image optimization?▼

You should use `astro:assets` for image optimization whenever you need responsive, performant images, as it enforces best practices for asset handling and automatically generates optimized image formats.

Does the Astro Islands architecture support deferred loading for specific components?▼

Yes, Astro's Islands architecture supports deferred loading using the `server:defer` directive for Server Islands, allowing dynamic components to load independently without blocking the initial static HTML render.

Related Skills

Explore More Software Engineering Skills→
wlfmnstrwlfmnstr

component-patterns

Design type-safe React component APIs using compound components, render props, and hooks.

Community
Basic
jonnathan-lsjonnathan-ls

performance-profiling

Run Lighthouse audits to profile web performance and identify optimization opportunities.

Community
Intermediate
JP-CanoJP-Cano

astro

Create Astro components, configure static site generation, and manage content collections.

Official
Intermediate
nathanielcrowell12-specnathanielcrowell12-spec

nextjs

Implement Next.js 15 server components, client components, server actions, and API routes.

Community
Intermediate