astro

mindrally

•

6155 months ago

Source Raw

Expert in Astro framework with static generation and partial hydration patterns

Quick Install

npxskills add mindrally/skills--skill astro

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885