| name | enhance_ui |
| description | Systematic UI enhancement and verification. Covers styling upgrades, responsiveness, and rigorous integrity testing to prevent code regression/loss. |
Enhance UI & Verification
Use this skill when the user wants to improve the appearance/interaction of a UI or ensure that recent edits haven't broken the interface.
Inputs
- Target Component/Page: The specific file or UI section to enhance.
- Goals: Specific improvements (e.g., "Add hover states").
Tooling Strategy
- Use
view_file to analyze current styles.
- Use
replace_file_content to apply styles.
- Use
generate_image if needing to visualize a new design (optional).
Workflow
1. Visual Polish & UX
For the target UI component/page:
- Interaction: Add distinct hover/active states for all interactive elements.
- Typography: Ensure hierarchy (headings vs body) and legibility.
- Spacing: Check padding/margins to prevent "crowded" layouts.
- Responsiveness: Verify layout behavior on mobile vs desktop.
2. Integrity Checks (The "Anti-Regression" Filter)
Before finalizing any UI code change:
- Code Block Check: Explicitly verify that no existing logic or code blocks were accidentally removed.
- Completeness: ensure large files weren't truncated.
- Event Listeners: Ensure button clicks/inputs still trigger their attached JS functions.
3. Testing Suite
- Smoke Test: Does the code compile/render without immediate errors?
- UI Test: Do key elements (buttons, forms, modals) appear as expected?
- Responsive Check: Does it break when the viewport shrinks?
4. Output
- Apply the enhancements.
- Report: "Applied [Styles]. Verified [Integrity Checks]. Confirmed no code loss."
Advanced UI Verification (Pro-Max Guidelines)
When executing enhancements, enforce these additional standards:
- Accessibility (a11y): Ensure all interactive elements have visible focus states for keyboard navigation. Verify semantic HTML and ARIA labels.
- Performance Impact: Ensure visual enhancements (like heavy animations or background blurs) do not negatively impact Core Web Vitals (e.g., preventing Cumulative Layout Shift).
- Micro-interactions: Beyond static hover states, add subtle transitions (e.g.,
transition-all duration-200) for premium feel.
