# 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:

```powershell
$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
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:

```text
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:

```vue
<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
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
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:

```powershell
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:

```powershell
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.