@mindrally/astro

240+ Claude Code skills converted from Cursor rules. Expert coding guidelines for every major framework and language.

View in AI SkillSafe app
Scanned · no findings
296 downloads
0 stars
0 demos
SKILL.md
nameastro
descriptionExpert 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

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@mindrally/astro/verified)](https://skillsafe.ai/skill/@mindrally/astro/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@mindrally/astro/installs)](https://skillsafe.ai/skill/@mindrally/astro/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@mindrally/astro/scan)](https://skillsafe.ai/skill/@mindrally/astro/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@mindrally/astro/eval)](https://skillsafe.ai/skill/@mindrally/astro/)