Can it help reduce bundle size?

Yes, it identifies heavy components for dynamic importing and suggests removing barrel imports to optimize your application's loading performance.

How do I trigger the UI improvement process?

You can use the explicit `/ui-improve [target]` command or mention keywords like 'UI analysis', 'design improvement', or 'fix alignment' in your conversation with Claude.

What is the 'UI Supervisor' phase?

It is a mandatory final validation step where a specialized agent verifies the changes against critical consistency patterns like PageTitle usage, Sheet padding, and Table wrappers.

Does it support visual verification?

Yes, it integrates with the agent-browser skill to perform visual checks on your local development server, ensuring that styles and layouts are rendered correctly.

What frameworks are supported?

While versatile, it is highly optimized for React and TypeScript environments, specifically enforcing modern standards like Vercel's performance best practices.

UI Improver & Optimizer

Name: UI Improver & Optimizer
Author: invigoworks

byinvigoworks

0•

Design Tools

Analyzes UI elements and automatically applies architectural, visual, and code-level improvements using specialized AI agents.

The UI Improver skill is a comprehensive workflow designed to enhance frontend components within Claude Code. It automates the process of identifying UI inconsistencies, suggesting component reuse opportunities, and applying Vercel-specific best practices. By leveraging a multi-agent architecture—including UX designers and code reviewers—it ensures that UI changes are not only visually appealing but also architecturally sound and consistent with existing design systems. The skill includes automated visual verification and a mandatory supervisor review to guarantee production-grade quality.

Key Features

01Mandatory UI supervisor review for strict design system consistency

02Automated component reuse analysis to minimize redundant code and patterns

03Visual verification via browser automation to ensure layout and styling integrity

04Automated application of improvements using specialized frontend developer agents

05Multi-agent review covering UI/UX design, system architecture, and code quality

060 GitHub stars

Use Cases

01Optimizing web performance by applying Vercel best practices like dynamic imports

02Refactoring legacy UI components to align with a centralized design system

03Performing comprehensive UI audits and automated fixes during the code review process

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add invigoworks/invigo-marketplace ui-improver

For use in Claude.ai and ChatGPT

Download Skill