# Skill.MD - Dinner Picker Project Skill

## Skill Name
`dinner-picker-ui-maintainer`

## Goal
在不破壞既有商業邏輯與資料同步流程下，快速完成本專案的 UI/UX、RWD、元件與導覽調整。

## When To Use
- 使用者要求先檢視專案架構再動手改 UI
- 調整 `pages/total*` 相關頁面布局
- 調整 `ExpenseList`、`ExpenseForm`、`ExpenseSummary`、`AccountPanel`
- 新增或替換 icon component
- 修正 mobile 導覽列、safe-area、點擊區域

## Core Constraints
1. 預設不得改動 business logic（尤其 `composables/useExpenses.ts`、`useAccounts.ts`）
2. 視覺 token 以 `assets/css/main.css` 為準，不硬寫魔術數字
3. 動作按鈕優先 icon，不回退成純文字
4. 新 SVG icon 必須放在 `components/icons/` 且包在 `<template>`
5. 保持底部導覽 4 項：`/`、`/total/entry`、`/total`、`/total/accounts`

## Architecture Quick Read Order
1. `AGENTS.MD`
2. `nuxt.config.ts` (baseURL, PWA, build mode)
3. `layouts/default.vue` (desktop/sidebar + mobile nav 結構)
4. `pages/total/*.vue` (實際頁面組合方式)
5. `components/*` (要修改的呈現元件)
6. `composables/*` (只讀理解資料流，非必要不改)

## Execution Workflow
1. 先盤點檔案結構與路由，確認影響範圍
2. 明確區分 UI 層與資料層改動
3. 只改必要元件與 scoped CSS
4. 檢查 mobile (`<=720px`) 版面是否維持單欄、可點擊、無溢出
5. 檢查 desktop 與 mobile 切換是否符合既有 layout 行為
6. 回報變更檔案與驗證結果

## Mobile QA Minimum
- `/total` 單列資料可讀、可點
- `/total/entry` 在 360px 下可用
- `/total/accounts` 卡片動作鍵可見
- 底部 nav 安全區 padding 正常
- Header 與 summary 區不互相擠壓

## Output Format (for agent replies)
- 先給結果摘要（改了什麼）
- 再列出改動檔案清單
- 最後附驗證與風險（若未測試需明確說明）