OpenSkillIndex← back to search
unknown

dinner-picker

Skill.MD - Dinner Picker Project Skill

install
source · Clone the upstream repo
git clone https://github.com/chihpao/dinner-picker
manifest: Skill.MD
source content

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)

  • 先給結果摘要（改了什麼）
  • 再列出改動檔案清單
  • 最後附驗證與風險（若未測試需明確說明）