visual-polish

Refine typography, spacing, shadows, and motion for cohesive UI interfaces.

2|Updated Apr 9, 2026

Search Tags:#typography #accessibility #visual-design #motion-design #ui-polish #shadow-depth

Ready to run

npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill visual-polish

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-polish
Source: https://github.com/fernando-bertholdo/4-successful-AI-life/tree/main/plugins/ui-excellence/skills/foundations/visual-polish
Command: npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill visual-polish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Great interfaces often hinge on small, carefully chosen details. This skill documents techniques to refine surfaces, typography, spacing, shadows, alignment, and motion so UI elements feel cohesive and responsive.

Core Features & Use Cases

Surfaces & Layout: implement balanced border radii and depth via shadows to create nested hierarchies.
Typography & Motion: apply font-smoothing, tabular numerics, and contextual motion to improve readability and perceived performance.
Performance & Accessibility: ensure motion respects user preferences and avoid layout thrash, while maintaining accessible contrast and hit areas.
Use Case: refine a dashboard card with consistent typography, shadow depth, and micro-interactions to achieve a polished, accessible UI.

Quick Start

Apply these visual-polish guidelines to a sample UI screen to refine typography, spacing, shadows, and motion for a cohesive, accessible interface.

Frequently Asked Questions about visual-polish

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

FAQPage Schema

How do I improve UI polish for responsive interfaces?▼

Improve UI polish for responsive interfaces by applying techniques for typography smoothing, shadow depth systems, text wrapping strategies, and contextual motion to ensure cohesive and accessible design elements.

What is the best way to create a shadow depth system for dashboards and modals?▼

The best way to create a shadow depth system is by implementing balanced border radii and nested shadow hierarchies to establish visual structure across surfaces like dashboard cards and modals.

How do I apply typography smoothing and tabular numerics in frontend workflows?▼

Apply typography smoothing and tabular numerics at the layout root to improve readability and ensure numeric data in lists and dashboards aligns consistently without visual shifting.

How does motion design impact accessibility and perceived UI performance?▼

Motion design impacts accessibility and perceived performance by adding contextual micro-interactions, but it must respect user preferences like reduced motion and avoid layout thrash to remain accessible.

Can I use these visual design guidelines for existing components and lists?▼

Yes, you can apply these visual design guidelines to refine existing components and lists by adjusting spacing, alignment, contrast, and hit areas to achieve a polished, accessible interface.