Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold…
Install Pixel2motion
$ npx skills add vibe-motion/skills --skill pixel2motion -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vibe-motion/skills pixel2motion --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/vibe-motion/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/pixel2motion .claude/skills/pixel2motion && 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 "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .claude/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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/vibe-motion/skills/tree/main/pixel2motionType 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 vibe-motion/skills --skill pixel2motion -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vibe-motion/skills pixel2motion --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/pixel2motion .agents/skills/pixel2motion && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .agents/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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 vibe-motion/skills --skill pixel2motion -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vibe-motion/skills pixel2motion --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/pixel2motion .cursor/skills/pixel2motion && 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 "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .cursor/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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/vibe-motion/skills.git --path pixel2motion--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 vibe-motion/skills --skill pixel2motion -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vibe-motion/skills pixel2motion --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/pixel2motion .gemini/skills/pixel2motion && 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 "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .gemini/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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 vibe-motion/skills pixel2motionInstalls 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 vibe-motion/skills --skill pixel2motion -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/pixel2motion .github/skills/pixel2motion && 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 "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .github/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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 vibe-motion/skills --skill pixel2motion -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vibe-motion/skills pixel2motion --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/pixel2motion .opencode/skills/pixel2motion && 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 "pixel2motion" agent skill from https://github.com/vibe-motion/skills/tree/main/pixel2motion into .opencode/skills/pixel2motion/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixel2motion", 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
pixel2motion- GitHub stars
- 1.3k
- Used in
- 1 other repo
- Token cost
- ~7.1k tokens
- SKILL.md length
- 3,337 words
- Files
- 18 (incl. scripts, references, assets)
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- None found
At a glance
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold…
- Works in 3 steps: PIXEL: Read the source, write the brief → VECTOR: Fit minimal geometry, structured… → MOTION: Choreograph with the 12 principles
- Asked to animate a logo
- SKILL.md covers Deliverables, Phase 1 — PIXEL: Read the…, Phase 2 — VECTOR: Fit minimal… and Phase 3 — MOTION: Choreograph…, plus 4 more sections
- Runs Python scripts from its folder; calls python3 and pip
What it does
Pixel2motion is an agent skill from vibe-motion/skills. Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles. Use when asked to animate a logo, build a logo reveal / splash screen / brand intro, convert a logo image into animated SVG or HTML, add motion to a vectorized mark, or create…
Its SKILL.md is about 7.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 21 other files, including scripts, reference files and assets (for example `agents/openai.yaml`, `references/html-delivery-template.md` and `references/motion-personality.md`).
It sits in Media & Creative, covering Logo and visual identity. The repository describes itself as: agent skills for vibe motion.
When your agent uses it
- Asked to animate a logo
- Build a logo reveal / splash screen / brand intro
- Convert a logo image into animated SVG
- Add motion to a vectorized mark
Example prompts
- “/pixel2motion”
Requirements
- Python 3
Workflow steps
3 steps, taken from the step headings in SKILL.md.
- PIXEL: Read the source, write the brief
- VECTOR: Fit minimal geometry, structured for motion
- MOTION: Choreograph with the 12 principles
What it can do on your machine
Read from SKILL.md and the folder at commit 4c86c0d. 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
Ships 9 files in scripts/ (Python, from the files we listed), which the agent can run.
Shell commands in SKILL.md call:
python3pip
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use pip, which can reach the network depending on how they are called.
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
Pixel2motion loads about 7.1k tokens when it runs, and up to ~16k if it reads all its reference files. Until then it costs about 192 tokens; SKILL.md has 3,337 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); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 3,337 words (~7,104 tokens).
“Pixel → Vector → Motion. This skill fuses two disciplines:”
- name
- pixel2motion
Files
SKILL.md and 17 other files (scripts, references, assets) in pixel2motion of vibe-motion/skills.
- SKILL.md
- agents/openai.yaml
- assets/demo.gif
- references/html-delivery-template.md
- references/motion-personality.md
- references/reveal-patterns.md
- references/ribbon-fitting.md
- references/twelve-principles-for-logos.md
- scripts/animate_svg_html.py
- scripts/animate_svg_showcase.py
- scripts/capture_motion_frames.py
- scripts/fit_ribbon_centerline.py
- scripts/overlay_progress_strip.py
- scripts/probe_motion_continuity.py
- scripts/raster_logo_trace.py
- scripts/render_overlay.py
- scripts/svg_path_audit.py
- … and 1 more
Open the folder on GitHubat commit 4c86c0d
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in vibe-motion/skills, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Pixel2motion 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 |
|---|---|---|---|---|---|---|
| Pixel2motion this skillvibe-motion/skills | 1.3k | 1 repos | ~7.1k | Automated safety check: Pass | None | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Anthropic Brand Stylinganthropics/skills | 180k | 30 repos | ~559 | Automated safety check: Pass | Apache-2.0 | |
| Logo Designkaankiziltug/logo-design-skill | 2.3k | — | ~4.4k | Automated safety check: Pass | MIT | |
| Logo Generatorop7418/logo-generator-skill | 2.2k | — | ~1.8k | Automated safety check: Notes | None | |
| Web Asset Generatoralonw0/web-asset-generator | 512 | 1 repos | ~6.6k | Automated safety check: Pass | MIT |
Similar skills
- Official
Anthropic Brand Styling
anthropics/skills
Applies Anthropic's brand colors and fonts to artifacts such as PowerPoint slides, using fixed hex values for text and accents, Poppins headings and Lora body text.
Logo Design
kaankiziltug/logo-design-skill
Professional logo and brand-mark design, from brief to production files.
Logo Generator
op7418/logo-generator-skill
Generate professional SVG logos and high-end showcase images.
Web Asset Generator
alonw0/web-asset-generator
Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn.
Image Generation
onyx-dot-app/onyx
Generate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via onyx-cli image.
More from vibe-motion/skills
All 16 skills in this repoBrand Launch Video Star
vibe-motion/skills
Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery.
3D Chladni Render
vibe-motion/skills
Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV.
Colorize
vibe-motion/skills
Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦).
Light Spotlight Render
vibe-motion/skills
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors.
Printed Curtain Render
vibe-motion/skills
Generate a browser-based p5.js curtain simulation that weaves user-supplied PNG, JPEG, or WebP artwork and optional text into individually moving strands.
Threejs Earth Render
vibe-motion/skills
Clone or update https://github.com/vibe-motion/threejs-earth and render the Three.js Earth route animation with Puppeteer frame capture.
Related
Categories
Questions about Pixel2motion
What does Pixel2motion do?
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold…. Pixel2motion is an agent skill from vibe-motion/skills. Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold, then into a choreographed logo animation delivered as standalone JS-rendered HTML, applying Disney's 12 animation principles.
When should I use Pixel2motion?
Pixel2motion fits situations like: asked to animate a logo; build a logo reveal / splash screen / brand intro; convert a logo image into animated SVG; add motion to a vectorized mark.
How do I install Pixel2motion in Claude Code?
Run `npx skills add vibe-motion/skills --skill pixel2motion -a claude-code`. Or copy the skill folder (pixel2motion in vibe-motion/skills) into .claude/skills/pixel2motion in your project. Claude Code loads it when a task matches its description.
How do I install Pixel2motion in Codex?
Run `npx skills add vibe-motion/skills --skill pixel2motion -a codex`. Or copy the skill folder (pixel2motion in vibe-motion/skills) into .agents/skills/pixel2motion in your project. Codex loads it when a task matches its description.
Can I use Pixel2motion 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 vibe-motion/skills --skill pixel2motion -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pixel2motion, .gemini/skills/pixel2motion, .github/skills/pixel2motion and .opencode/skills/pixel2motion in your project.
What does Pixel2motion need to run?
Going by SKILL.md and its folder, Pixel2motion needs Python for the scripts in its folder and the command-line tools its instructions call (python3 and pip). Our summary lists: Python 3.
Does Pixel2motion access the network?
SKILL.md contains no URLs. Its commands use pip, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Pixel2motion 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Pixel2motion use?
No licence was found for Pixel2motion or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Pixel2motion use?
About 7.1k tokens (SKILL.md is roughly 28k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.7k tokens, read only when the agent opens those files.
What are the alternatives to Pixel2motion?
Skills that share tags, products or a category with Pixel2motion: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Anthropic Brand Styling (anthropics/skills, 180k stars), Logo Design (kaankiziltug/logo-design-skill, 2.3k stars) and Logo Generator (op7418/logo-generator-skill, 2.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Pixel2motion?
vibe-motion (a GitHub organization) maintains it in vibe-motion/skills, which has 1,320 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 5, 2026.
Source: vibe-motion/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.