craftsmanship-polish

What problem does it solve?

This Skill addresses the subtle but critical UI imperfections that erode user trust and perceived quality, ensuring a polished and professional final product.

Core Features & Use Cases

• Pixel-Perfect Alignment: Enforces strict alignment rules for visual harmony.
• Image Optimization: Guides the use of high-resolution, optimized images (AVIF/WebP).
• Shadow & Radius Systems: Establishes consistent, layered shadows and border-radius tokens.
• Interactive States: Ensures clear hover, focus, and active states for all interactive elements.
• Loading/Empty/Error States: Provides guidance on effective skeleton screens, empty states, and error handling.
• Cumulative Layout Shift (CLS): Offers strategies to minimize layout shifts for a smoother user experience.
• Use Case: When refining the UI of a SaaS dashboard, use this Skill to ensure all elements align perfectly, shadows add depth without being heavy, and interactive elements provide clear feedback, resulting in a highly credible and professional interface.

Quick Start

Apply the craftsmanship polish skill to review and improve the alignment, shadows, and interactive states of the user interface components.