- Add width/height to <source> elements for correct aspect-ratio in art direction.
- Use realistic 'sizes' attributes in hero image examples.
- Remove 'decoding=sync' from hero images to avoid blocking the main thread.
- Align TTFB 'good' threshold with web.dev standards (800ms).
- Distinguish synthetic (Lighthouse) vs RUM (web-vitals) measurement approaches,
clarifying when each is appropriate: synthetic for CI regression detection,
RUM to validate real user impact.
- Expand TTFB diagnosis from a single vague hint into a decision tree that breaks
down each component (DNS, TCP/TLS, server processing) with specific next steps.
Mirrors the tree in the skill and adds a dedicated checklist section.
- Fix image optimization example: the previous "GOOD" example applied loading="lazy"
without distinguishing the LCP hero image from below-the-fold images. Hero images
must never be lazy-loaded. New example separates both cases explicitly.
- Add art direction + resolution switching to the hero image example using <picture>
with media queries for mobile/desktop crops and srcset for density variants.
Mobile-first: <img src> fallback points to the mobile version.
Covers AVIF → WebP → JPG format cascade and fetchpriority="high" for LCP.
- Correct the date-fns tree-shaking example: modern bundlers (Vite, webpack 5+)
handle named imports automatically. The "BAD" pattern was not actually bad,
and following it could lead to unnecessary micro-optimizations. Real gains
come from dynamic imports and route-level code splitting, which the example
now illustrates instead.
Update all SKILL.md descriptions to lead with what the skill does
(third person) followed by trigger conditions, per Anthropic's
skill authoring docs. All original trigger conditions preserved.
Update description max chars to match Anthropic spec (1024).
Retain workflow-summary warning in skill-anatomy.md to prevent
agents from following descriptions instead of reading full skills.
Add Table of Contents to reference files longer than 100 lines so
Claude can see the full scope of available information even when
previewing with partial reads.
Helps determine what to measure first based on the symptom: slow first
load, sluggish interactions, navigation delays, or backend issues. Each
branch points to a specific profiling action.
Review phase skills covering OWASP Top 10 prevention, input
validation, Core Web Vitals, and measure-before-optimize discipline.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Joan Leon