skills.rest
fernando-bertholdo
fernando-bertholdoCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/fernando-bertholdo/4-successful-AI-life --skill visual-polish
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
augustoheissaugustoheiss

agency-ux-architect

Generate CSS design systems, responsive layouts, and developer handoff guides for web front-ends.

Community
Advanced
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic
7a336e6e7a336e6e
1

ensuring-accessibility

Ensure WCAG 2.2 AA compliance for UI components and web pages.

Community
Intermediate
wensiawensia
2

template-lint

Lint HTML/SVG poster templates with an 8-check workflow and generate remediation reports.

Community
Advanced