feat: implement badge/pill component with |Label|{.variant} syntax

[teezeit]

Closes #21

Summary

• Syntax: |Label| and |Label|{.variant} — pipe-delimited inline badges
• Variants: success · warning · error · primary · (none = neutral gray)
• Works standalone, mixed with text (Status: |Active|{.success}), and as multiple pills on one line

Implementation

• src/parser/transformer.ts — detects |...| in both plain and rich-content paragraphs; variant classes promoted to props.variant
• src/renderer/html-renderer.ts / react-renderer.ts / tailwind-renderer.ts — renderBadge() added to each
• src/renderer/styles.ts — badge CSS added to all 7 styles (sketch has border + rotation; brutal has square border + box-shadow; material uses chip style; tailwind uses full-radius pill)

Tests (+23)

• tests/parser.test.ts — 6 badge parsing tests
• tests/renderer.test.ts — 5 HTML rendering tests
• tests/react-renderer.test.ts — 3 React rendering tests
• tests/tailwind-renderer.test.ts — 5 Tailwind rendering tests
• tests/edge-cases.test.ts — 7 edge cases (empty ||, spaces in label, unknown variant, HTML escaping, all-styles smoke)

Docs

• QUICK-REFERENCE.md — added to component table, disambiguation rules, and tips
• SYNTAX-SPEC-v0.1.md §7.4 — replaced unimplemented backtick spec with actual |Label| spec + parser rules + table-cell limitation
• docs/guide/syntax.md — new Badges/Pills section
• claude-skill/SKILL.md — badge line in quick reference
• claude-skill/references/syntax.md — new Badges/Pills section + component mapping row

Example

|Active|{.success} |Pending|{.warning} |3|{.error} |New|{.primary}

Status: |Active|{.success}

Pre-rendered examples in examples/pills-test-*.html for all 7 styles.

🤖 Generated with Claude Code