[xavi-999]

Description

Three commits:

• Improve README banner and diagrams with trace visuals. The banner is redrawn from the real nextjs.org capture in assets/trace.render-blocking-sample.json.gz. Requests are grouped by resource type (HTML, CSS, Fonts, Images, JS) next to a main-thread lane. A SMIL playhead sweeps the load and the paint block pulses at LCP 922 ms. The loop, gate and warmup diagrams are redrawn with the same system:

  • gate: the 10 real LCP captures inside the ±30.35 ms band
  • warmup: the 3 real runs and the stddev drop from 59.9 ms to 2.9 ms
  • all three: one SMIL motion each

  Every asset has a dark and a light variant wired through <picture>. Text is converted to outlines, and no <style>, @import or foreignObject is used, so the SVGs render the same through GitHub's image proxy. The banner PNGs are regenerated from the first frame.

• Fix strict plugin validation warning. claude plugin validate . --strict failed on "CLAUDE.md at the plugin root is not loaded as project context", which breaks the CI validation step. Moving the file to .claude/CLAUDE.md keeps it loaded as project instructions and makes validation pass. AGENTS.md, CONTRIBUTING.md and README.md now point at the new path.

• Release 0.3.0. Bumps 0.2.1 to 0.3.0 in package.json, package-lock.json, .claude-plugin/plugin.json and .claude-plugin/marketplace.json. It's a minor bump because the page tools layer landed since 0.2.1. This is the first release record; no tags or GitHub releases exist yet.

Related issues

N/A

Impacted areas

• README visuals: docs/banner-*, docs/diagrams/*
• Agent docs location: CLAUDE.md moves to .claude/CLAUDE.md
• Plugin version

The banner uses per-type data colours (blue, lime, green, violet) in addition to the magenta accent. That departs from the single-accent rule in docs/superpowers/specs/2026-08-09-browsergnome-brand-design.md. The colours stay clear of the hues reserved for the perf/LCP maps. If we keep them, the spec should be updated.

Steps to reproduce or test

Development

• claude plugin validate . --strict passes
• npm test passes, as does node skills/browsergnome/scripts/check_invariants.mjs (11 passed)
• SMIL motion checked frame by frame in Chrome, and static frames rendered at 880px (GitHub README width) for legibility

QA

Open the README on this branch with GitHub set to dark, then light. The banner and diagrams should switch variants and animate.

Checklist

• Add label Breaking Change if it applies.
• Commits are atomic and logically separated.
• Performance implications have been considered.
• Security implications have been considered.
• The new and updated code has good coverage.
• API documentation, if required, has been created or updated.
• New dependencies have been added to package.json.
• The README file, if required, has been updated.
• Architectural diagram, if required, has been updated.

Deploy notes

After merge, tag v0.3.0 on master and create the GitHub release if we want a release record beyond the version bump.

[claude]

LGTM. This is a docs and assets refresh, a file move and a version bump, and none of it touches runtime code.

What was reviewed:

• The version is 0.3.0 in all four places: package.json, package-lock.json, plugin.json and marketplace.json.
• CLAUDE.md moves to .claude/CLAUDE.md unchanged. AGENTS.md, CONTRIBUTING.md and README.md now point at the new path, and no script, workflow or docs/pages file reads the old path.
• The new SVGs contain no <script>, event handlers, external href, <style>, @ import or foreignObject. Nothing still points at the deleted loop.svg, gate.svg or warmup.svg.
• Ruled out: the CI templates' @ v0.2.0 pin example is a minor documentation nit, not a functional problem.

Extended reasoning...

The change bumps the version in 4 manifest and package files and moves CLAUDE.md to .claude/CLAUDE.md byte for byte (100% similarity), updating the 3 docs that link to it. It also replaces the README banner and diagram images with static, script-free SVGs in dark and light variants wired through picture elements. It touches no scripts, hooks, MCP config or CI workflows, and no security-sensitive surface. Every edit is mechanical, and all references to moved or deleted files were checked and resolve.