# UI Craft Polish

> Craft components, motion, and micro-interactions — polish UX without over-engineering.

- Skill: `majico-xyz/ui-craft-polish` (Agent Skill)
- Install (CLI): `npx skillmds@latest add majico-xyz/ui-craft-polish`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majico-xyz/ui-craft-polish/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majico-xyz (https://skillmd.com/u/majico-xyz)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/majico-xyz/ui-craft-polish

---


# UI craft and polish

Use while implementing UI after tokens and layout direction exist.

## Components

- Reuse existing components and patterns in the repo before adding new abstractions.
- States matter: default, hover, focus-visible, disabled, loading, empty, error — implement what the surface actually needs.
- Spacing: prefer the project's scale (or Majico `--size-*` / token spacing if the repo adopted them).

## Motion (when it helps)

- Prefer transform + opacity; respect `prefers-reduced-motion`.
- Stagger entrances lightly (roughly 80–120ms) — skip motion if it adds noise.
- If Figma MCP is connected, **figma-implement-motion** can translate specs — optional.

## Accessibility

- Contrast for text on tinted backgrounds; don't rely on color alone for state.
- Labels for icon buttons; sensible heading order.

## Figma parity (optional)

With Figma MCP: load **figma-use** first, then **figma-generate-design** or **figma-generate-library** if the user wants design-file parity — not required for every task.

## Anti-patterns

- Don't add design-system layers the repo doesn't need.
- Don't chase pixel-perfect clones of reference sites when brand tokens should drive the look.