feat: add web-fragments skill

[oto-macenauer-absa]

Summary

Adds a web-fragments skill: building, embedding, debugging, and deploying micro-frontends with the Web Fragments framework (the web-fragments npm package).

The skill encodes the real v0.8.x API (from the library source, not stale public docs) so an agent can write correct code without reading node_modules or re-researching the basics.

Structure (progressive disclosure, token-optimized)

skills/web-fragments/
├── SKILL.md                      hub: mental model, exact API, workflow, gotchas
├── references/
│   ├── api-reference.md          every export, full FragmentConfig, deprecations
│   ├── host-integration.md       per-framework middleware (Express, CF, Vercel, Netlify, Hono, Angular, Next, Vite)
│   ├── fragment-authoring.md     build a fragment (unique assetsDir ↔ routePattern rule)
│   ├── troubleshooting.md        known issues + fixes
│   ├── css-and-styling.md        verified shadow-boundary behavior (:root vs :host, @layer, inheritance)
│   ├── csp-and-iframe.md         X-Frame-Options / frame-ancestors so the hidden iframe isn't blocked
│   ├── piercing-and-performance.md  piercing internals, caching, mode:production, route specificity
│   └── frameworks-astro.md       Astro embed, ClientRouter, #297 bug, smooth-transition workaround
├── scripts/
│   ├── scaffold-fragment.mjs     generate a Vite fragment + aligned gateway snippet
│   ├── doctor.mjs                static-check a host/fragment project for v0.8.x gotchas
│   └── experiments/             reproducible Playwright experiments backing the verified findings
└── evals/evals.json

How it was validated

• API verified against the library source (gateway middleware + element source), not just the website docs (several of which are stale — e.g. the non-existent web-fragments/middleware import path).
• Empirical findings via Playwright: CSS isolation across the nested shadow boundary (:root is dead inside a fragment, :host works, @layer is tree-scoped), and Astro <ClientRouter /> behavior.
• Bug found, reproduced, and filed upstream as web-fragments#297 (head <style>/<link> accumulate across ClientRouter navigation), plus a verified smooth-transition-without-ClientRouter workaround.
• doctor.mjs checks (wrong import path, register vs registerFragment, asset/routePattern mismatch, missing middleware, X-Frame-Options: DENY, unscoped static before middleware) are smoke-tested.

Notes

• Reference experiments under scripts/experiments/ are source-only (no node_modules/build output); re-running them needs Node + a Chromium from @playwright/test.
• Complements the upstream /web-fragments:* slash commands proposed in web-fragments PR #294 — this skill supplies auto-triggered knowledge; those commands run specific tasks.

[miroslavpojer]

Wow, this is big and complex.
From skill point of view I do not see an issue.

I suggest to invite UI developer as reviewer here.