website-optimizerlisted
Install: claude install-skill Kevinnnnn-ai/astronology.dev
# Website Optimizer
Audit and improve the performance of astronology.dev (vanilla HTML/CSS/JS in `src/`) without changing functionality. Propose first, apply with consent, verify after.
---
## When to Use This Skill
- The user asks for performance improvements, faster loads, smaller bundles, or Lighthouse audits.
- The user describes symptoms ("first paint is slow", "scrolling jitters", "hero feels heavy").
- The user names a specific target (defer scripts, lazy-load images, dead CSS, preconnect).
## When to Skip This Skill
- Visual or content edits only: use `content-data-update`, `section-scaffold`, or `page-scaffold`.
## Workflow
### Phase 1: Baseline
Before changing anything, capture the current state so improvements are measurable.
1. Ensure local tooling exists. If [package.json](../../../package.json) is absent at the project root, scaffold a minimal one (see [Local Tooling](#local-tooling)). Never run `npm install -g`.
2. Start a local server in the background: `npx --yes http-server src -p 8080 -s`
3. Run Lighthouse on both pages and save JSON output:
```
npx --yes lighthouse http://localhost:8080/index.html --only-categories=performance --output=json --output-path=./temp/lh-index-before.json --chrome-flags="--headless"
npx --yes lighthouse http://localhost:8080/articles.html --only-categories=performance --output=json --output-path=./temp/lh-articles-before.json --chrome-flags="--headless"
```
4. Note headline score and key metrics (FCP, LCP, T