In short:
ak-motion-designis a principles advisor: it settles the emotion, personality, duration, easing and order of elements, then hands back a motion brief. The build work goes toak-frontend-design,ak-banner-design,ak-videoorak-design-system. It writes no code, makes no assets and renders nothing.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when you need a button, a modal, a hero or an ad to move well but do not know yet whether it should be fast or slow, bouncy or smooth, or when an existing animation looks stiff. You do not need it when you already have the principles and only want code or files: say so directly and it hands the work to an execution skill.
flowchart LR
A["Describe the element or interaction"] --> B["ak-motion-design"]
B --> C["Motion brief"]
C --> D["ak-frontend-design writes the UI code"]
C --> E["ak-banner-design, ak-video make the assets"]
C --> F["ak-design-system saves it as tokens"]
C --> G["Stop, principles are enough"]Four concepts to know:
| Concept | Question | Example |
|---|---|---|
| New motion or a single fix | Are you building new motion, or adjusting motion that already exists? | A new welcome screen goes through all 8 steps, from emotion to the 1/3 rule. Fixing a modal that jerks on close keeps the existing personality and timing and looks only at that interaction. |
| Motion personality | How should your brand "move"? | Playful is fast and bouncy (150-300ms, 10-20% overshoot), Premium is slow with no bounce (350-600ms), Corporate is tight (200-400ms), Energetic is very fast with a strong bounce. If you say nothing, UI defaults to Corporate and illustrations default to Playful. |
| Duration and easing | How long does the motion last, and does it speed up or slow down? | Button 120-180ms, modal 300-400ms, page transition 400-600ms. Entering slows down (ease-out), exiting speeds up (ease-in), and entering is 30-50% longer than exiting. The numbers are starting points, tuned for distance, device and how often the user sees it. |
| Who does the build work | Once the principles are set, who writes the code or makes the files? | React or CSS code goes to ak-frontend-design, static banners to ak-banner-design, video to ak-video, tokens to ak-design-system. If that skill is not installed, it says so and does not do the work itself. |
Sample prompt for a CTA button on a landing page:
/ak-motion-design Design feedback for the "Sign up" CTA button on the <product name> landing page:
hover, press, submit success and submit error.
Personality: Corporate. Do not change brand colors.
Done when: there is a brief with duration and easing for each state, plus a reduced motion version.This skill has no flags.
Below is the detailed version: the run flow, 5 situations with prompts, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-motion-design: settle motion principles before writing code" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-motion-design". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-motion-design
