'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).'
Automate repetitive workflows and reduce manual effort
Example: Generate reports, summarize documents, draft communications
Save 3-5 hours per week on routine tasks
Learn new skills, understand complex topics, get expert guidance
Example: Explain concepts, provide examples, suggest learning resources
Accelerate learning and skill development by 2x
Enhance output quality through reviews, suggestions, and refinements
Example: Review drafts, suggest improvements, catch errors
Improve work quality by 30-40% with less effort
Time estimate: 15-45 minutes depending on use case complexity
Prerequisites
Submit your Claude Code skill and start earning
epx add tech-leads-club/agent-skills --skill perf-astroCompatible with
Supported agents
| 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-specific optimizations for 95+ Lighthouse scores.
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,
}),
],
})
Automatically extracts and inlines critical CSS. No configuration needed.
What it does:
Build output shows what it inlined:
Inlined 40.70 kB (80% of original 50.50 kB) of _astro/index.xxx.css.
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
})
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>
npx lighthouse https://your-site.com --preset=perf --form-factor=mobile
See also:
astro-critters installed and configured@playform/compress installed and configuredmedia="print" onload pattern<head>AI-first code editor with Composer
Before installing skills in Cursor, ensure your development environment meets these requirements:
node --versionperf-astroExecute the skills CLI command in your project's root directory to begin installation:
epx add tech-leads-club/agent-skills --skill perf-astroFetches perf-astro from tech-leads-club/agent-skills and configures it for Cursor.
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
Confirm successful installation by checking the skill directory location:
.cursor/skills/perf-astro
Restart Cursor to activate perf-astro. Access via /perf-astroin your agent's command palette.
Learn more:View source on GitHubSkills CLI docsAbout CursorWhat are agent skills?
Steps
Common Pitfalls
✓ Do
✗ Don't
💡 Pro Tips
✓ Use when
Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.
✗ Avoid when
Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.
perf-lighthouse
tech-leads-club/agent-skills · performance · same repo
create-rfc
tech-leads-club/agent-skills · creation · same repo
modular-decomposition
tech-leads-club/agent-skills · architecture · same repo
partner-affiliate
tech-leads-club/agent-skills · gtm · same repo
web-quality-audit
tech-leads-club/agent-skills · quality · same repo
cloudflare-deploy
tech-leads-club/agent-skills · cloud · same repo
Solid pick for teams standardizing on skills: perf-astro is focused, and the summary matches what you get after install.
I recommend perf-astro for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
Useful defaults in perf-astro — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
perf-astro has been reliable in day-to-day use. Documentation quality is above average for community skills.
We added perf-astro from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Solid pick for teams standardizing on skills: perf-astro is focused, and the summary matches what you get after install.
perf-astro has been reliable in day-to-day use. Documentation quality is above average for community skills.
Solid pick for teams standardizing on skills: perf-astro is focused, and the summary matches what you get after install.
We added perf-astro from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
Useful defaults in perf-astro — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
showing 1-10 of 64