MoAI-ADK is a Go-based harness that organizes and verifies Claude Code work across planning, implementation, synchronization, and review stages. Developers use it to structure agentic coding tasks, apply quality gates, and route work across language models, while the catalogue entries extend its workflow with skills, hooks, commands, MCP servers, instructions, and settings.
Borrowing it
Nothing to install: this file belongs to modu-ai/moai-adk. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/modu-ai/moai-adk/main/.claude/skills/moai-ref-ui-polish/SKILL.mdgit clone --depth 1 https://github.com/modu-ai/moai-adkWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/modu-ai/moai-adk/moai-ref-ui-polish)<a href="https://agentmods.dev/skills/modu-ai/moai-adk/moai-ref-ui-polish"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-adk/moai-ref-ui-polish/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/modu-ai/moai-adk/moai-ref-ui-polish"><img src="https://agentmods.dev/badge/skills/modu-ai/moai-adk/moai-ref-ui-polish.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.02939 |
| Opus 5 | $0.00049 | $0.01470 |
| Sonnet 5 | $0.00020 | $0.00588 |
| Haiku 4.5 | $0.00010 | $0.00294 |
Grade A, and why
moai-ref-ui-polish scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 209 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Polish Reference
Target Agents
manager-develop- Applies polish rules during frontend/UI component implementation (cycle_type=tddorcycle_type=dddcontext)/moai review- UI-design review surface; equivalently available as a per-spawnAgent(general-purpose)frontend specialist perarchived-agent-rejection.md§C
Core Philosophy
Great interfaces are a collection of small details that compound into a great experience. AI agents frequently miss these details — an ease-in easing on an enter animation (should be ease-out), a solid border where a semi-transparent shadow reads better, or mismatched radii on nested elements. None of these is catastrophic; together they separate "polished" from "generic".
Before suggesting polish changes, identify the project's existing styling system (design tokens, spacing scale, motion library). Never introduce a second styling system for polish fixes — extend the existing one.
Geometry and Alignment
| Principle | Rule | Rationale |
|---|---|---|
| Concentric Border Radius | outerRadius = innerRadius + padding |
Mismatched radii on nested elements is the most common cause of an interface "feeling off" |
| Optical over Geometric Alignment | When geometric centering looks wrong, align optically | Buttons with icons, play triangles, and asymmetric icons need a manual nudge; geometric center is visually off-center for these shapes |
Elevation and Structure
| Element | Use | Avoid |
|---|---|---|
Semi-transparent layered box-shadow |
Depth, elevation, floating surfaces | Solid borders for depth (they read heavy and flat) |
| Borders | Structure, dividers, separators, selected/focus state | Using shadows for structural separation (ambiguous) |
Motion
| Pattern | Rule | Common Mistake |
|---|---|---|
| Enter animation easing | ease-out (decelerate) — element arrives calmly |
ease-in on enter (element appears to slam into place) |
| Exit animation easing | ease-in (accelerates away), mirroring the enter curve (small fixed translateY) |
Full-height collapse, or harsher-than-enter motion |
| Interruptible state changes | CSS transition (can be interrupted mid-animation) |
keyframes for interactive states (cannot interrupt) |
| Staged entrances | Stagger semantic chunks ~100ms — only for infrequent staged entrances | Staggering routine, high-frequency interactions (feels sluggish) |
| Contextual icon animation | opacity/scale/blur cross-fade (scale 0.25→1, opacity 0→1, blur 4px→0) |
Toggling visibility (jarring, no transition) |
| Press feedback | scale(0.96) on click — always 0.96 |
Smaller than 0.95 (reads as a bug, not a press) |
| First-render enter | Skip with initial={false} on AnimatePresence (or equivalent) |
Enter animation fires on page load (disorienting) |
| Motion restraint | No custom animation on high-frequency interactions; motion is never the only feedback channel | Animating everything (noise, performance cost, accessibility) |
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 209 lines · 98 tokens per session scan A 874652c5e256
moai-ref-ui-polish is a skill published in the GitHub repository modu-ai/moai-adk (1,206 stars, last pushed today), licensed Apache-2.0. It adds 98 tokens to every session and 2,939 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
mcp-host-styling-integration
Integrates MCP App UI with host theming system. Applies host CSS variables, handles onhostcontextchanged, safe area insets, display mode detection, and fullscreen configuration.
web-animation-css-animations
CSS animation patterns - transitions, keyframes, scroll-driven timelines, @property, compositor-friendly properties, prefers-reduced-motion.
token-architecture
Design and govern a three-tier CSS custom property token system (primitive → semantic → component), including semantic alias layers, light/dark theming, and DTCG-compatible source generation. Triggers on "design a three-tier token system for our web app", "audit our CSS tokens for hardcoded value drift", "add a…
interaction-design
Use when someone asks how one screen or component should respond to actions, validate input, transition, recover, or feel in use. Produces behavioral and state specifications for the interaction. Use information-architecture for hierarchy, user-flow for cross-screen routes, and creative-direction for visual mood…
godmode-ui-ux
Use when acting as the authoritative design lead for all frontend work, enforcing brand discovery, Anti-Slop rules, DTCG design tokens, fluid motion, and data-driven design generation.
neumorphism
Soft, extruded UI elements with inner and outer shadows on monochromatic surfaces for a tactile, embedded look.