Back to Marketplace

Run this helper free

Answer 3 questions. Get a result in 2 minutes. Preview free.

Start free →
FREE
Verified
Grow Business

Skill.MD - Dinner Picker Project Skill

Safe UI-only changes without touching expense and account logic

❌ UI/UX changes risk breaking business logic and data sync in expense tracking projects without clear architectural guidance.

✅ Quickly modify UI components and layouts while preserving all business logic and data synchronization flows.

  • ✓Pre-change architecture review prevents breaking business logic
  • ✓Component-focused updates for ExpenseList, Form, Summary, Panel
  • ✓Mobile-first RWD adjustments with safe-area constraints
  • ✓SVG icon management in dedicated component directory
  • ✓CSS token system prevents hardcoded styling values

👁 3 views · 📦 0 installs

Install in one line

$ mfkvault install chihpao-dinner-picker

Requires the MFKVault CLI. Prefer MCP?

No reviews yet
🤖 Claude Code⚡ Cursor💻 Codex🦞 OpenClaw
FREE

Free to install — no account needed

Copy the command below and paste into your agent.

Instant access • No coding needed • No account needed

What you get in 5 minutes

  • Full skill code ready to install
  • Works with 4 AI agents
  • Lifetime updates included
VerifiedSecureBe the first
Ready to run

Run this helper

Answer a few questions and let this helper do the work.

▸Advanced: use with your AI agent

Description

# 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) - 先給結果摘要（改了什麼） - 再列出改動檔案清單 - 最後附驗證與風險（若未測試需明確說明）

Preview in:

Security Status

Verified

Manually verified by security team

Time saved
How much time did this skill save you?

Related AI Tools

More Grow Business tools you might like

codex-collab

Free

Use when the user asks to invoke, delegate to, or collaborate with Codex on any task. Also use PROACTIVELY when an independent, non-Claude perspective from Codex would add value — second opinions on code, plans, architecture, or design decisions.

Rails Upgrade Analyzer

Free

Analyze Rails application upgrade path. Checks current version, finds latest release, fetches upgrade notes and diffs, then performs selective upgrade preserving local customizations.

Asta MCP — Academic Paper Search

Free

Domain expertise for Ai2 Asta MCP tools (Semantic Scholar corpus). Intent-to-tool routing, safe defaults, workflow patterns, and pitfall warnings for academic paper search, citation traversal, and author discovery.

Hand Drawn Diagrams

Free

Create hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups. Default to monochrome sketch output; allow restrained color only for page mockups when the user explicitly wants webpage-like fidelity.

Move Code Quality Checker

Free

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working

Claude Memory Kit

Free

"Persistent memory system for Claude Code. Your agent remembers everything across sessions and projects. Two-layer architecture: hot cache (MEMORY.md) + knowledge wiki. Safety hooks prevent context loss. /close-day captures your day in one command. Z