Expert in Astro framework with static generation and partial hydration patterns
Scanned 2/12/2026
Install to Claude Code
Skills Directorynpx -y skills add Mindrally/skills --skill astro --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of Astro?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/mindrally-astro)More formats (shields.io, HTML) on the badges page.
---
name: astro
description: Expert in Astro framework with static generation and partial hydration patterns
---
# 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
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
