How do I install the Enhance UI skill?

Run npx skillmds@latest add krishnakanthb13/enhance-ui in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Enhance UI safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Enhance UI?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Enhance UI free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Enhance UI?

krishnakanthb13 (@krishnakanthb13) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Enhance UI by krishnakanthb13 — Agent Skill

Name: Enhance UI
Author: krishnakanthb13

File contents

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.

---name: enhance-uidescription: Systematic UI enhancement and verification. Covers styling upgrades, responsiveness, and rigorous integrity testing to prevent code regression/loss.---# Enhance UI & VerificationUse 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 & UXFor 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.

Frequently asked questions

Enhance UI