@se-studio/skills 1.0.3 → 1.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @se-studio/skills
 
+## 1.0.4
+
+### Patch Changes
+
+- Version bump: patch for changed packages
+
 ## 1.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/skills",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "SE Studio agent skills for marketing site development with Contentful CMS",
   "repository": {
     "type": "git",

package/skills/performance-audit/SKILL.md

@@ -117,39 +117,44 @@ Large client-only packages here inflate server cold-start time. Check for missin
 | 20.19+ or 22+ | `lighthouse@13` |
 
 Chrome path:
-- Linux / WSL: `/usr/bin/google-chrome`
+- Linux / WSL: `google-chrome-stable` (binary is `/usr/bin/google-chrome-stable`)
 - macOS: Lighthouse finds it automatically
 
 ### Run against key page types
 
-Substitute `<SITE_URL>` with the production (or preview) domain.
+Use the script-based approach. It spawns one Chrome instance, audits all pages, then prints a delta table vs the previous run.
+
+**Setup — copy the script template:**
+
+```bash
+mkdir -p scripts
+cp node_modules/@se-studio/skills/skills/performance-audit/lighthouse.ts scripts/lighthouse.ts
+```
+
+Or copy from `apps/example-se2026/scripts/lighthouse.ts` in the se-core-product monorepo if you have it available.
+
+**Customise `PAGES` for the project** — edit the `PAGES` array near the top of the script. Choose representative pages: homepage, a list/index page, and a detail page. Use the sitemap to identify good candidates:
+
+```bash
+curl -s <SITE_URL>/sitemap.xml | grep -oP 'https://[^<]+'
+# or for this stack:
+curl -s <SITE_URL>/marketing/sitemap.xml | grep -oP 'https://[^<]+'
+curl -s <SITE_URL>/marketing/sitemap-unindexed.xml | grep -oP 'https://[^<]+'
+```
+
+**Install dependencies (if not present):**
+
+```bash
+pnpm add -D lighthouse tsx
+```
+
+**Run:**
 
 ```bash
-mkdir -p .lighthouse
-
-# Homepage
-npx lighthouse@12 <SITE_URL>/ \
-  --chrome-path /usr/bin/google-chrome \
-  --chrome-flags="--headless=new --no-sandbox --disable-gpu --disable-dev-shm-usage" \
-  --only-categories=performance,accessibility,best-practices,seo \
-  --output json --output-path .lighthouse/home.json --quiet
-
-# A list or index page
-npx lighthouse@12 <SITE_URL>/blog/ \
-  --chrome-path /usr/bin/google-chrome \
-  --chrome-flags="--headless=new --no-sandbox --disable-gpu --disable-dev-shm-usage" \
-  --only-categories=performance,accessibility,best-practices,seo \
-  --output json --output-path .lighthouse/list.json --quiet
-
-# A detail page (pick a URL from the sitemap)
-npx lighthouse@12 <DETAIL_URL> \
-  --chrome-path /usr/bin/google-chrome \
-  --chrome-flags="--headless=new --no-sandbox --disable-gpu --disable-dev-shm-usage" \
-  --only-categories=performance,accessibility,best-practices,seo \
-  --output json --output-path .lighthouse/detail.json --quiet
+npx tsx scripts/lighthouse.ts
 ```
 
-To find page URLs: `curl -s <SITE_URL>/sitemap.xml | grep -oP 'https://[^<]+'`
+The script writes JSON to `.lighthouse/<page>.json`, overwrites each run, and prints a delta table showing score changes vs the previous run.
 
 ### Extract scores from JSON
 
@@ -309,21 +314,20 @@ Verify audience browser share before applying — check analytics for any legacy
 
 ## Tracking baselines
 
-Save Lighthouse JSON to `.lighthouse/<page>.json`. After each round of fixes, save to `.lighthouse/<page>-v2.json`, `v3.json`, etc.
+The script shows score deltas automatically each run — no separate comparison script needed. The delta column (`▲`/`▼`/`·`) reflects the difference from the JSON that existed before the run started.
 
-Compare LCP across versions:
-```bash
-node -e "
-const v1 = JSON.parse(require('fs').readFileSync('.lighthouse/home.json','utf8'));
-const v2 = JSON.parse(require('fs').readFileSync('.lighthouse/home-v2.json','utf8'));
-const lcp = a => (a.audits['largest-contentful-paint'].numericValue/1000).toFixed(2)+'s';
-const perf = a => Math.round(a.categories.performance.score * 100);
-console.log('Home LCP: v1=' + lcp(v1) + ' → v2=' + lcp(v2));
-console.log('Home Perf: v1=' + perf(v1) + ' → v2=' + perf(v2));
-"
+Add `.lighthouse/` to `.gitignore` — committing it adds large JSON files that the script already overwrites each run:
+
+```
+# .gitignore
+.lighthouse/
 ```
 
-Commit `.lighthouse/` to git for team-visible historical baselines.
+To preserve a snapshot before a major deploy, copy it manually:
+
+```bash
+cp -r .lighthouse .lighthouse-pre-deploy
+```
 
 ---
 
@@ -331,7 +335,8 @@ Commit `.lighthouse/` to git for team-visible historical baselines.
 
 | Error | Cause | Fix |
 |---|---|---|
-| `Unable to connect to Chrome` | Lighthouse can't find Chrome binary | Add `--chrome-path /usr/bin/google-chrome` |
+| `tcp_socket_win.cc: bind() … Only one usage of each socket address` or Chrome fails to start in WSL | WSL PATH resolves the **Windows** Chrome binary, which spawns as a Windows process and can't bind the DevTools port — passing `--chrome-path` to a one-shot `npx lighthouse` call doesn't help | Use the script approach: spawn `google-chrome-stable` (Linux binary) directly with `--no-sandbox --remote-debugging-port=9222`, then connect Lighthouse via `--port=9222` (see the script template above) |
+| `Unable to connect to Chrome` (non-WSL) | Lighthouse can't find Chrome binary | Set `CHROME_BIN` in the script to the correct binary path |
 | Lighthouse fails on Node 20.18.x | Requires lighthouse@12 | Use `npm i -g lighthouse@12` |
 | `ANALYZE=true next build` fails | `next.config.ts` export not wrapped | Ensure `export default withBundleAnalyzer(nextConfig)` |
 | Speed Insights shows no data | Wrong layout, or not deployed to production | Must be in root `src/app/layout.tsx`; requires production traffic |