Skills
skills/mindrally/skills/astro

astro

SKILL.md

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
Weekly Installs
92
Repository
mindrally/skills
GitHub Stars
32
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
opencode76
gemini-cli73
codex67
claude-code66
cursor64
github-copilot64