From 35c3acb42ed12d48e630efd45d639003952946b5 Mon Sep 17 00:00:00 2001
From: ayobamiseun <adegokeayobamiseun@gmail.com>
Date: Sun, 11 Oct 2026 02:12:38 +0100
Subject: [PATCH] fix(docs): label JavaScript blocks as JavaScript; Codex
 manifest says 25 skills

Three fenced blocks were labelled bash but hold JavaScript: the Frontend
and Backend measurement examples in performance-optimization (web-vitals
imports, console.time) and the measurement block in the performance
checklist, which mixed npx commands with web-vitals code in one shell
fence. An agent reading a bash block can try to run it in a shell, and
`#` is not a JavaScript comment. Relabel the two skill blocks as
javascript with // comments, and split the checklist block into a bash
fence for the npx commands and a javascript fence for the code. Content
is unchanged line for line.

The Codex manifest's longDescription still said 24 workflows; the pack
has had 25 skills since constraint-driven-development landed. Say 25.

Found by scanning every fenced block in the repo by declared language;
these were the only mislabels.
---
 .codex-plugin/plugin.json                |  2 +-
 references/performance-checklist.md      |  6 ++++--
 skills/performance-optimization/SKILL.md | 20 ++++++++++----------
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/.codex-plugin/plugin.json b/.codex-plugin/plugin.json
index 1d85feec..eff7caf0 100644
--- a/.codex-plugin/plugin.json
+++ b/.codex-plugin/plugin.json
@@ -13,7 +13,7 @@
   "interface": {
     "displayName": "Agent Skills",
     "shortDescription": "Senior-engineer workflows for AI coding agents: spec, plan, build, test, review, ship.",
-    "longDescription": "Agent Skills bundles 24 production engineering workflows from Addy Osmani, covering requirements, planning, implementation, testing, review, and shipping.",
+    "longDescription": "Agent Skills bundles 25 production engineering workflows from Addy Osmani, covering requirements, planning, implementation, testing, review, and shipping.",
     "developerName": "Addy Osmani",
     "category": "Productivity",
     "capabilities": [
diff --git a/references/performance-checklist.md b/references/performance-checklist.md
index ba9744fe..88b6f6a4 100644
--- a/references/performance-checklist.md
+++ b/references/performance-checklist.md
@@ -201,14 +201,16 @@ npx vite-bundle-visualizer
 
 # Check bundle size
 npx bundlesize
+```
 
-# Web Vitals in code
+```javascript
+// Web Vitals in code
 import { onLCP, onINP, onCLS } from 'web-vitals';
 onLCP(console.log);
 onINP(console.log);
 onCLS(console.log);
 
-# INP with interaction-level detail (attribution build)
+// INP with interaction-level detail (attribution build)
 import { onINP } from 'web-vitals/attribution';
 onINP(({ value, attribution }) => {
   const { interactionTarget, inputDelay, processingDuration, presentationDelay } = attribution;
diff --git a/skills/performance-optimization/SKILL.md b/skills/performance-optimization/SKILL.md
index 49873572..ff57eab0 100644
--- a/skills/performance-optimization/SKILL.md
+++ b/skills/performance-optimization/SKILL.md
@@ -45,12 +45,12 @@ Two complementary approaches — use both:
 - **RUM (web-vitals library, CrUX):** Real user data in real conditions. Required to validate that a fix actually improved user experience.
 
 **Frontend:**
-```bash
-# Synthetic: Lighthouse in Chrome DevTools (or CI)
-# Chrome DevTools → Performance tab → Record
-# Chrome DevTools MCP → Performance trace
+```javascript
+// Synthetic: Lighthouse in Chrome DevTools (or CI)
+// Chrome DevTools → Performance tab → Record
+// Chrome DevTools MCP → Performance trace
 
-# RUM: Web Vitals library in code
+// RUM: Web Vitals library in code
 import { onLCP, onINP, onCLS } from 'web-vitals';
 
 onLCP(console.log);
@@ -59,12 +59,12 @@ onCLS(console.log);
 ```
 
 **Backend:**
-```bash
-# Response time logging
-# Application Performance Monitoring (APM)
-# Database query logging with timing
+```javascript
+// Response time logging
+// Application Performance Monitoring (APM)
+// Database query logging with timing
 
-# Simple timing
+// Simple timing
 console.time('db-query');
 const result = await db.query(...);
 console.timeEnd('db-query');