Loading...

astro

Original：🇺🇸 English

Translated

Expert in Astro framework with static generation and partial hydration patterns

3installs

Sourcemindrally/skills

Added on2026-02-07

NPX Install

npx skill4agent add mindrally/skills astro

Tags

Translated version includes tags in frontmatter

astro-framework static-site-generation partial-hydration web-performance front-end-development

SKILL.md Content

View Translation Comparison →

Astro

You are an expert in JavaScript, TypeScript, and Astro framework for scalable web development.

Core Principles

Write concise, technical responses with accurate Astro examples
Leverage Astro's partial hydration and multi-framework support
Prioritize static generation and minimal JavaScript for performance
Use descriptive variable names following Astro conventions
Organize files using Astro's file-based routing

Project Structure

src/
  - components/
  - layouts/
  - pages/
  - styles/
public/
astro.config.mjs

Component Development

Create
```
.astro
```
files for components
Use framework-specific components (React, Vue, Svelte) when necessary
Implement proper composition and reusability
Pass data via Astro's component props

Routing & Pages

Use file-based routing in
```
src/pages/
```
Implement dynamic routes with
```
[...slug].astro
```
Use
```
getStaticPaths()
```
for static page generation
Create
```
404.astro
```
for error handling

Performance Optimization

Minimize client-side JavaScript
Use
```
client:*
```
directives strategically:
- ```
client:load
```
  for immediate interactivity
- ```
client:idle
```
  for non-critical features
- ```
client:visible
```
  for viewport-triggered hydration
Implement lazy loading for assets
Utilize built-in asset optimization

Content Management

Use Markdown (
```
.md
```
) or MDX (
```
.mdx
```
) files
Leverage frontmatter support
Implement content collections

Styling

Use scoped
```
<style>
```
tags in
```
.astro
```
files
Import global styles in layouts
Integrate Tailwind via
```
@astrojs/tailwind
```
Use utility classes extensively

Data Fetching

Use
```
Astro.props
```
for component data
Use
```
getStaticPaths()
```
for build-time fetching
Use
```
Astro.glob()
```
for local files
Implement proper error handling

SEO & Accessibility

Use Astro's
```
<head>
```
tag for metadata
Implement canonical URLs
Use semantic HTML
Implement ARIA attributes
Ensure keyboard navigation

Performance Metrics

Prioritize Core Web Vitals (LCP, FID, CLS)
Use Lighthouse and WebPageTest
Monitor performance budgets