ui-polish-pass
Core pack — always active as final step. Visual polish pass for spacing, hierarchy, alignment, and cleanup. Runs after design-review and ux-baseline-check as the last quality step before presenting work.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/aa-on-ai/ui-polish-passWhat This Skill Does
The ui-polish-pass skill is the essential final checkpoint for all visual interface work within OpenClaw. Designed as a core, always-active agent behavior, it functions as a digital design director. After your AI agent has completed the functional construction, layout, and UX baseline checks, this skill initiates a systematic review of the UI to transition the output from 'functional' to 'professional.' It does not invent new features; instead, it refines the existing structure through four rigorous, sequential passes: Spacing & Breathing Room, Typography Hierarchy, Alignment & Grid, and Color & Contrast. By distilling the interface to its essential components, the skill ensures that spacing is consistent, type hierarchy is logical, and the visual noise is minimized.
Installation
You can install this skill directly via the OpenClaw command-line interface using the following command:
clawhub install openclaw/skills/skills/aa-on-ai/ui-polish-pass
Ensure that you have appropriate project permissions to modify styling or UI components before execution.
Use Cases
- Finalizing dashboard layouts: Applying consistent spacing and grid alignment to complex data views.
- Refining component prototypes: Ensuring headers, labels, and input fields adhere to a strict typography scale.
- Post-development cleanup: Removing excess visual 'clutter' from auto-generated or code-injected UI elements.
- Accessibility refinement: Adjusting contrast ratios and font hierarchy to meet standard design readability requirements.
Example Prompts
- "The dashboard looks a bit messy after the latest data pull; please run the ui-polish-pass to clean up the spacing and hierarchy."
- "I've finished the functional layout for the user settings page. Can you execute a ui-polish-pass to ensure all alignment and typography meet our style guide?"
- "The alignment on this form feels off—apply a ui-polish-pass and focus specifically on the grid gutters and edge padding."
Tips & Limitations
- Distill before decorating: The skill is most effective when it removes unnecessary visual weight rather than adding it. If the UI feels overwhelmed, use the
/quieterdirective. - The 'Squint Test': Use this as a mental heuristic when reviewing the skill's suggestions; if the page looks like an undifferentiated blob, the spacing pass needs more aggressive intervention.
- Hierarchy over Decoration: Never allow the agent to add new colors or chrome. The goal is clarity, not style-inflation. If the agent suggests adding decorative elements, override the suggestion to maintain strict adherence to your design system. Remember, this skill is a final polish pass, not a feature generator.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-aa-on-ai-ui-polish-pass": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-read, file-write
Related Skills
ux-baseline-check
Core pack — always active for visual work. Enforces UX quality standards on any screen, flow, form, or dashboard. Ensures nothing ships with missing states. Auto-activates alongside design-review for all frontend work.
Whimsical Design
Skill by aa-on-ai
agent-friendly-design
Design websites and applications that AI agents can consume, navigate, and interact with. Use when building any site, app, or product that agents will use as an end-user — not just crawl or index. Covers semantic structure, accessibility-as-agent-interface, machine-readable data, API-first patterns, and the emerging protocols (llms.txt, MCP, NLWeb, A2UI) that make sites agent-ready. Triggers on: agent-friendly, agent-readable, agent-accessible, AX, agent experience, agentic web, dual-interface, machine-readable, llms.txt, MCP integration, NLWeb, accessibility tree, ARIA for agents, structured data, JSON-LD, Schema.org, API-first design, build for agents, agent-ready.
World Build
Skill by aa-on-ai
web-animation-design
Design and implement web animations that feel natural and purposeful. Use this skill proactively whenever the user asks questions about animations, motion, easing, timing, duration, springs, transitions, or animation performance. This includes questions about how to animate specific UI elements, which easing to use, animation best practices, or accessibility considerations for motion. Triggers on: easing, ease-out, ease-in, ease-in-out, cubic-bezier, bounce, spring physics, keyframes, transform, opacity, fade, slide, scale, hover effects, microinteractions, Framer Motion, React Spring, GSAP, CSS transitions, entrance/exit animations, page transitions, stagger, will-change, GPU acceleration, prefers-reduced-motion, modal/dropdown/tooltip/popover/drawer animations, gesture animations, drag interactions, button press feel, feels janky, make it smooth.