perf-astro

Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization

Generate Convert Improve

Install / Use

npx skills add tech-leads-club/agent-skills --skill perf-astro

Installs into whichever agent you are using.

About this skill

📄

SKILL.md

Installable skill definition

Quality Score

92/100

Our assessment of perf-astro

perf-astro scores 92/100 on our quality scale, 471st of 3,044 Development & Engineering skills we index (top 16%).

Its SKILL.md is 3.6 KB long, well organised into 8 sections with 6 code examples: a solid amount of guidance for an agent.

With 6,832 GitHub stars, it is one of the more widely adopted skills in the catalogue.

Substance

26/30

Structure

20/20

Description

15/15

Adoption

16/20

Freshness

15/15

Maintenance, license and trust

The repository was last updated 7 days ago, so perf-astro is actively maintained.
No license is declared. By default that means all rights are reserved: you can read it, but reusing or redistributing it is not clearly permitted. Ask the author before building on it commercially.
Its trust signals score 88/100, with 1 caution from licensing, adoption, age or documentation. These come from repository metadata, not a code audit — read the skill file before letting an agent act on it.

perf-astro compared with similar skills

All 4 of these similar skills score higher than perf-astro; compare them before choosing.

Skill	Score	Stars	Updated	Format
perf-astro (this skill)by tech-leads-club	92	6.8k	7d ago	SKILL.md
ai-job-searchby MadsLorentzen	100	44.2k	today	CLAUDE.md
claude-howtoby luongnv89	100	41.7k	1d ago	CLAUDE.md
algorithmic-artby anthropics	100	177.9k	5d ago	SKILL.md
pptxby anthropics	100	177.9k	5d ago	SKILL.md

Frequently asked questions

How do I install perf-astro?: Run npx skills add tech-leads-club/agent-skills --skill perf-astro. The install tabs above show the steps for each supported agent.
Which AI agents does perf-astro work with?: It is written for Universal, as a SKILL.md file. Other agents that read the same format can often use it too.
Is perf-astro safe to use?: It declares no license and scores 88/100 on trust signals. Skills are instructions an agent will follow, so read the file before installing it and do not approve commands you do not understand.
Is perf-astro still maintained?: The repository was last updated 7 days ago, so perf-astro is actively maintained.

Skill content

View source on GitHub

name: perf-astro description: 'Astro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when optimizing Astro site performance, improving Astro Lighthouse scores, or configuring astro-critters. Do NOT use for non-Astro sites (use perf-web-optimization or core-web-vitals) or running Lighthouse audits (use perf-lighthouse).'

Astro Performance Playbook

Astro-specific optimizations for 95+ Lighthouse scores.

Quick Setup

npm install astro-critters @playform/compress

// astro.config.mjs
import { defineConfig } from 'astro/config'
import critters from 'astro-critters'
import compress from '@playform/compress'

export default defineConfig({
  integrations: [
    critters(),
    compress({
      CSS: true,
      HTML: true,
      JavaScript: true,
      Image: false,
      SVG: false,
    }),
  ],
})

Integrations

astro-critters

Automatically extracts and inlines critical CSS. No configuration needed.

What it does:

Scans rendered HTML for above-the-fold elements
Inlines only the CSS those elements need
Lazy-loads the rest

Build output shows what it inlined:

Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.

@playform/compress

Minifies HTML, CSS, and JavaScript in the final build.

Options:

compress({
  CSS: true, // Minify CSS
  HTML: true, // Minify HTML
  JavaScript: true, // Minify JS
  Image: false, // Skip if using external image optimization
  SVG: false, // Skip if SVGs are already optimized
})

Layout Pattern

Structure your Layout.astro for performance:

---
import '../styles/global.css'
---

<!doctype html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Font fallback (prevents FOIT) -->
    <style>
      @font-face {
        font-family: 'Inter';
        font-display: swap;
        src: local('Inter');
      }
    </style>

    <!-- Non-blocking Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
      media="print"
      onload="this.media='all'"
    />
    <noscript>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
    </noscript>

    <!-- Preload LCP images -->
    <link rel="preload" as="image" href="/hero.png" fetchpriority="high">

    <title>{title}</title>

    <!-- Defer third-party scripts -->
    <script>
      let loaded = false;
      function loadAnalytics() {
        if (loaded) return;
        loaded = true;
        // Load GTM, analytics, etc.
      }
      ['scroll', 'click', 'touchstart'].forEach(e => {
        document.addEventListener(e, loadAnalytics, { once: true, passive: true });
      });
      setTimeout(loadAnalytics, 5000);
    </script>
  </head>
  <body>
    <slot />
  </body>
</html>

Measuring

npx lighthouse https://your-site.com --preset=perf --form-factor=mobile

Checklist

[ ] astro-critters installed and configured
[ ] @playform/compress installed and configured
[ ] Google Fonts use media="print" onload pattern
[ ] Third-party scripts deferred to user interaction
[ ] LCP images preloaded in <head>

Related Skills

ai-job-search

44.2k

The job search that runs on your machine. AI job application framework built on Claude Code: evaluate postings, tailor CVs, write cover letters, prep interviews. Fork it and own it.

claude-howto

41.7k

A visual, example-driven guide to Claude Code — from basic concepts to advanced agents, with copy-paste templates that bring immediate value.

algorithmic-art

177.9k

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

pptx

177.9k

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing, or extracting text from any .pptx or .potx file (even if the extracted content will be used elsewhere, like in an em…

tech-leads-club

View profile

View on GitHub

GitHub Stars6.8k

CategoryDevelopment

Updated7d ago

Forks551

tech-leads-club/perf-astro

Languages

TypeScript

Trust signals

88/100

From repository metadata: license, adoption, age and documentation. Not a code audit — see the Safety scan above for what the skill file itself contains.

1 medium