docs: apply session retro improvements to magazine workflow (#4)

Learnings from 26-03 production session:

CLAUDE.md:
- Add name verification rule (never fabricate, always check Slack)
- Add Co-Authored-By as primary AI stats metric (not labels)
- Add WCAG AA contrast minimum requirement
- Add Twemoji over native emoji rule
- Add Claw'd mascot specification
- Add post-publish announcement prompt

magazine-collect.md:
- Add Co-Authored-By commit query for AI stats
- Add name verification requirement
- Add Slack data preprocessing with jq (structured extraction
  of timestamp, user, first line, URLs — not raw truncation)

magazine-design-reference.md (new):
- WCAG contrast verification script (Python)
- Twemoji CDN usage guide
- Whitespace management strategies
- Card design system (eyebrow tags, section-scoped styles)
- CSS selector gotchas (descendant vs compound)
- Overflow detection script
- Pre-flight quality checklist

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: VdustR

.claude/commands/magazine-collect.md

@@ -91,7 +91,17 @@ For default channels and any user-provided Slack links:
 4. **Invoke `/agent-browser` skill** to browse links found within Slack messages (public URLs and Slack threads alike)
 5. If neither Slack MCP nor `/agent-browser` can access content, ask user to copy-paste the message text directly
 
-### 2.4 Initial Processing
+### 2.4 Slack Data Preprocessing
+
+Slack MCP returns large JSON payloads (100K-280K chars) that exceed subagent context limits. **Always preprocess with jq before dispatching to subagents**:
+
+```bash
+cat {slack-output-file} | jq -r '.[0].text' | jq -r '.messages[] | select(.ts | tonumber >= {start_ts}) | "[\(.ts)] \(.user // "bot"): \(.text | split("\n")[0] | .[0:150])\n  URLs: \([.text | scan("https?://[^>|\\s]+")] | join(" "))"'
+```
+
+This extracts timestamp, user, first line (topic sentence), and all URLs — structured enough for subagents to identify topics without reading full JSON. URLs are the most important signal in sharing channels.
+
+### 2.5 Initial Processing
 For each source, extract:
 - What it is (release, tool, article, discussion)
 - Core claim or announcement
@@ -135,8 +145,16 @@ gh issue list --repo chatbotgang/{repo} --state all --limit 30 --json title,numb
 
 # Recent commits
 gh api repos/chatbotgang/{repo}/commits --jq '.[0:30] | .[] | {sha: .sha[0:7], message: .commit.message, author: .commit.author.name, date: .commit.author.date}'
+
+# AI-assisted development rate (Co-Authored-By, NOT labels)
+gh api "repos/chatbotgang/{repo}/commits?per_page=100&since={start}&until={end}" \
+  --jq '. as $all | ($all | length) as $total | ($all | map(select(.commit.message | test("Co-[Aa]uthored-[Bb]y.*[Cc]laude"))) | length) as $cc | "\($cc)/\($total) co-authored (\(if $total > 0 then ($cc * 100 / $total) else 0 end)%)"'
 ```
 
+**IMPORTANT**: Use `Co-Authored-By` commit metadata as the primary AI-assisted development metric, not `claude-code` labels. Labels are repo-specific and many repos don't use them. Paginate with `page=2` if the first page returns exactly 100 results.
+
+**IMPORTANT**: All person names (skill authors, contributors) must be verified from Slack profiles (`mcp__slack__slack_get_user_profile`) or GitHub. Never guess or fabricate names.
+
 ### 3.2 Insight Filtering
 
 **INCLUDE** (Technical Focus):

.claude/commands/magazine-design-reference.md

@@ -0,0 +1,164 @@
+# Magazine Design Reference
+
+Reference document for `/magazine-edit`. Contains design standards, validation scripts, and patterns learned from session retrospectives.
+
+## WCAG Color Contrast Verification
+
+### Requirements
+
+| Level | Normal text (<18pt) | Large text (≥18pt or ≥14pt bold) |
+|-------|--------------------|---------------------------------|
+| AA (minimum) | 4.5:1 | 3.0:1 |
+
+### Python Verification Script
+
+Run this before finalizing any color pair on dark backgrounds:
+
+```python
+import sys
+def lum(h):
+    h=h.lstrip('#'); r,g,b=[int(h[i:i+2],16)/255 for i in(0,2,4)]
+    f=lambda c:c/12.92 if c<=0.04045 else((c+.055)/1.055)**2.4
+    return 0.2126*f(r)+0.7152*f(g)+0.0722*f(b)
+def contrast(a,b):
+    l1,l2=lum(a),lum(b); mx,mn=max(l1,l2),min(l1,l2)
+    return round((mx+.05)/(mn+.05),2)
+# Usage: python3 -c "..." '#ffffff' '#0f0d2e'
+fg,bg=sys.argv[1],sys.argv[2]
+r=contrast(fg,bg)
+print(f'{fg} on {bg}: {r}:1 {"PASS" if r>=4.5 else "FAIL (need 4.5:1)"}')
+```
+
+### Known Borderline Colors (large text ONLY)
+
+- `#e63946` on `#faf9f6` → 3.96:1 (large text only)
+- `#2ea043` on `#f6f8fa` → 3.17:1 (large text only)
+- `#7c3aed` on `#0d1b2a` → 3.05:1 (large text only)
+
+## Emoji: Use Twemoji Images, Not Native Emoji
+
+Native emoji render differently across platforms. Use Twemoji SVG images instead.
+
+### CDN URL Pattern (pinned to last stable release)
+
+```
+https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/{CODEPOINT}.svg
+```
+
+### HTML Usage
+
+```html
+<img src="https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/1f680.svg"
+     alt="rocket" style="width:1.2em;height:1.2em;vertical-align:-0.15em;display:inline-block;">
+```
+
+### Codepoint Examples
+
+| Emoji | Codepoint | Filename |
+|-------|-----------|----------|
+| 🚀 | U+1F680 | `1f680.svg` |
+| ⚡ | U+26A1 | `26a1.svg` |
+| 🔥 | U+1F525 | `1f525.svg` |
+| ⭐ | U+2B50 | `2b50.svg` |
+
+Use manual `<img>` tags (not `twemoji.parse()`) for PDF reliability.
+
+## Whitespace Management
+
+### Dense Pages — Bottom Whitespace
+
+| Whitespace | Strategy |
+|------------|----------|
+| < 15mm | Acceptable. Use `<div style="flex:1"></div>` spacer if desired |
+| 15–35mm | Add decorative rule or ornament |
+| > 35mm | Content problem — add more text, increase font size, or merge pages |
+
+### Flex Column Pattern (recommended for all dense pages)
+
+```css
+.page.dense {
+  display: flex;
+  flex-direction: column;
+  padding: 14mm 18mm;
+}
+/* Content grids should NOT stretch cards */
+.grid-2, .grid-3 {
+  align-content: start; /* prevents card stretching */
+}
+```
+
+### Overflow Detection Script
+
+Add to HTML `<script>` during development — shows red overlay on overflowing pages:
+
+```javascript
+if (window.matchMedia('not print').matches) {
+  document.querySelectorAll('.page').forEach((p, i) => {
+    if (p.scrollHeight > p.clientHeight + 2) {
+      p.style.outline = '3px solid red';
+      const l = document.createElement('div');
+      l.style.cssText = 'position:absolute;top:0;left:0;background:red;color:white;font:9px monospace;padding:2px 4px;z-index:9999';
+      l.textContent = `OVERFLOW +${p.scrollHeight - p.clientHeight}px (p${i+1})`;
+      p.style.position = 'relative'; p.appendChild(l);
+    }
+  });
+}
+```
+
+## Card Design System
+
+### Tag/Badge Placement: Eyebrow (Above Title)
+
+Tags go ABOVE the title (eyebrow position), not inline or below:
+
+```html
+<div class="card">
+  <div class="card-eyebrow">
+    <span class="tag tag-release">v6</span>
+  </div>
+  <h3>Astro 6</h3>
+  <p>Dev server matches production...</p>
+</div>
+```
+
+### Section-Scoped Card Styles
+
+| Feature | Dark sections (eco/sec) | Light sections (tools/proj) |
+|---------|------------------------|----------------------------|
+| Card bg | Slightly lighter than page (#1a1d2e vs #0f1119) | White with shadow |
+| Border | Left 3px accent color | Full border thin gray |
+| Code bg | Dark (#252840) | Light (#f0f4f8) |
+
+### Visual Monotony Prevention
+
+1. No 3+ consecutive dense pages without a breather
+2. Each dense page should have at least 1 hero card (spanning full width)
+3. Adjacent pages should use different grid structures (2-col → asymmetric → 3-col)
+4. Alternate accent border direction between pages (left → top)
+
+## CSS Selector Gotchas
+
+### Same-Element vs Descendant Selectors
+
+```css
+/* WRONG: descendant selector — won't match <div class="page s-eco dense"> */
+.s-eco .dense { padding: 14mm 18mm; }
+
+/* RIGHT: same-element compound selector */
+.s-eco.dense { padding: 14mm 18mm; }
+```
+
+Always verify CSS selectors match the actual HTML class structure.
+
+## Verification Workflow
+
+### Pre-Flight Checklist (before declaring "done")
+
+1. **Export PDF** and read every page via `Read` tool — browser preview lies
+2. **WCAG contrast**: run Python script on all text-on-dark-background color pairs
+3. **Overflow**: check no content is clipped at page bottom edges
+4. **Whitespace**: no page has > 35mm unused bottom space
+5. **Selector audit**: grep for `.s-{section} .{class}` patterns — should be `.s-{section}.{class}` for same-element
+6. **Font loading**: verify custom fonts render (not fallback to system fonts)
+7. **Cross-page consistency**: all cards within same section use identical styles
+8. **Names**: all person names verified from Slack/GitHub, never fabricated

CLAUDE.md

@@ -75,13 +75,22 @@ Use `/magazine` to run both in sequence within one session.
 - **Avoid product feature descriptions** — this is a tech digest, not a product changelog
 - **No filler content** — if there's no insight, don't write it
 - **Skip statistics** — no PR counts, contributor counts unless meaningful
+- **Never fabricate names** — all person names must be verified from Slack profiles (`mcp__slack__slack_get_user_profile`) or GitHub. If unknown, ask the user. Never guess.
+- **AI-assisted development stats** — use `Co-Authored-By` commit metadata as the primary metric, not labels (labels are repo-specific and inconsistent)
 
 ### Quality Standards
 
 - All content in **American English**
-- Print-friendly layout (check for blank pages from page breaks)
+- **PDF is the source of truth** — always verify layout in exported PDF, not browser preview (browser has margins/gaps that don't appear in print)
+- **WCAG AA contrast minimum** — all text must meet 4.5:1 contrast ratio (normal text) or 3:1 (large text ≥18pt). Calculate and verify, don't eyeball.
+- **No native emoji** — use image-based emoji (Twemoji CDN or local assets) for cross-platform consistency
 - Accessible HTML structure
 - Distinctive typography (avoid generic fonts)
+- **Claw'd mascot** — use inline SVG pixel art (salmon #cc8b6e body, black eyes, blocky legs). Each appearance should have a different expression to reduce repetitiveness.
+
+### After Publishing
+
+After merging a new issue, always suggest: "Want to announce this issue? Run `/magazine-announce`"
 
 ## Language