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');