AgentSkillsCN

web-designer

检查并修复 MoneyWiz 的 UI 设计问题。适用于修复设计与对齐问题、提升无障碍性、修正移动端布局断点,或应用 Tailwind CSS 更新时使用。

SKILL.md
--- frontmatter
name: web-designer
description: Inspect and fix MoneyWiz UI design issues. Use when fixing design/alignment issues, improving accessibility, correcting mobile layout breaks, or applying Tailwind CSS updates.

Web Designer: MoneyWiz

Project Styles

  • Framework: Tailwind CSS v4.
  • Colors:
    • Hot: Red, Orange, Yellow (Accents/Alerts).
    • Cool: Blue, Green (Primary/Secondary).
    • Neural: Gray, White.
  • Breakpoints: Mobile (375px), Tablet (768px), Desktop (1280px).

Workflow

  1. Gather Info: URL? (Usually localhost:5173).
  2. Inspect: Check the page visually. Use DevTools if needed.
  3. Identify Component: Find the .svelte file in src/components/.
  4. Fix: Update Tailwind classes.
  5. Verify: Check changes at relevant breakpoints.

Common Fixes

  • Spacing: Use p-4, m-2, gap-4.
  • Layout: flex, grid.
  • Responsive: hidden md:block, w-full lg:w-1/2.