New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Moai Ref UI Polish

by modu-ai in modu-ai/moai-adk

UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon…

Apache-2.0Auto-check passedFrontend & Design

Install Moai Ref UI Polish

skills CLI
$ npx skills add modu-ai/moai-adk --skill moai-ref-ui-polish -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install modu-ai/moai-adk moai-ref-ui-polish --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/modu-ai/moai-adk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/moai-ref-ui-polish .claude/skills/moai-ref-ui-polish && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
moai-ref-ui-polish
GitHub stars
1.2k
Token cost
~3.1k tokens
SKILL.md length
1,320 words
Files
3 (incl. references)
Skills in repo
48
Repo updated
First seen
Licence
Apache-2.0

At a glance

UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon…

  • Tasks that involve UI design
  • SKILL.md covers Target Agents, Core Philosophy, Geometry and Alignment and Elevation and Structure, plus 9 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
  • Tasks that involve Frontend development

What it does

Moai Ref UI Polish is an agent skill from modu-ai/moai-adk. UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies frontend/UI domain work with production-grade "interface taste" rules. NOT for: backend logic, database design, DevOps, security audits, non-UI work.

Its SKILL.md is about 3.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/design-audit.md` and `references/motion-principles.md`).

It sits in Frontend & Design, covering UI design, Frontend development and Typography. The repository describes itself as: Agentic development harness for Claude Code — SPEC-driven plan/run/sync, TRUST 5 quality gates, model+effort routing, and Claude×GLM multi-LLM cost control. Single Go binary, 16… The licence is Apache-2.0.

When your agent uses it

  • Tasks that involve UI design
  • Tasks that involve Frontend development
  • Tasks that involve Typography

Example prompts

  • “interface taste”
  • “/moai-ref-ui-polish”

What it can do on your machine

Read from SKILL.md and the folder at commit 2aab5f7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Moai Ref UI Polish loads about 3.1k tokens when it runs, and up to ~8.3k if it reads all its reference files. Until then it costs about 120 tokens; SKILL.md has 1,320 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~120
When it runs · the whole SKILL.md, loaded when a task matches
~3.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from modu-ai/moai-adk at commit 2aab5f7, republished under its Apache-2.0 licence (© modu-ai). 1,320 words, ~3,120 tokens.

Download SKILL.mdSave it as .claude/skills/moai-ref-ui-polish/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
moai-ref-ui-polish
description
UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies frontend/UI domain work with production-grade "interface taste" rules. NOT for: backend logic, database design, DevOps, security audits, non-UI work.
when_to_use
Use for UI polish and design-completion work: building UI components, reviewing frontend code, implementing animations, hover/active states, shadows, borders…
user-invocable
false
metadata.version
1.2.0
metadata.category
domain
metadata.status
active
metadata.updated
2026-08-19
metadata.tags
ui, polish, design, animation, typography, motion, frontend, accessibility, audit, reference
progressive_disclosure.enabled
true
progressive_disclosure.level1_tokens
100
progressive_disclosure.level2_tokens
5000

UI Polish Reference

Target Agents

  • manager-develop - Applies polish rules during frontend/UI component implementation (cycle_type=tdd or cycle_type=ddd context)
  • /moai review - UI-design review surface; equivalently available as a per-spawn Agent(general-purpose) frontend specialist per archived-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

PrincipleRuleRationale
Concentric Border RadiusouterRadius = innerRadius + paddingMismatched radii on nested elements is the most common cause of an interface "feeling off"
Optical over Geometric AlignmentWhen geometric centering looks wrong, align opticallyButtons with icons, play triangles, and asymmetric icons need a manual nudge; geometric center is visually off-center for these shapes

Elevation and Structure

ElementUseAvoid
Semi-transparent layered box-shadowDepth, elevation, floating surfacesSolid borders for depth (they read heavy and flat)
BordersStructure, dividers, separators, selected/focus stateUsing shadows for structural separation (ambiguous)

Motion

PatternRuleCommon Mistake
Enter animation easingease-out (decelerate) — element arrives calmlyease-in on enter (element appears to slam into place)
Exit animation easingease-in (accelerates away), mirroring the enter curve (small fixed translateY)Full-height collapse, or harsher-than-enter motion
Interruptible state changesCSS transition (can be interrupted mid-animation)keyframes for interactive states (cannot interrupt)
Staged entrancesStagger semantic chunks ~100ms — only for infrequent staged entrancesStaggering routine, high-frequency interactions (feels sluggish)
Contextual icon animationopacity/scale/blur cross-fade (scale 0.25→1, opacity 0→1, blur 4px→0)Toggling visibility (jarring, no transition)
Press feedbackscale(0.96) on click — always 0.96Smaller than 0.95 (reads as a bug, not a press)
First-render enterSkip with initial={false} on AnimatePresence (or equivalent)Enter animation fires on page load (disorienting)
Motion restraintNo custom animation on high-frequency interactions; motion is never the only feedback channelAnimating everything (noise, performance cost, accessibility)
Motion Easing Values (Web/CSS)
CaseValue
With motion library (Framer Motion et al.)transition: { type: "spring", duration: 0.3, bounce: 0 }
Without motion library (CSS)cubic-bezier(0.2, 0, 0, 1) for the standard "decelerate" curve
Nevertransition: all — always specify exact properties (transition-property: scale, opacity)
Motion Accessibility and Cost
RuleDetail
Reduced-motion branch (required)Every non-decorative animation needs a prefers-reduced-motion: reduce path. Vestibular-disorder users are physically harmed by large-displacement and parallax motion. Reduce to an opacity cross-fade or remove the animation — never merely shorten it. The branch is authored at the same time as the animation, not retrofitted
Animate the compositor, not the layouttransform and opacity are composited and skip layout and most paint. width, height, top, left, margin, and padding trigger layout on every frame (thrashing), which is why the same visual effect janks when driven by the wrong property. Move with translate, resize with scale

Motion principles behind these rules — the three decision passes, motion layers, the 1/3 rules, stagger budgets, personality archetypes, Disney-adapted ranges, and the emotion-to-motion map — live in references/motion-principles.md (L3, load on demand when motion is the substance of the work).

Typography

RuleImplementation (Web/CSS)When
Font smoothing-webkit-font-smoothing: antialiased on root layoutmacOS targets (sharper rendering)
Tabular numbersfont-variant-numeric: tabular-numsDynamically updating numbers (counters, timers, prices) — prevents layout shift
Heading wrappingtext-wrap: balanceHeadings (prevents orphan words, evens line lengths)
Body wrappingtext-wrap: prettyBody paragraphs (avoids orphan widows)

Imagery

RuleValue
Image outline1px subtle outline at low opacity
Outline color (light mode)pure black — oklch(0 0 0 / 0.1)
Outline color (dark mode)pure white — oklch(1 0 0 / 0.1)
NeverTinted neutral outlines (read as a color choice, not a separation cue)

Interaction

RuleValue
Minimum hit area (touch/mobile)44 × 44 px
Minimum hit area (dense desktop)40 × 40 px (extend with pseudo-element if the visual is smaller)
Hit area overlapNever let hit areas overlap
Hover on touch (never load-bearing):hover does not exist on touch — anything reachable only by hover is simply gone on a phone. Keep affordances visible by default and gate hover styling behind @media (hover: hover) and (pointer: fine)
Hover on pointer (always present)The inverse rule: on a pointer device every clickable surface needs a distinct hover state, transitioning over ~100-200ms. A pointer resting on a target with no feedback reads as broken
will-changeOnly transform, opacity, filter — and only when first-frame stutter is observed; never will-change: all

Icons

RuleDetail
Stroke matches text weight1.5px stroke beside regular (400) text; 2px beside semibold (600) text
One stroke weight per setNever mix icon libraries in one interface
State via color, not assetsIcons use currentColor; states come from CSS color/opacity — never separate asset files
Outline vs fillOutline variant is default; fill variant marks the active state
Show full SKILL.md (515 more words)Show less

Review Modes

ModeCoverageFinding Cap
quickPrimary user path, high-traffic states; HIGH/MEDIUM issues only5
fullEntire scope across all categories (Typography, Surfaces, Motion, Icons, Interaction)15
Severity
LevelMeaning
HIGHMakes interaction inaccessible, misleading, unreadable, or repeatedly disruptive
MEDIUMNoticeable usability or consistency problem
LOWIsolated polish issue (full mode only)
Verdict
VerdictCondition
BlockAny HIGH finding remains
Needs changesOnly MEDIUM or LOW findings remain
ApproveNo actionable findings remain

Auditing an existing codebase rather than reviewing a diff? references/design-audit.md (L3, load on demand) carries the mechanical detection patterns behind the checklists below — motion gaps, accessibility violations, layout-property animation, and the duration/easing inventories that only surface across a whole codebase. It reports into the severity scale and finding caps above, not a separate one.

<!-- moai:evolvable-start id="rationalizations" -->

Common Rationalizations

RationalizationReality
"The framework handles animations correctly by default"Framework defaults are generic. Easing, timing, and stagger must be specified per interaction, not inherited.
"A solid border is simpler than a layered shadow"A solid border communicates structure; depth needs transparency. Using a border for elevation reads heavy and flat.
"Geometric centering is correct, optical adjustment is bikeshedding"Geometric center is visually off for asymmetric shapes (icons, play triangles). Optical alignment is the difference users feel but cannot name.
"Motion is optional polish, the interface works without it"Motion is feedback. Without it, state changes are ambiguous (did it register?). But motion must be restrained — animating everything is noise.
"Hit area equals visible area"A 20px icon needs a 44px hit area on touch. Overlapping or undersized hit areas are the most common mobile usability defect.
"transition: all is convenient"It transitions properties you did not intend (layout, color), causing unexpected animation. Always specify exact properties.
<!-- moai:evolvable-end -->
<!-- moai:evolvable-start id="red-flags" -->

Red Flags

  • Enter animation uses ease-in (should be ease-out)
  • Nested elements with mismatched border radii (no concentric relationship)
  • Solid border used for depth/elevation instead of semi-transparent shadow
  • transition: all instead of specific properties
  • Hit area smaller than 40×40px, or overlapping hit areas
  • Dynamically updating numbers without tabular-nums (layout shifts on each update)
  • Icon stroke weight mismatched with adjacent text weight
  • Separate icon asset files per state instead of currentColor recoloring
  • Page-load enter animation fires without a skip (initial={false})
  • will-change: all, or will-change set permanently instead of only on stutter
  • Animation with no prefers-reduced-motion branch (or a branch that only shortens the duration instead of removing the displacement)
  • Movement driven by top/left/width/height where a transform would do (layout thrashing every frame)
<!-- moai:evolvable-end -->
<!-- moai:evolvable-start id="verification" -->

Verification

  • Enter animations decelerate (ease-out); exit animations accelerate (ease-in), and entrances run longer than exits
  • Every non-decorative animation has a prefers-reduced-motion: reduce branch
  • Movement uses transform/opacity, not width/height/top/left
  • Nested elements follow outerRadius = innerRadius + padding
  • Depth uses semi-transparent shadow; structure uses border
  • Every transition specifies exact properties (no transition: all)
  • Hit areas meet 44×44px (touch) / 40×40px (desktop) minimum, no overlap
  • Dynamic numbers use tabular-nums; headings use text-wrap: balance
  • Icons use one stroke weight matching text; states via currentColor, not separate assets
  • First render skips enter animation (initial={false} or equivalent)
  • High-frequency interactions have no custom animation; motion is not the only feedback
<!-- moai:evolvable-end -->

© modu-ai, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in .claude/skills/moai-ref-ui-polish of modu-ai/moai-adk.

  • SKILL.md
  • references/design-audit.md
  • references/motion-principles.md

Open the folder on GitHubat commit 2aab5f7

Compare with similar skills

Moai Ref UI Polish next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Moai Ref UI Polish compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Moai Ref UI Polish this skillmodu-ai/moai-adk1.2k—~3.1kAutomated safety check: PassApache-2.0
Userinterface Wikiraphaelsalaja/userinterface-wiki906—~3.5kAutomated safety check: PassMIT
Frontend Blueprinttech-leads-club/agent-skills7k1 repos~5.3kAutomated safety check: PassCC-BY-4.0
Brand Agencyglebis/claude-skills390—~1.6kAutomated safety check: PassMIT
Premium UI Revampbuildfastwithai/gen-ai-experiments785—~2kAutomated safety check: PassMIT
Make Interfaces Feel Bettersamuelclay/NewsBlur7.6k10 repos~1.5kAutomated safety check: PassMIT

Similar skills

  • Userinterface Wiki

    raphaelsalaja/userinterface-wiki

    UI/UX best practices for web interfaces. An agent skill from raphaelsalaja/userinterface-wiki.

    906 GitHub stars~3.5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Frontend Blueprint

    tech-leads-club/agent-skills

    AI frontend specialist and design consultant that guides users through a structured discovery process before generating any code.

    7k GitHub starsUsed in 1 repo~5.3k tokens
    Frontend & DesignAuto-check passed

  • Brand Agency

    glebis/claude-skills

    Applies Agency brand colors and typography to artifacts including presentations, SVG graphics, documents, and web interfaces.

    390 GitHub stars~1.6k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Premium UI Revamp

    buildfastwithai/gen-ai-experiments

    Audit and revamp existing web interfaces into polished, professional, product-specific experiences while preserving behavior and working within the current frontend stack.

    785 GitHub stars~2k tokensUpdated 17 days ago
    Frontend & DesignAuto-check passed

  • Make Interfaces Feel Better

    samuelclay/NewsBlur

    Design engineering principles for making interfaces feel polished.

    7.6k GitHub starsUsed in 10 repos~1.5k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    186 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

More from modu-ai/moai-adk

All 48 skills in this repo

  • SVG Technical Infographic Author

    modu-ai/moai-adk

    Builds hand-editable SVG diagrams from computed layout coordinates, lints the source and renders a 2x PNG, with rules for when mermaid is the better choice.

    1.2k GitHub stars~5.2k tokensUpdated today
    Auto-check: notes

  • MoAI Foundation Core

    modu-ai/moai-adk

    Reference for MoAI-ADK's core development principles: TRUST 5 quality gates, SPEC-first domain-driven workflow, agent delegation and token budgeting.

    1.2k GitHub stars~5k tokensUpdated today
    Auto-check passed

  • MoAI SPEC Workflow

    modu-ai/moai-adk

    Manages SPEC documents for MoAI-ADK development, with GEARS or EARS requirement notation, acceptance criteria and a link into the Plan-Run-Sync workflow.

    1.2k GitHub stars~5.1k tokensUpdated today
    Auto-check passed

  • MoAI TDD Workflow

    modu-ai/moai-adk

    Drives test-first development through the RED, GREEN, REFACTOR cycle, with a config switch that selects between TDD and a DDD workflow for existing code.

    1.2k GitHub stars~3.1k tokensUpdated today
    Auto-check passed

  • MoAI Worktree Management

    modu-ai/moai-adk

    Gives each SPEC its own Git worktree with a registry of active workspaces, base-branch sync and cleanup of merged ones, inside the MoAI-ADK workflow.

    1.2k GitHub stars~3.9k tokensUpdated today
    Auto-check passed

  • CI Watch and Auto-Fix Loop

    modu-ai/moai-adk

    Watches a pull request's CI checks after creation, separates required from auxiliary failures, applies limited safe fixes and escalates anything semantic to you.

    1.2k GitHub stars~2.4k tokensUpdated today
    Auto-check: notes

Categories

Questions about Moai Ref UI Polish

What does Moai Ref UI Polish do?

UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon…. Moai Ref UI Polish is an agent skill from modu-ai/moai-adk. UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones.

When should I use Moai Ref UI Polish?

Moai Ref UI Polish fits situations like: tasks that involve UI design; tasks that involve Frontend development; tasks that involve Typography.

How do I install Moai Ref UI Polish in Claude Code?

Run `npx skills add modu-ai/moai-adk --skill moai-ref-ui-polish -a claude-code`. Or copy the skill folder (.claude/skills/moai-ref-ui-polish in modu-ai/moai-adk) into .claude/skills/moai-ref-ui-polish in your project. Claude Code loads it when a task matches its description.

How do I install Moai Ref UI Polish in Codex?

Run `npx skills add modu-ai/moai-adk --skill moai-ref-ui-polish -a codex`. Or copy the skill folder (.claude/skills/moai-ref-ui-polish in modu-ai/moai-adk) into .agents/skills/moai-ref-ui-polish in your project. Codex loads it when a task matches its description.

Can I use Moai Ref UI Polish in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add modu-ai/moai-adk --skill moai-ref-ui-polish -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/moai-ref-ui-polish, .gemini/skills/moai-ref-ui-polish, .github/skills/moai-ref-ui-polish and .opencode/skills/moai-ref-ui-polish in your project.

What does Moai Ref UI Polish need to run?

SKILL.md names no scripts, command-line tools or credentials: Moai Ref UI Polish is instructions for the agent only.

Does Moai Ref UI Polish access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Moai Ref UI Polish safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Moai Ref UI Polish use?

Moai Ref UI Polish is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Moai Ref UI Polish use?

About 3.1k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.2k tokens, read only when the agent opens those files.

What are the alternatives to Moai Ref UI Polish?

Skills that share tags, products or a category with Moai Ref UI Polish: Userinterface Wiki (raphaelsalaja/userinterface-wiki, 906 stars), Frontend Blueprint (tech-leads-club/agent-skills, 7k stars), Brand Agency (glebis/claude-skills, 390 stars) and Premium UI Revamp (buildfastwithai/gen-ai-experiments, 785 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Moai Ref UI Polish?

modu-ai (a GitHub organization) maintains it in modu-ai/moai-adk, which has 1,232 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 9, 2026.

Source: modu-ai/moai-adk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.