四階段使用同一份檔案骨架。Checkpoint 只逐項完成任務,Solution 不加入延伸功能。
| 任務 | 完成標記 | 修改檔案 | 修改位置 | 可見結果 |
|---|---|---|---|---|
| TASK-01 讓 CTA 的滑入、按下與鍵盤焦點可辨識 | DONE-01 | style.css | .cta-button、:hover、:active、:focus-visible | 按鈕有平順位移、按壓回饋與焦點框 |
| TASK-02 替處理中徽章加入有限度的動畫 | DONE-02 | style.css | .status-pill 與 @keyframes status-pulse | 處理中標籤以淡入淡出提示狀態 |
| TASK-03 尊重減少動態效果偏好 | DONE-03 | style.css | @media (prefers-reduced-motion: reduce) | 系統偏好減少動態時取消轉場與動畫 |
階段差異
starter/:三項 TASK 都保留,先讀骨架與預測結果。checkpoint-1/:只完成 DONE-01。checkpoint-2/:保留 DONE-01,再完成 DONE-02。solution/:只在相同位置完成 DONE-03;沒有無關重構。
人工驗收
錄下滑鼠、鍵盤與 reduced-motion 三種操作,並口頭說明哪一個是 transition、哪一個是 animation。