mobile-motion-patterns
Motion design rules for the Agenta mobile app (web/mobile) — the shared presets in src/lib/motion, when to animate, and reduced-motion requirements. Use when adding any animation or transition under web/mobile, animating navigation, sheets, skeletons, or list/chat surfaces.
git clone --depth 1 https://github.com/Agenta-AI/agenta /tmp/mobile-motion-patterns && cp -r /tmp/mobile-motion-patterns/.agents/skills/mobile-motion-patterns ~/.claude/skills/mobile-motion-patternsSKILL.md
# Mobile motion patterns
All animation in `web/mobile` uses the `motion` package through the shared
presets module `src/lib/motion/presets.ts`. Components never define their own
durations, easings, or springs.
## The presets
Consume via the hook (reduced-motion aware — this is mandatory):
```tsx
import {useMotionPresets} from "@/lib/motion/presets"
const {sharedAxisPush, sheetSlideUp, crossfade, reduced} = useMotionPresets()
```
- **`sharedAxisPush`** — list → chat navigation (and any parent → child screen
push). Forward uses `custom={1}`, back uses `custom={-1}`; the back
gesture/button reverses the same preset. Wrap sibling screens in
`<AnimatePresence custom={direction} initial={false}>`.
- **`sheetSlideUp`** — spring-based bottom sheets (project drawer). Pair with a
`crossfade` scrim.
- **`crossfade`** — skeleton → content swaps. Skeleton and content must occupy
identical geometry so the fade causes zero layout shift.
## Rules
- **Animate navigation, containment, and state swaps — not decoration.** No
attention-seeking motion, no animating properties that trigger layout
(animate `transform`/`opacity` only).
- **Reduced motion is not optional.** `useMotionPresets()` returns instant
variants when `prefers-reduced-motion` is set; any animation built outside
the presets module must justify itself in review AND handle reduced motion
itself (prefer extending the presets module instead).
- **Message entrance/streaming** (WP3b+): subtle and consistent with the
playground's feel — entrance is a small fade/rise on the preset tokens; text
streaming is never per-character animated.
- New shared patterns go INTO `presets.ts` (one exported preset + doc comment),
not into a component file.Helps add announcement cards to the sidebar banner system. Use when adding changelog entries, feature announcements, updates, or promotional banners to the Agenta sidebar. Handles both simple changelog entries and complex custom banners.
Playbook for adding a new coding-agent harness to Agenta (Codex, Hermes, Gemini, OpenCode, ...). Use when starting, planning, or reviewing a new-harness project. Covers the readiness audit of prior art, the spike-first milestone plan, the full integration-surface checklist, the per-harness variance axes to probe, and the process/communication contract with Mahmoud. Living document: every harness project appends its lessons to resources/LESSONS.md.
>-
Where to put frontend code (package vs app layer) and how to use the @agenta/* packages. Use when authoring or moving code in web/packages, choosing between @agenta/ui, @agenta/entities, @agenta/entity-ui, @agenta/shared, @agenta/playground, using molecules, loadable/runnable bridges, the EntityPicker, or writing package unit tests.
Use this skill to create and publish changelog announcements for new features, improvements, or bug fixes. This skill handles the complete workflow - creating detailed changelog documentation pages, adding sidebar announcement cards, and ensuring everything follows project standards. Use when the user mentions adding changelog entries, documenting new features, creating release notes, or announcing product updates.
Hard-won GitButler mechanics for multi-lane work in this repo — committing to a specific lane in a stack, spreading a pile of edits back across an existing stack, ordering a stack and setting PR bases, and recovering from a scrambled workspace. Use when working with stacked branches, when `but rub`/`but absorb`/`but commit --only` mis-routes a change, when a stack collapses or a commit lands on the wrong lane, or when a hunk gets dropped. Not needed for ordinary single-lane work.
Drive a researched and planned feature to a landed, tested change. Use after plan-feature has produced a docs/design/<project>/ workspace and the user says "implement it", "build the plan", "run the plan", or "let's ship this". Orchestrates refresh-plan, implement, review, a debug-local-deployment loop, and a test loop across the daytona / local-pi / claude x SDK / UI matrix, then documentation and a GitButler stacked branch. The orchestrator stays in the loop and spins narrow subagents for each phase.
Feature-folder layout, states/ convention, and data-flow rules for the Agenta mobile app (web/mobile). Use when creating or moving files under web/mobile, deciding where a component lives, adding a new feature or screen, or wiring data into mobile components.