Fix skills.json determinism (CI blocker) and upgrade the playground

The check-generated CI step was failing with "web/skills.json is stale"
because build-skills.mjs stamped a wall-clock generatedAt into the file, so
every rebuild differed and git diff --exit-code never matched.

- web/build-skills.mjs: drop the unused generatedAt timestamp -> deterministic
  output the CI staleness check can verify. Also tags each skill with its tier.
- skill-tiers.json: single machine-readable source for tier membership
  (Production-Ready / Experimental); TIERS.md points to it.

Playground upgrades (hosted on GitHub Pages):
- Tier filter (Production-Ready / Stable / Experimental) + per-tile tier badges.
- "Use this skill in another tool" panel: copy the instructions formatted for
  ChatGPT, Gemini, or raw — mirrors the generated exports/ files.
- web/README documents the new options and the deterministic build.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016JWn5jRD5tcEFKrubjQ6Px

web/styles.css

@@ -93,6 +93,17 @@ a { color: var(--accent-2); }
 .card-summary { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
 .empty-msg { color: var(--muted); padding: 40px; text-align: center; grid-column: 1 / -1; }
 
+/* ---------- Tier badges ---------- */
+.card-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.card-tags .card-bundle { margin: 0; }
+.card-tier {
+  font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px;
+  border-radius: 99px; border: 1px solid transparent; white-space: nowrap; margin-left: auto;
+}
+.tier-production { color: #6ee7b7; background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
+.tier-stable     { color: #93c5fd; background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); }
+.tier-experimental { color: #fcd34d; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
+
 /* ---------- Runner ---------- */
 .runner { max-width: 880px; margin: 0 auto; }
 .back {
@@ -108,6 +119,22 @@ a { color: var(--accent-2); }
 }
 .skill-head h2 { margin: 0 0 6px; font-size: 23px; }
 .skill-desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; margin: 0; }
+.tier-tag {
+  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px;
+  border-radius: 99px; margin: 0 0 8px 6px; border: 1px solid transparent;
+}
+
+/* ---------- Use in another tool ---------- */
+.elsewhere {
+  background: var(--panel); border: 1px solid var(--border);
+  border-radius: 10px; padding: 4px 14px; margin-bottom: 4px;
+}
+.elsewhere summary {
+  cursor: pointer; font-size: 13px; font-weight: 600; padding: 9px 0; color: var(--accent-2);
+}
+.elsewhere-note { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin: 4px 0 12px; }
+.elsewhere-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 12px; }
+.copy-msg { font-size: 12px; color: #6ee7b7; }
 
 .input-form { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
 .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }