Oma Design
first-fluke/oh-my-agent
AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.
Implement web and React animation, gesture feedback, layout transitions and scroll sequences.
Install Motion Design
$ npx skills add WrongStack/WrongStack --skill motion-design -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install WrongStack/WrongStack motion-design --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/core/skills/motion-design .claude/skills/motion-design && rm -rf skills-srcUse ~/.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/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .claude/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-designType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add WrongStack/WrongStack --skill motion-design -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install WrongStack/WrongStack motion-design --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .agents/skills && cp -r skills-src/packages/core/skills/motion-design .agents/skills/motion-design && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .agents/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add WrongStack/WrongStack --skill motion-design -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install WrongStack/WrongStack motion-design --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/packages/core/skills/motion-design .cursor/skills/motion-design && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .cursor/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/WrongStack/WrongStack.git --path packages/core/skills/motion-design--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add WrongStack/WrongStack --skill motion-design -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install WrongStack/WrongStack motion-design --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/packages/core/skills/motion-design .gemini/skills/motion-design && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .gemini/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install WrongStack/WrongStack motion-designInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add WrongStack/WrongStack --skill motion-design -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .github/skills && cp -r skills-src/packages/core/skills/motion-design .github/skills/motion-design && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .github/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add WrongStack/WrongStack --skill motion-design -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install WrongStack/WrongStack motion-design --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/WrongStack/WrongStack.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/packages/core/skills/motion-design .opencode/skills/motion-design && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "motion-design" agent skill from https://github.com/WrongStack/WrongStack/tree/main/packages/core/skills/motion-design into .opencode/skills/motion-design/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-design", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
motion-design- GitHub stars
- 371
- Token cost
- ~852 tokens
- SKILL.md length
- 350 words
- Files
- 1
- Skills in repo
- 100
- Repo updated
- First seen
- Licence
- MIT
At a glance
Implement web and React animation, gesture feedback, layout transitions and scroll sequences.
- Works in 6 steps: Give each animation a purpose: state… → Prefer CSS for small transitions; use… → Prefer transform and opacity on hot… → …
- Working with Motion
- SKILL.md covers Selection card, Overview, Rules and Workflow, plus 3 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Motion Design is an agent skill from WrongStack/WrongStack. Implement web and React animation, gesture feedback, layout transitions and scroll sequences. Use when working with Motion, GSAP or CSS animation; use motion-canvas-video for exported timeline videos and threejs-3d for rendered 3D scenes.
Its SKILL.md is about 850 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Game Development, covering Web animation and motion, 3D graphics and WebGL and Motion graphics. It works with React, GSAP and Three.js. The repository describes itself as: An AI coding agent that reads your code, edits files, runs commands, and reasons through bugs — across a terminal REPL, a full-screen TUI, and a browser UI, while you keep your… The licence is MIT.
When your agent uses it
- Working with Motion
- Use motion-canvas-video for exported timeline videos and threejs-3d for rendered 3D scenes
Example prompts
- “/motion-design”
Workflow steps
6 steps, taken from the first numbered list in SKILL.md.
- Give each animation a purpose: state feedback, spatial continuity, attention
- Prefer CSS for small transitions; use the existing animation library where
- Prefer transform and opacity on hot paths. Layout animation APIs and occasional
- Honor reduced motion. Remove parallax and large travel/zoom; retain necessary
- Preserve semantics and focus through enter/exit transitions. Use actual buttons
- Clean up timelines, subscriptions and ScrollTrigger instances on unmount.
What it can do on your machine
Read from SKILL.md and the folder at commit a744bdc. 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
Links to these hosts (documentation or services it may open):
motion.devtailwindcss.com
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
Motion Design loads about 852 tokens when it runs. Until then it costs about 63 tokens; SKILL.md has 350 words of instructions outside code blocks.
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 WrongStack/WrongStack at commit a744bdc, republished under its MIT licence (© WrongStack). 350 words, ~852 tokens.
Download SKILL.mdSave it as
.claude/skills/motion-design/SKILL.md (or your agent's skills folder).- name
- motion-design
- description
- Implement web and React animation, gesture feedback, layout transitions and scroll sequences. Use when working with Motion, GSAP or CSS animation; use motion-canvas-video for exported timeline videos and threejs-3d for rendered 3D scenes.
- version
- 1.2.1
- required-capabilities
- filesystem.read, filesystem.write
- optional-capabilities
- verification.run, web.research
- trigger
- working with Motion, GSAP or CSS animation; use motion-canvas-video for exported timeline videos and threejs-3d for rendered 3D scenes.
- metadata.routing-group
- media
Motion Design
Selection card
- Task: Animate live web UI transitions and gestures. / TR: Canlı web arayüzü geçişlerini ve hareketlerini canlandır.
- Start: Identify the existing engine, scene, timeline and delivery format.
- Finish: apply the acceptance checks below; report observed results and unresolved constraints.
Overview
Latest stable targets checked 2026-10-09: Motion 14.0.0, GSAP 3.15.0 and Tailwind CSS 4.3.3. For new React animation work, Motion imports from motion/react. Inspect existing package APIs and migration notes before upgrading; renaming framer-motion alone is not a validated migration.
Rules
- Give each animation a purpose: state feedback, spatial continuity, attention or storytelling. Keep core actions usable if animation is disabled.
- Prefer CSS for small transitions; use the existing animation library where orchestration, interruption or layout continuity needs it.
- Prefer transform and opacity on hot paths. Layout animation APIs and occasional size transitions can be appropriate; profile their actual cost instead of banning all width/height animation.
- Honor reduced motion. Remove parallax and large travel/zoom; retain necessary state feedback through short fades or instant changes.
- Preserve semantics and focus through enter/exit transitions. Use actual buttons and links for actions; hover alone cannot carry information.
- Clean up timelines, subscriptions and ScrollTrigger instances on unmount. Strict Mode, interrupted transitions and route changes must not duplicate them.
Show full SKILL.md (139 more words)Show less
Workflow
- Define states, interrupted-state behavior, duration/easing roles and mobile adaptation using the project tokens.
- For Motion, consider MotionConfig reducedMotion='user', useReducedMotion and AnimatePresence for real exit states. Use stable keys and measure layout when geometry changes.
- For GSAP, scope nodes to the owning component with context or the supported React integration. Revert on cleanup; avoid accumulating global triggers.
- Stress rapid toggle, pending/disabled states, keyboard flow, reduced motion, route changes and a representative low-powered device.
- Inspect traces for long tasks/layout work. Report the measured result instead of promising 60/120 fps on every device.
Sources
Motion accessibility, Tailwind theme variables.
Acceptance checks
- Exercise rendered transitions, reduced motion, focus, cleanup and layout stability.
Skills in scope
- design-system — motion tokens and theming.
- design-craft — purpose and visual hierarchy.
- accessibility — interaction alternatives and motion preferences.
- web-performance — frame and input latency evidence.
© WrongStack, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in packages/core/skills/motion-design of WrongStack/WrongStack.
Open the folder on GitHubat commit a744bdc
Compare with similar skills
Motion Design 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Motion Design this skillWrongStack/WrongStack | 371 | — | ~852 | Automated safety check: Pass | MIT | |
| Oma Designfirst-fluke/oh-my-agent | 1.3k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Phantom Motionpixelxzen/phantom-motion | 185 | — | ~1k | Automated safety check: Pass | Apache-2.0 | |
| Web3d Integration Patternsfreshtechbro/claudedesignskills | 1k | — | ~5.3k | Automated safety check: Pass | MIT | |
| Motion Webfeitangyuan/motion-web | 696 | — | ~18k | Automated safety check: Pass | CC-BY-NC-4.0 | |
| Guizang Product Video Skillop7418/guizang-product-video-skill | 753 | — | ~1.1k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Phantom Motion
pixelxzen/phantom-motion
交互式动态视觉叙事生成器 v11.0 (Hybrid Drive Edition)。基于用户输入的任意主题关键词， 通过多轮交互式对话收集需求，利用 React 19 + Tailwind 4 驱动的 Minimal Mono 极简编辑器， 实时操纵隔离在 Iframe 中的硬核 GSAP/WebGL 影视级叙事引擎。
Web3d Integration Patterns
freshtechbro/claudedesignskills
Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences.
Motion Web
feitangyuan/motion-web
Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…
Guizang Product Video Skill
op7418/guizang-product-video-skill
制作代码驱动的软件产品宣传片和版本更新片（product promo、release notes video、changelog promo）。从真实功能和产品设计出发定方向，用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片，每支片子的视觉手法都从产品本身推导，不套模板。
Build Awwwards Quality Sites
nirholas/three.ws
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one…
More from WrongStack/WrongStack
All 100 skills in this repoTech Stack
WrongStack/WrongStack
Validate and upgrade dependencies against live registries and official migration guides in any ecosystem.
Skill Creator
WrongStack/WrongStack
Create, improve and validate WrongStack SKILL.md bundles with precise discovery, progressive resources and current runtime contracts.
Bug Hunter
WrongStack/WrongStack
A skill your agent uses when scanning source code for bugs, anti-patterns, code smells, or quality issues in a codebase, or when running a proof-driven bug hunt that must find, prove, fix, and…
Design Craft
WrongStack/WrongStack
Design or substantially improve user-facing interfaces with a product-specific visual direction, content hierarchy, and rendered critique.
Design Critique
WrongStack/WrongStack
A skill your agent uses to audit an interface that already exists and say precisely why it looks generated, templated, or unfinished — a scored rubric across composition, typography, color, states…
Mailbox Bridge
WrongStack/WrongStack
A skill your agent uses when external coding agents (Claude Code, Aider, custom scripts) need to participate in the project's shared WrongStack mailbox, or when a user asks to "expose the mailbox"…
Related
Questions about Motion Design
What does Motion Design do?
Implement web and React animation, gesture feedback, layout transitions and scroll sequences. Motion Design is an agent skill from WrongStack/WrongStack. Implement web and React animation, gesture feedback, layout transitions and scroll sequences.
When should I use Motion Design?
Motion Design fits situations like: working with Motion; use motion-canvas-video for exported timeline videos and threejs-3d for rendered 3D scenes.
How do I install Motion Design in Claude Code?
Run `npx skills add WrongStack/WrongStack --skill motion-design -a claude-code`. Or copy the skill folder (packages/core/skills/motion-design in WrongStack/WrongStack) into .claude/skills/motion-design in your project. Claude Code loads it when a task matches its description.
How do I install Motion Design in Codex?
Run `npx skills add WrongStack/WrongStack --skill motion-design -a codex`. Or copy the skill folder (packages/core/skills/motion-design in WrongStack/WrongStack) into .agents/skills/motion-design in your project. Codex loads it when a task matches its description.
Can I use Motion Design 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 WrongStack/WrongStack --skill motion-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-design, .gemini/skills/motion-design, .github/skills/motion-design and .opencode/skills/motion-design in your project.
What does Motion Design need to run?
SKILL.md names no scripts, command-line tools or credentials: Motion Design is instructions for the agent only.
Does Motion Design access the network?
SKILL.md names 2 domains. As links in the text: motion.dev and tailwindcss.com. This is read from the text; nothing was executed.
Is Motion Design 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 Motion Design use?
Motion Design is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Motion Design use?
About 852 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Motion Design?
Skills that share tags, products or a category with Motion Design: Oma Design (first-fluke/oh-my-agent, 1.3k stars), Phantom Motion (pixelxzen/phantom-motion, 185 stars), Web3d Integration Patterns (freshtechbro/claudedesignskills, 1k stars) and Motion Web (feitangyuan/motion-web, 696 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Motion Design?
WrongStack (a GitHub organization) maintains it in WrongStack/WrongStack, which has 371 GitHub stars. The repository holds 100 skills in this directory. The repository was last updated on October 10, 2026.
Source: WrongStack/WrongStack on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.