# Enhance UI

> Systematic UI enhancement and verification. Covers styling upgrades, responsiveness, and rigorous integrity testing to prevent code regression/loss.

- Skill: `krishnakanthb13/enhance-ui` (Agent Skill)
- Install (CLI): `npx skillmds@latest add krishnakanthb13/enhance-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/krishnakanthb13/enhance-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: krishnakanthb13 (https://skillmd.com/u/krishnakanthb13)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/krishnakanthb13/enhance-ui

---


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