playbooks

home / skills / duc01226 / easyplatform / fix-ui

fix-ui skill

/.claude/skills/fix-ui

This skill analyzes and fixes UI issues in C# applications by applying design guidelines and validation with code evidence.

npx playbooks add skill duc01226/easyplatform --skill fix-ui

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
4.0 KB
---
name: fix-ui
description: "[Fix & Debug] ⚡⚡ Analyze and fix UI issues"
argument-hint: [issue]
infer: true
---

## ⚠️ 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.

## Required Skills (Priority Order)
1. **`ui-ux-pro-max`** - Design intelligence database (ALWAYS ACTIVATE FIRST)
2. **`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>

## 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.

1. Use `ui-ux-designer` subagent to implement the fix step by step.
2. 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.
3. Use `test-ui` skill to analyze the implemented fix and make sure it matches the design guideline.
4. 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.
5. 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.
6. 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.

## 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

Overview

This skill analyzes, debugs, and implements fixes for UI issues in C# frontends and web apps. It coordinates design intelligence and frontend implementation agents to produce reproducible fixes, screenshots, tests, and a final report. It emphasizes verification of assumptions and an iterative test-and-verify workflow.

How this skill works

First, it runs design-intelligence searches to gather context and common patterns for the product and style. It then uses a ui-ux-designer subagent to inspect design guidelines, reproduce the issue, and apply step-by-step code fixes. After implementing a fix, it captures focused screenshots, runs automated UI tests, and compiles the project to confirm correctness before producing a final report and optional commit.

When to use it

  • Visual layout problems (misaligned elements, spacing, inconsistent typography).
  • Interactive issues (broken hover states, focus/keyboard navigation, z-index conflicts).
  • Accessibility bugs (insufficient contrast, missing ARIA attributes, bad tab order).
  • Animation or rendering glitches (flicker, jank, incorrect transitions).
  • When you need a reproducible, test-verified UI fix and documentation for the change.

Best practices

  • Always verify assumptions by searching code usages and tracing dependencies before changing code.
  • Activate the design intelligence agent first to collect common solutions for the product style.
  • Capture focused screenshots of the exact parent container, not the full page, for analysis.
  • Iterate: implement one change, test locally, capture evidence, and repeat until tests pass.
  • Keep changes minimal and reversible; prefer targeted CSS/component fixes over wide refactors.
  • Document fixes and unresolved items at the end of the run for clear handoff.

Example use cases

  • Fix a top navigation bar that overlaps content due to incorrect z-index and missing stacking context.
  • Resolve inconsistent button styles across screens by aligning to design guidelines and refactoring shared styles.
  • Repair keyboard focus order and ARIA labels on a settings panel to meet accessibility checks.
  • Eliminate flicker during animations by adjusting composite properties and reducing repaint triggers.
  • Adjust responsive breakpoints where elements collapse unexpectedly on small screens.

FAQ

How do you avoid making incorrect code changes?

I verify assumptions by searching for usages, reading implementations, and tracing dependencies; if confidence is below 90%, I investigate further or ask for clarification.

Will you run tests and compile the project?

Yes — after fixes I run automated UI tests and compile the project; if tests fail I iterate until they pass or report blocking issues.