DDD-005: Propose Post Detail

[benpeter]

Summary

Produced DDD-005-post-detail.md defining the complete reading experience for individual blog posts at /blog/{slug}: post header (type badge, h1, metadata line with dates and tags), and every article body element (h2/h3, paragraphs, code blocks, inline code, blockquotes, pull-quotes, lists, tables, links, horizontal rules). All visual elements map to existing CSS custom properties — no new tokens proposed. Status: Proposal.

Original Prompt

Source: GitHub Issue #6 — "DDD-005: Propose Post Detail"

A Design Decision Document (DDD-005-post-detail.md) that defines the complete reading experience for individual blog posts — title, metadata, and every content element an article body can contain — so that implementation agents can build a cohesive, typographically precise post page.

Key Design Decisions

1. h1 at --heading-font-size-xxl (48px/42px): Not xl. The 1.33x ratio between h1 (48px) and h2 (36px) creates clear hierarchy. xl would collide with h2.
2. <header> for post metadata, not <footer>: On a detail page, title + metadata are introductory content (HTML spec). Inverts the DDD-004 index pattern where entry metadata is a <footer>.
3. Type badge: aria-hidden + sr-only prefix in h1: Same dual pattern as DDD-004, adapted for h1 context. DOM text title-case, CSS uppercase.
4. Pull-quotes as <figure aria-hidden="true"><blockquote>: Visual-only device. Content MUST exist elsewhere in article body. <figure> avoids extra landmark (unlike <aside>).
5. Blockquotes require Quote block: EDS does not produce <blockquote> from default content. Authors must use table-format Quote block. Pull-quotes are a Quote block variant.
6. Scoping via body.post-detail: All spacing/typography overrides scoped to post context. Global styles.css heading margins (0.8em/0.25em) unchanged.
7. Body links underlined by default: Inverts global link style per WCAG 1.4.1. Scoped to post body content.
8. No syntax highlighting V1: Ship plain styled code blocks. Prism.js deferred to delayed.js in a future DDD.
9. h4+ explicitly prohibited: Three levels (h1/h2/h3) sufficient. Content should be restructured if a fourth level is needed.
10. Code block border-radius: 0: Override boilerplate 8px. No rounded containers per aesthetic rules.

Phases

Phase 1: Meta-Plan

Identified 3 specialist agents for planning consultation: ux-design-minion, accessibility-minion, frontend-minion.

Phase 2: Specialist Planning (3 agents)

All 3 specialists contributed domain expertise. Key findings:

• ux-design-minion: Validated heading spacing (h2 2em/0.5em, h3 1.5em/0.5em), symmetric 1.5em code block spacing, pull-quote with 3px gold border and Source Serif 4
• accessibility-minion: <header> not <footer>, pull-quotes aria-hidden, sr-only prefix in h1, tabindex="0" on <pre>, h4+ prohibited
• frontend-minion: Blockquotes require Quote block, decorateButtons() link transformation, no syntax highlighting V1, 68ch = ~40-45 monospace chars

Phase 3: Synthesis

Resolved 5 conflicts into a single-task execution plan: h1 size (xxl over xl), inline code border-radius (2px over 3px), list item spacing (0.35em over 0.3em), pull-quote aria-hidden confirmed, Quote block with variant over separate block.

Phase 3.5: Architecture Review (6 reviewers)

5 mandatory (security, test, ux-strategy, lucy, margo) + 1 discretionary (accessibility-minion). 3 APPROVE, 3 ADVISE, 0 BLOCK. 4 advisory items incorporated into the execution prompt.

Phase 4: Execution (1 task, 1 gate)

ux-design-minion (opus) wrote DDD-005-post-detail.md (708 lines). Gate approved.

Phases 5-8

Skipped (docs-only changes). Code review not applicable — documentation-only file. Tests not applicable — no executable code. Documentation: the DDD itself is the deliverable.

Agent Contributions

Planning agents (Phase 2)

Agent	Contribution
ux-design-minion	Spacing scale validation, pull-quote visual treatment, h1 sizing, metadata gap rationale
accessibility-minion	Semantic HTML structure, ARIA patterns, heading hierarchy, keyboard scrollability
frontend-minion	EDS DOM constraints, Quote block requirement, decorateButtons() side effect, code block overflow

Architecture reviewers (Phase 3.5)

Reviewer	Verdict	Key finding
security-minion	APPROVE	No security gaps in design document patterns
test-minion	APPROVE	Correctly assessed as no-test artifact; noted 3 future test surfaces for implementation
ux-strategy-minion	APPROVE	Coherent reading flow; noted series metadata visibility gap
lucy	ADVISE	DDD-005 absorbs DDD-006 scope (justified); stale README wireframe guidance
margo	ADVISE	Sub-pixel spacing precision unlikely to survive implementation; CSS selector over-specification
accessibility-minion	ADVISE	Tag link contrast (--color-link vs --color-text-muted) should be explicitly documented

Execution

Task 1: Write DDD-005-post-detail.md

• Agent: ux-design-minion (opus)
• Status: Completed
• Deliverable: docs/design-decisions/DDD-005-post-detail.md (+708 lines)
• Gate: Approved

Verification

Verification: skipped (docs-only changes). (Code review: not applicable — documentation-only file. Tests: not applicable — no executable code. Docs: the DDD itself is the deliverable.)

Session Resources

Skills Invoked

• /nefario — orchestration workflow

Compaction

1 compaction event during session (after Phase 3 synthesis).

Working Files

Companion directory: docs/history/nefario-reports/2026-03-13-174907-ddd-005-post-detail/

File	Description
prompt.md	Original user request
phase1-metaplan-prompt.md	Meta-plan input prompt
phase1-metaplan.md	Meta-plan output (3 specialists)
phase2-*-prompt.md	Specialist planning prompts (3 files)
phase2-*.md	Specialist planning contributions (3 files)
phase3-synthesis-prompt.md	Synthesis input prompt
phase3-synthesis.md	Synthesized execution plan with 5 conflict resolutions
phase3.5-*-prompt.md	Architecture review prompts (6 files)
phase3.5-*.md	Architecture review verdicts (6 files)
phase4-ux-design-minion-prompt.md	Execution task prompt with 4 advisories incorporated

Resolves #6

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• c4d96cc ✅ (latest)
• 562c717 ✅
• 1069054 ✅
• e6c8fec ✅