skills.rest
oborchers
oborchersCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

craftsmanship-polish

Enforce pixel-perfect alignment, image optimization, shadow systems, and interactive states in UI.

28|3|Updated Feb 22, 2026
Search Tags:#craftsmanship#shadows#cls#pixel perfect#ui polish#border radius#interactive states
One-click install
npx skills add https://github.com/oborchers/fractional-cto --skill craftsmanship-polish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: craftsmanship-polish
Source: https://github.com/oborchers/fractional-cto/tree/main/visual-design-principles/skills/craftsmanship-polish
Command: npx skills add https://github.com/oborchers/fractional-cto --skill craftsmanship-polish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

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.

Frequently Asked Questions about craftsmanship-polish

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

FAQPage Schema
How do I fix Cumulative Layout Shift (CLS) and improve UI polish in my web application?▼

To fix Cumulative Layout Shift (CLS) and improve UI polish, enforce pixel-perfect alignment, optimize image formats like AVIF or WebP, and implement consistent layered shadow and border-radius systems to prevent visual jumping.

What is the best way to establish a consistent shadow and border-radius system for UI components?▼

The best way to establish a consistent shadow and border-radius system is by defining strict design tokens that enforce visual harmony, ensuring shadows add depth without being heavy and radii remain uniform across all interactive elements.

How do I design clear interactive states for hover, focus, and active UI elements?▼

To design clear interactive states for hover, focus, and active UI elements, implement explicit visual feedback guidelines that address user interaction cues, ensuring all interactive components provide clear and immediate response.

What guidelines should I follow for designing loading, empty, and error states?▼

Guidelines for loading, empty, and error states include implementing effective skeleton screens to prevent layout shift, designing clear empty states for zero-data scenarios, and providing structured error handling to maintain user trust.

How do I optimize images for pixel-perfect alignment and high-resolution UI rendering?▼

To optimize images for pixel-perfect alignment, use high-resolution next-gen formats like AVIF and WebP, which reduce file weight while maintaining visual fidelity and preventing layout shifts during asynchronous loading.

Related Skills

Explore More Design & Creative Skills→
imMamdouhaboammarimMamdouhaboammar

agency-ui-designer

Create scalable design systems with component libraries and WCAG AA compliance.

Community
Advanced
manutejmanutej
1

playwright-visual-testing

Automate browser testing and visual regression analysis with Playwright.

Community
Advanced
ISAQQSAIISAQQSAI

Image

Automate image processing and optimization for web, print, and social pipelines.

Community
Advanced
LschulzesLschulzes

web-design-guidelines

Evaluate UI code against Web Interface Guidelines to detect deviations.

Community
Intermediate