AgentSkillsCN

Quality Checklist

Spendwise 的预提交质量检查清单

SKILL.md
--- frontmatter
description: Pre-commit quality checklist for Spendwise
globs: "**/*"
alwaysApply: false

Quality Checklist

Run through this before committing changes.

Build Verification

  • • npm run dev boots without errors
  • • npm run build passes
  • • npm run lint passes (if enabled)
  • • npm run server starts and serves /api/data

Frontend (src/**/*)

React + State

  • • FinanceContext derived data stays consistent
  • • Filters behave correctly for date/category
  • • No unnecessary re-renders for charts or grid
  • • CRUD operations use useCallback
  • • Derived data uses useMemo

UI/UX

  • • Glassmorphic styles preserved (glass-card, mesh-gradient)
  • • Contrast readable on dark backgrounds (text-white/50 minimum)
  • • Buttons and inputs show hover/focus states
  • • Focus rings visible (focus-visible:ring-2)
  • • Empty states and loading states are clear
  • • Mobile sidebar works (hamburger menu)
  • • Touch targets at least 44px

Utilities

  • • Using cn() from src/lib/utils.js for conditional classes
  • • Using formatters from src/lib/formatters.js
  • • Using helpers from src/lib/helpers.js

Error Handling

  • • ErrorBoundary wraps the app
  • • Save errors show in Toast
  • • Forms show inline validation errors
  • • Loading states during fetch/save

Backend (server/index.js)

Data Integrity

  • • db.json writes are atomic (temp file + rename)
  • • API responses return valid JSON
  • • No hardcoded secrets or private data

Validation

  • • UUIDs validated
  • • Strings sanitized (HTML stripped)
  • • Types enforced (expense/income)
  • • Amounts are non-negative numbers
  • • Colors are valid hex format
  • • Array limits enforced (10k transactions, 100 categories)

Security

  • • CORS restricted to localhost origins
  • • No arbitrary file access
  • • Input length limits enforced

Documentation

If API Changed

  • • README.md updated
  • • ARCHITECTURE.md updated
  • • Any new endpoints documented

If UI Changed

  • • New components documented in code
  • • Pattern changes reflected in ui-patterns skill

If Utilities Changed

  • • project-guide skill updated
  • • JSDoc comments added to new functions

Git Hygiene

  • • Commit message describes the "why"
  • • No stray console.log left in production paths
  • • No commented-out code blocks
  • • .gitignore covers generated artifacts

Quick Checks

bash
npm run build
npm run lint
npm run server

Manual Testing

  1. •Add a transaction → verify it appears
  2. •Edit a transaction → verify changes persist
  3. •Delete a transaction → verify removal
  4. •Stop server → try to save → verify toast appears
  5. •Test mobile sidebar on narrow viewport
  6. •Verify focus states are visible on all buttons