fix-ui

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

⚠️ Anti-Hallucination Reminder

⚠️ 防幻觉提醒

Before modifying ANY code: Verify assumptions with actual code evidence. Search for usages, read implementations, trace dependencies. If confidence < 90% on any change, investigate first or ask user. See

.claude/skills/shared/anti-hallucination-protocol.md

for full protocol.

在修改任何代码之前： 用实际代码证据验证假设。搜索用法、阅读实现代码、追踪依赖关系。如果对任何修改的信心低于90%，请先调查或询问用户。完整流程请查看

.claude/skills/shared/anti-hallucination-protocol.md

。

Required Skills (Priority Order)

必备技能（优先级排序）

ui-ux-pro-max
- Design intelligence database (ALWAYS ACTIVATE FIRST)
frontend-design
- Implementation patterns

Use

ui-ux-designer

subagent to read and analyze

./docs/design-guidelines.md

then fix the following issues: <issue>$ARGUMENTS</issue>

ui-ux-pro-max
- 设计智能数据库（务必首先激活）
frontend-design
- 实现模式

使用

ui-ux-designer

子代理读取并分析

./docs/design-guidelines.md

，然后解决以下问题： <issue>$ARGUMENTS</issue>

Workflow

工作流程

FIRST: Run

ui-ux-pro-max

searches to understand context and common issues:

bash

python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "z-index animation" --domain ux

If the user provides a screenshots or videos, use

ai-multimodal

skill to describe as detailed as possible the issue, make sure developers can predict the root causes easily based on the description.

Use
```
ui-ux-designer
```
subagent to implement the fix step by step.
Use screenshot capture tools along with
```
ai-multimodal
```
skill to take screenshots of the implemented fix (at the exact parent container, don't take screenshot of the whole page) and use the appropriate Gemini analysis skills (
```
ai-multimodal
```
,
```
video-analysis
```
, or
```
document-extraction
```
) to analyze those outputs so the result matches the design guideline and addresses all issues.

If the issues are not addressed, repeat the process until all issues are addressed.

Use
```
test-ui
```
skill to analyze the implemented fix and make sure it matches the design guideline.
Use
```
tester
```
agent to test the fix and compile the code to make sure it works, then report back to main agent.

If there are issues or failed tests, ask main agent to fix all of them and repeat the process until all tests pass.

Project Management & Documentation: If user approves the changes: Use
```
project-manager
```
and
```
docs-manager
```
subagents in parallel to update the project progress and documentation:
- Use
```
project-manager
```
  subagent to update the project progress and task status in the given plan file.
- Use
```
docs-manager
```
  subagent to update the docs in
```
./docs
```
  directory if needed.
- Use
```
project-manager
```
  subagent to create a project roadmap at
```
./docs/project-roadmap.md
```
  file.
- IMPORTANT: Sacrifice grammar for the sake of concision when writing outputs. If user rejects the changes: Ask user to explain the issues and ask main agent to fix all of them and repeat the process.
Final Report:

Report back to user with a summary of the changes and explain everything briefly, guide user to get started and suggest the next steps.
Ask the user if they want to commit and push to git repository, if yes, use
```
git-manager
```
subagent to commit and push to git repository.
IMPORTANT: Sacrifice grammar for the sake of concision when writing reports.
IMPORTANT: In reports, list any unresolved questions at the end, if any.

REMEMBER:

You can always generate images with
```
ai-multimodal
```
skill on the fly for visual assets.
You always read and analyze the generated assets with
```
ai-multimodal
```
skill to verify they meet requirements.
For image editing (removing background, adjusting, cropping), use
```
ImageMagick
```
skill or similar tools as needed.
IMPORTANT: Analyze the skills catalog and activate the skills that are needed for the task during the process.

第一步：运行

ui-ux-pro-max

搜索以了解上下文和常见问题：

bash

python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<product-type>" --domain product
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "<style-keywords>" --domain style
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux
python3 $HOME/.claude/skills/ui-ux-pro-max/scripts/search.py "z-index animation" --domain ux

如果用户提供了截图或视频，使用

ai-multimodal

技能尽可能详细地描述问题，确保开发人员可以根据描述轻松预测根本原因。

使用
```
ui-ux-designer
```
子代理逐步实施修复。
使用截图捕获工具结合
```
ai-multimodal
```
技能对已实施的修复进行截图（精确到父容器，不要截取整个页面），并使用合适的Gemini分析技能（
```
ai-multimodal
```
、
```
video-analysis
```
或
```
document-extraction
```
）分析这些输出，确保结果符合设计指南并解决所有问题。

如果问题未解决，请重复该过程直至所有问题都得到解决。

使用
```
test-ui
```
技能分析已实施的修复，确保其符合设计指南。
使用
```
tester
```
代理测试修复并编译代码以确保其正常工作，然后向主代理报告。

如果存在问题或测试失败，请要求主代理修复所有问题并重复该过程直至所有测试通过。

项目管理与文档： 如果用户批准修改： 并行使用
```
project-manager
```
和
```
docs-manager
```
子代理更新项目进度和文档：
- 使用
```
project-manager
```
  子代理在指定计划文件中更新项目进度和任务状态。
- 如有需要，使用
```
docs-manager
```
  子代理更新
```
./docs
```
  目录中的文档。
- 使用
```
project-manager
```
  子代理在
```
./docs/project-roadmap.md
```
  文件中创建项目路线图。
- 重要提示： 撰写输出时，为简洁性可适当牺牲语法。 如果用户拒绝修改： 请用户解释问题所在，并要求主代理修复所有问题并重复该过程。
最终报告：

向用户返回修改摘要，简要说明所有内容，指导用户开始使用并建议下一步操作。
询问用户是否要提交并推送到git仓库，如果是，使用
```
git-manager
```
子代理提交并推送到git仓库。
重要提示： 撰写报告时，为简洁性可适当牺牲语法。
重要提示： 在报告末尾列出所有未解决的问题（如果有）。

请记住：

您可以随时使用
```
ai-multimodal
```
技能即时生成视觉资源。
您始终需要使用
```
ai-multimodal
```
技能读取和分析生成的资源，以验证其是否符合要求。
对于图像编辑（去除背景、调整、裁剪），根据需要使用
```
ImageMagick
```
技能或类似工具。
重要提示： 分析技能目录，并在过程中激活完成任务所需的技能。

IMPORTANT Task Planning Notes

重要的任务规划注意事项

Always plan and break many small todo tasks
Always add a final review todo task to review the works done at the end to find any fix or enhancement needed

始终规划并拆分多个小型待办任务
始终添加最终审查待办任务，在结束时审查已完成的工作，以发现任何需要修复或增强的内容