polish

Fix alignment, spacing, consistency, and micro-details in UI designs before shipping.

4|Updated Apr 10, 2025
One-click install
npx skills add https://github.com/SHUAXINDIARY/ArknightsLive2d-Web --skill polish-shuaxindiary
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: polish
Source: https://github.com/SHUAXINDIARY/ArknightsLive2d-Web/tree/main/.cursor/skills/polish
Command: npx skills add https://github.com/SHUAXINDIARY/ArknightsLive2d-Web --skill polish-shuaxindiary

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This step provides a thorough final polish to fix alignment, spacing, consistency, and micro-details before shipping.

Core Features & Use Cases

  • Visual Alignment & Spacing: ensure elements align to the grid with consistent gaps across breakpoints.
  • Typography Consistency: enforce font hierarchy and readability across components.
  • Interaction States: verify default, hover, focus, active, and disabled states for all interactive elements.
  • Use Case: apply to UI mockups, shipped components, and marketing assets to achieve a cohesive look.

Quick Start

Run a final polish pass on the latest build to tighten visuals and interactions before release.

Frequently Asked Questions about polish

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

FAQPage Schema
How do I perform a final visual polish pass to fix alignment and spacing before shipping?

To perform a final visual polish pass, you need to ensure elements align to the grid with consistent gaps across breakpoints. This process tightens visuals and interactions to achieve pixel-perfect, production-ready layouts.

Why does typography consistency break across UI components and how can I enforce font hierarchy?

Typography consistency breaks when font hierarchy and readability are not enforced across components. You can fix this by running a final quality pass that verifies and standardizes typography consistency throughout the UI mockups.

What is the best way to verify all interaction states for interactive elements across breakpoints?

The best way to verify interaction states across breakpoints is to run a final quality pass that checks default, hover, focus, active, and disabled states for all interactive elements. This ensures complete interaction coverage.

Can I use a polish pass for marketing assets or is it only for UI mockups?

Yes, you can use a polish pass for marketing assets. It applies to UI mockups, shipped components, and marketing assets to achieve a cohesive look by fixing alignment, spacing, and micro-details.

When do I need a final design polish step in my frontend development workflow?

You need a final design polish step in frontend development when preparing the latest build for release. It tightens visuals, verifies interaction states, and ensures design-system alignment before shipping.

Does a visual polish pass handle spacing scale usage and design-system alignment?

Yes, a visual polish pass handles spacing scale usage and design-system alignment. It performs a thorough final quality check to satisfy requirements for consistent spacing, typography, and pixel-perfect layouts.