ui-ux-polisher

Audit UI/UX quality in React, Next.js, Docusaurus, and Vue projects.

Updated Dec 9, 2025
One-click install
npx skills add https://github.com/sajid-khan-afridi/hackathon1_repeat --skill ui-ux-polisher
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-ux-polisher
Source: https://github.com/sajid-khan-afridi/hackathon1_repeat/tree/main/.claude/skills/ui-ux-polisher
Command: npx skills add https://github.com/sajid-khan-afridi/hackathon1_repeat --skill ui-ux-polisher

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps Claude systematically audit, analyze, and enhance UI/UX quality, reducing design debt and accelerating delivery by proposing up to four prioritized improvements for user approval.

Core Features & Use Cases

  • Discovery: identifies project framework, styling approach, and key UI files.
  • Analysis: detects alignment, spacing, motion, and accessibility issues.
  • Presentation: shows up to 4 improvements with impact and concrete fixes.
  • Implementation: applies only user-approved changes with minimal diffs.
  • Verification: runs a build and reports the outcome.

Quick Start

Invoke the ui-ux-polisher on a project (for example a Docusaurus/Next.js site). Claude reads the project’s package.json, scans CSS files such as custom.css, globals.css, and *.module.css, analyzes 3–5 UI files, proposes 4 improvements, and applies approved changes.

Frequently Asked Questions about ui-ux-polisher

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit UI/UX quality in a React or Next.js project?

UI/UX auditing identifies alignment, spacing, accessibility, and animation issues in your project. This Skill reads your package.json and CSS files, analyzes 3–5 key components, and proposes up to four prioritized improvements with concrete fixes and minimal diffs for your approval.

Can I use this to check accessibility issues in my Vue or Docusaurus site?

Yes. This Skill works with React, Next.js, Vue, and Docusaurus projects that use CSS frameworks. It detects accessibility problems alongside alignment and spacing issues, then proposes fixes tailored to your existing styles and constraints.

What happens after I approve the suggested UI/UX improvements?

Approved changes are applied with minimal diffs to your UI files. The Skill then runs a build to verify that your project compiles successfully and reports the outcome.

How does this Skill reduce design debt without breaking my existing styles?

The Skill enforces a phase-based workflow: discovery identifies your framework and styling approach, analysis detects issues, presentation shows impact and fixes, and implementation requires your explicit approval before touching code, ensuring adherence to your existing design system.

Does this work with custom CSS or only CSS frameworks?

This Skill analyzes projects with CSS frameworks and reads custom CSS files like custom.css, globals.css, and *.module.css. It detects issues across your styling approach and proposes fixes that align with your current setup.

What if I want to review improvements before they're applied to my project?

The Skill presents up to four improvements with problem descriptions, impact statements, and proposed fixes before any changes occur. You must explicitly approve each change; nothing is applied without your sign-off.