Does it support modern accessibility standards?

Absolutely. It includes focus-visible indicators for keyboard users, adds aria-busy for loading states, and includes media queries for prefers-reduced-motion.

How does it handle my existing design system?

The skill performs a consistency check to identify and use your existing design tokens for colors, spacing, and typography instead of hardcoding values.

What does the Component Polish skill actually do?

It analyzes your frontend component code and automatically adds CSS or styling for interactive states like hover, focus, and loading, along with animations and accessibility refinements.

Can I run specific parts of the polish pass instead of the whole thing?

Yes, you can target specific areas using arguments like '/component-polish states' for interactive logic or '/component-polish interactions' for animations.

Which frameworks is this compatible with?

It is designed to work with most modern frontend frameworks including React, Vue, and Svelte, adapting its output to match your project's styling patterns.

Component Polish

Name: Component Polish
Author: cbemister

bycbemister

0•

设计工具

Refines frontend components to production standards by adding interactive states, micro-interactions, and professional visual refinements.

Component Polish is a specialized Claude Code skill designed to bridge the gap between functional UI and high-quality production interfaces. It automates the implementation of essential interactive states like hover, focus, and loading, while adding fluid micro-interactions and entrance animations that make applications feel responsive and alive. By enforcing design system consistency and accessibility best practices—such as focus indicators and reduced-motion support—it ensures your components are not only visually polished but also performant and inclusive.

主要功能

010 GitHub stars

02Staggered entrance animations and smooth skeleton loading states

03Performance-optimized micro-interactions using transform and opacity properties

04Automatic application of interactive states (hover, focus, active, disabled, loading)

05Accessibility-first styling including focus-visible and reduced-motion support

06Design system consistency checks for color tokens, spacing, and typography

使用场景

01Adding smooth transitions and motion to static dashboards or list views

02Finalizing UI components before a production release to ensure professional quality

03Improving the accessibility of existing interfaces through visible focus states and ARIA attributes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cbemister/claude-code-utils component-polish

For use in Claude.ai and ChatGPT

主要功能

010 GitHub stars

02Staggered entrance animations and smooth skeleton loading states

03Performance-optimized micro-interactions using transform and opacity properties

04Automatic application of interactive states (hover, focus, active, disabled, loading)

05Accessibility-first styling including focus-visible and reduced-motion support

06Design system consistency checks for color tokens, spacing, and typography

使用场景

01Adding smooth transitions and motion to static dashboards or list views

02Finalizing UI components before a production release to ensure professional quality

03Improving the accessibility of existing interfaces through visible focus states and ARIA attributes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cbemister/claude-code-utils component-polish

For use in Claude.ai and ChatGPT