Agent-Skills.md

Agent Skills: Astro Performance Skill

Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.

UncategorizedID: Soborbo/claudeskills/astro-performance

Repository

Soborbo/claudeskills
Soborbo
2

Install this agent skill to your local

pnpm dlx add-skill https://github.com/Soborbo/claudeskills/tree/HEAD/astro-performance

Skill Files

Browse the full folder contents for astro-performance.

Download Skill

Loading file tree…

astro-performance/SKILL.md

Skill Metadata

Name
astro-performance
Description
Core Web Vitals and performance optimization for Astro sites. LCP, CLS, INP optimization, bundle size, fonts, third-party scripts. Use for performance tuning.

Astro Performance Skill

Purpose

Achieve 90+ Lighthouse scores and pass Core Web Vitals. Direct impact on SEO rankings and conversion rates.

Core Rules

  • Preload LCP elements (hero images/text) with fetchpriority="high"
  • Set explicit dimensions on all images and iframes to prevent CLS
  • Use font-display: swap for all web fonts
  • Self-host fonts and subset to reduce file size
  • Defer third-party scripts until after load or user interaction
  • Break up long tasks to keep INP under 200ms
  • Use AVIF/WebP formats with responsive images
  • Keep JS bundle under 100KB gzipped
  • Implement edge caching with long cache headers for assets
  • Monitor real user metrics with web-vitals library

Core Web Vitals Targets

| Metric | Good | Needs Improvement | Poor | |--------|------|-------------------|------| | LCP (Largest Contentful Paint) | ≤2.5s | 2.5-4s | >4s | | INP (Interaction to Next Paint) | ≤200ms | 200-500ms | >500ms | | CLS (Cumulative Layout Shift) | ≤0.1 | 0.1-0.25 | >0.25 |

Bundle Size Budgets

| Asset Type | Budget | |------------|--------| | Total JS | <100KB (gzipped) | | Total CSS | <50KB (gzipped) | | Hero image | <200KB | | Any single image | <100KB |

References

Core Web Vitals

Assets & Resources

  • Bundle Size - Analysis, tree shaking, dynamic imports
  • Fonts - Self-hosting, subsetting, variable fonts
  • Images - Format priority, responsive images

Infrastructure

Forbidden

  • Render-blocking CSS in body
  • Synchronous third-party scripts in head
  • Unoptimized images
  • Web fonts without font-display: swap
  • Layout shifts from dynamic content
  • Main thread blocking >50ms

Definition of Done

  • [ ] Lighthouse Performance ≥90
  • [ ] LCP ≤2.5s
  • [ ] CLS ≤0.1
  • [ ] INP ≤200ms
  • [ ] Total JS <100KB gzipped
  • [ ] Hero image preloaded
  • [ ] Fonts self-hosted with swap
  • [ ] Third-party scripts deferred