# Motion Performance

> Use when validating that an interaction stays within performance budget, animating cheap properties, avoiding jank, and never running costly decorative motion behind dense UIs.

- Skill: `suraj787/motion-performance` (Agent Skill)
- Install (CLI): `npx skillmds@latest add suraj787/motion-performance`
- Raw SKILL.md: https://api.skillmd.com/api/skills/suraj787/motion-performance/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Finance & Business
- Author: Suraj787 (https://skillmd.com/u/suraj787)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/suraj787/motion-performance

---


# Motion Performance

**Responsibility:** Keep interactions cheap and smooth. Protect dense work UIs from
decorative cost.

## When to invoke

- During implementation and at validation (step 13 of the root workflow).

## Inputs

- The implemented interaction, its animated properties, and the page context.

## Outputs

- Pass/fail against the performance budget, with required fixes.

## Checks

- Animate `transform`/`opacity`; avoid layout-triggering properties (width, height,
  top/left, box-shadow spread) unless justified.
- No continuous decorative motion behind dense or data-heavy screens.
- Effects are composited and do not cause long frames or layout thrash.
- Off-screen and reduced-motion paths do no needless work.
- WebGL/canvas only when a simpler technique cannot meet the objective.

## How it connects

- Reads `intelligence/` performance guidance and `registry/` cost metadata.
- Reports to `implementation-validation`; failures block the ship.

## Notes

If an effect is expensive and the objective could be met more cheaply, send it back to
`effect-selection`. Performance is a selection input, not just a post-hoc check.