What design reference sites does this skill use?

It automatically selects or allows manual selection of sites like Mobbin, Godly, Dribbble, and Lapa Ninja based on your specific project type and framework.

Does it support mobile development frameworks?

Yes, it is specifically designed to work with mobile-first frameworks like Flutter and React Native, as well as modern web stacks like Next.js.

How does the skill analyze my current design?

It uses a Puppeteer-based capture script to take screenshots of your local development server and analyzes them using Claude's vision capabilities.

Can it fix accessibility issues automatically?

Yes, when using the --apply flag, the skill prioritizes 'Critical' accessibility fixes such as color contrast adjustments and touch target sizing.

Design Polish & Accessibility Auditor

Name: Design Polish & Accessibility Auditor
Author: vp-k

byvp-k

•

Herramientas de Diseño

Refines UI/UX by comparing project code against industry design trends and ensuring WCAG accessibility compliance.

The design-polish skill automates the process of visual and functional UI refinement for web and mobile applications. It analyzes current project screenshots, searches leading design reference sites like Mobbin or Godly for modern trends, and performs a detailed gap analysis. By integrating axe-core for WCAG auditing, it identifies accessibility violations and generates actionable improvement plans. With the optional apply flag, it can automatically implement CSS and component modifications to enhance layout, typography, and color contrast, ensuring a professional and inclusive user experience.

Características Principales

01WCAG accessibility auditing using axe-core to ensure AA compliance

02Support for multiple frameworks including Flutter, React, Vue, and Next.js

031 GitHub stars

04Automated UI trend searching across curated reference sites like Mobbin and Dribbble

05Visual gap analysis comparing current project screenshots with industry standards

06Automated code application of design improvements using the --apply flag

Casos de Uso

01Modernizing a legacy application's UI to align with current design aesthetics

02Ensuring a project meets legal and ethical accessibility standards (WCAG 2.1)

03Rapidly prototyping and implementing UI refinements during the development cycle

Características Principales

01WCAG accessibility auditing using axe-core to ensure AA compliance

02Support for multiple frameworks including Flutter, React, Vue, and Next.js

031 GitHub stars

04Automated UI trend searching across curated reference sites like Mobbin and Dribbble

05Visual gap analysis comparing current project screenshots with industry standards

06Automated code application of design improvements using the --apply flag

Casos de Uso

01Modernizing a legacy application's UI to align with current design aesthetics

02Ensuring a project meets legal and ethical accessibility standards (WCAG 2.1)

03Rapidly prototyping and implementing UI refinements during the development cycle