jiapuapp/docs/superpowers/plans/2026-07-19-f01-family-feed-baseline-redesign.md

F01 Family Feed Baseline Redesign Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking. This project explicitly forbids subagents, worktrees, staging, and commits.

Goal: Replace F01's application-status cards with a dedicated transparent family-letter content card and make all four shortcuts usable at every supported viewport.

Architecture: Keep F01 state and navigation logic unchanged. Add one F01-owned raster card skin under the family module, update only F01 markup/styles, and protect the asset, hierarchy, touch-target, and state contracts with a focused PowerShell test plus existing runtime coverage.

Tech Stack: uni-app, Vue 3 <script setup>, SCSS, built-in image editing/generation, PowerShell contract tests, Chrome DevTools Protocol runtime smoke.

Global Constraints

• Modify only F01 and its directly related tests, candidate asset, specs, plan, and screenshots.
• Keep PageHeader, publish routing, family context, module background, AppTabbar, feed states, shortcut labels, and destination routes unchanged.
• Do not use application-status-card.png in F01.
• Use a real F01-owned transparent PNG for the family-letter card; do not draw the card with CSS, SVG, text symbols, or placeholders.
• Shortcut and primary-action touch heights must be at least 44 CSS px at 320, 360, and 412 widths.
• Do not run git add, commit, push, reset, or checkout.
• Reuse the existing Chrome project tab and debugging port 9222.
• H5 screenshots are candidate evidence only; Android/HBuilderX remains unverified.

---

Task 1: Lock the F01 baseline contract

Files:

• Create: tests/f01-module-baseline-contract.ps1
• Test: tests/f01-module-baseline-contract.ps1

Interfaces:

• Consumes: UTF-8 source of pages/family/f01-family-feed.vue.

• Produces: assertions for the dedicated card asset, no application card, explicit content hierarchy, and 44px shortcut height.

• Step 1: Write the failing contract

Create a test that checks:

$ErrorActionPreference = 'Stop'
$root = Split-Path -Parent $PSScriptRoot
$page = Get-Content -LiteralPath (Join-Path $root 'pages/family/f01-family-feed.vue') -Raw -Encoding utf8

function Assert-Match([string]$Pattern, [string]$Message) {
  if ($page -notmatch $Pattern) { throw $Message }
}

Assert-Match 'modules/family/transparent/f01-family-letter-card\.png' 'F01 must use its dedicated transparent family-letter card.'
if ($page -match 'application-status-card\.png') { throw 'F01 must not reuse the application status card.' }
Assert-Match 'class="feed-card__title"' 'F01 must expose an explicit feed title hierarchy.'
Assert-Match 'class="feed-card__meta"' 'F01 must expose category and time as secondary metadata.'
Assert-Match 'class="feed-card__summary"' 'F01 must expose feed summary copy.'
Assert-Match 'class="feed-card__author"' 'F01 must expose the author as tertiary information.'
Assert-Match '(?s)\.feed-shortcut\s*\{[^}]*min-height:\s*44px;' 'F01 shortcuts must preserve a 44 CSS px touch height.'

Write-Output 'F01-MODULE-BASELINE-CONTRACT PASS'

• Step 2: Run and verify RED

Run:

powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1

Expected: FAIL because F01 still uses application-status-card.png and has no dedicated class hierarchy.

Task 2: Create the dedicated family-letter card asset

Files:

• Create: static/assets/modules/family/transparent/f01-family-letter-card.png
• Preserve: every existing asset under static/assets/modules/family/ and static/assets/modules/genealogy/.

Interfaces:

• Consumes: the accepted F01 screenshot and family-page-background-long.png as palette/context references.

• Produces: one transparent PNG content-card skin used by list, empty, and error states.

• Step 1: Generate one chroma-key candidate with built-in image generation

Use this exact design intent:

Use case: precise-object-edit / UI asset generation
Asset type: F01 family-feed content-card skin
Primary request: create a wide traditional Chinese family-letter card with a warm ivory rice-paper interior, one restrained thin antique-gold border, subtle family-letter corner details, and no content text.
Composition: wide horizontal card, approximately 3.1:1, designed for a 386×124 CSS px slot.
Palette: match the existing family module background and cinnabar header; keep the card quiet enough for feed text.
Background: perfectly flat #00ff00 chroma key only outside the card.
Constraints: no red vertical line, no top-right status ornament, no buttons, no labels, no icons, no shadows, no white rectangle outside the gold border, no watermark.

• Step 2: Convert chroma key to alpha and crop transparent bounds

Use the installed remove_chroma_key.py with the real Python launcher at C:\Users\Rain\AppData\Local\Python\bin\python.exe, validate transparent corners and visible-card bounds, then save the non-destructive final file at the path above.

Task 3: Implement F01 content hierarchy and touch targets

Files:

• Modify: pages/family/f01-family-feed.vue
• Modify: tests/root-pages-visual-contract.ps1
• Test: tests/f01-module-baseline-contract.ps1

Interfaces:

• Consumes: existing feedState, feeds, shortcuts, toPublish, openDetail, and openSection without signature changes.

• Produces: dedicated card markup/classes and 44px shortcut controls.

• Step 1: Replace list-card markup

Each feed-card must use the new asset and explicit hierarchy:

<image class="feed-card__skin" src="/static/assets/modules/family/transparent/f01-family-letter-card.png" mode="scaleToFill" />
<view class="feed-card__copy">
  <text class="feed-card__meta">{{ item.tag }} · {{ item.time }}</text>
  <text class="feed-card__title">{{ item.title }}</text>
  <text class="feed-card__summary">{{ item.content }}</text>
  <text class="feed-card__author">发布人：{{ item.author }}</text>
</view>

• Step 2: Replace empty/error panel skin

Use the same F01 asset for feed-state-card, preserving current empty/error copy and retry behavior.

• Step 3: Tighten styles

Set .feed-shortcut to min-height: 44px, place one shared a01-scroll-secondary-v3.png skin behind a four-column equal-width shortcut grid, make the title the largest feed-card text, and keep two equal-height cards between 116 and 132 CSS px at 412px width. Do not add decorative CSS shapes.

• Step 4: Update the root-page asset contract

Replace only F01's required application-status-card.png entry with f01-family-letter-card.png; leave N01 and M01 requirements unchanged.

• Step 5: Run and verify GREEN

Run:

powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1

Expected: F01-MODULE-BASELINE-CONTRACT PASS.

Task 4: Regression and visual verification

Files:

• Verify: pages/family/f01-family-feed.vue
• Create evidence only under: docs/design/screens/runtime/2026-07-19/f01-baseline-redesign/

Interfaces:

• Consumes: running H5 service on 5173 and the unique existing Chrome project tab on 9222.

• Produces: regression output, responsive metrics, and accepted F01 screenshots.

• Step 1: Run related contracts

Run:

powershell -ExecutionPolicy Bypass -File tests/f01-module-baseline-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/f-series-all-states-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/root-pages-visual-contract.ps1
powershell -ExecutionPolicy Bypass -File tests/module-app-loading-contract.ps1

Expected: every command reports PASS.

• Step 2: Run runtime coverage

Run:

node tests/root-pages-runtime-smoke.js
node tests/module-series-responsive-runtime-smoke.js

Expected: both commands report PASS and only one project tab is used.

• Step 3: Capture and inspect F01 states

Capture list, loading, empty, and error at 412×915. First present only the normal list state for user approval; keep later states hidden until requested.

• Step 4: Self-audit responsive sizes

Capture 320×568, 360×640, 360×800, and 412×915 list state. Verify no overflow, clipped text, card mismatch, shortcut below 44px, or Tab overlap. Restore the tab to 412×915.

• Step 5: Run source hygiene checks

Run:

git diff --check
git status --short

Expected: no whitespace errors; all pre-existing modified and untracked files remain present. Do not stage or commit anything.

Self-Review

• Spec coverage: dedicated family card, no white gutter/application semantics, hierarchy, states, 44px shortcuts, responsive sizes, interactions, and evidence limits are covered.
• Placeholder scan: no TBD, TODO, deferred asset decision, or unspecified command remains.
• Interface consistency: F01 state and navigation functions stay unchanged; new class names match the focused contract and implementation steps.