mediar-ai/ui-animation
packages/skills/skills/ui-animation/SKILL.md
Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
$ install --global
skillsauthnpx skillsauth add mediar-ai/skillhubz ui-animationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 19, 2026, 4:25 AM15.8s1 file scanned
SKILL.md
- name:
- ui-animation
- description:
- Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
UI Animation
Core rules
- Animate to clarify cause/effect or add deliberate delight.
- Keep interactions fast (200-300ms; up to 1s only for illustrative motion).
- Never animate keyboard interactions (arrow-key navigation, shortcut responses, tab/focus).
- Prefer CSS; use WAAPI or JS only when needed.
- Make animations interruptible and input-driven.
- Honor
prefers-reduced-motion(reduce or disable).
What to animate
- For movement and spatial change, animate only
transformandopacity. - For simple state feedback,
color,background-color, andopacitytransitions are acceptable. - Never animate layout properties; never use
transition: all. - Avoid
filteranimation for core interactions; if unavoidable, keep blur <= 20px. - SVG: apply transforms on a
<g>wrapper withtransform-box: fill-box; transform-origin: center. - Disable transitions during theme switches.
Spatial and sequencing
- Set
transform-originat the trigger point. - For dialogs/menus, start around
scale(0.85-0.9); avoidscale(0). - Stagger reveals <= 50ms.
Easing defaults
- Enter and transform-based hover:
cubic-bezier(0.22, 1, 0.36, 1). - Move:
cubic-bezier(0.25, 1, 0.5, 1). - Simple hover colour/background/opacity:
200ms ease. - Avoid
ease-infor UI (feels slow).
Accessibility
- If
transformis used, disable it inprefers-reduced-motion. - Disable hover transitions on touch devices via
@media (hover: hover) and (pointer: fine).
Performance
- Pause looping animations off-screen.
- Toggle
will-changeonly during heavy motion and only fortransform/opacity. - Prefer
transformover positional props in animation libraries. - Do not animate drag gestures using CSS variables.
Reference
- Snippets and practical tips: examples.md
Workflow
- Start with the core rules, then pick a reference snippet from examples.md.
- Keep motion functional; honor
prefers-reduced-motion. - When reviewing, cite file paths and line numbers and propose concrete fixes.
Related Skills
mediar-ai/tui-ui
tools
VerifiedTrustedCommunity
Design web-like user interfaces in the terminal and inside tmux with a cell-grid Canvas, CSS-like box model, flexbox/grid layout, and 15 reusable widgets such as Panel, Table, Card, ProgressBar, Meter, Tabs, Tree, Badge, Banner, and a braille line chart. Use when an agent needs a dashboard, panel, table, status page, TUI layout, tmux dashboard, screenshot-driven CLI/TUI replica, ANSI frame, truecolor render, pyte PNG screenshot smoke test, wide-character alignment, or a new terminal widget.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/drive-tui
tools
VerifiedTrustedCommunity
Drive interactive terminal (TUI) programs — CLIs, REPLs, installers, menu apps, agent CLIs, and editors like vim — through a PTY, reading semantic screen snapshots. A pattern library classifies a screen (REPL, menu, pager, fzf search, confirm dialog, form, spinner, wizard) and drives it with a ready recipe. Use when a program expects a live terminal (arrow-key menus, prompts, spinners, password fields, curses UIs), or when a piped command hangs or prints nothing.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/cmd-art
tools
VerifiedTrustedCommunity
Design and render terminal/CMD visual effects and ASCII art from a one-line request via the pluggable `fx` engine (18 hot-swappable, themeable effects plus scripted shows). Effects include donut, matrix rain, plasma, fire, a spinning 3D ball, Game of Life, wireframe cube, 3D text banners, rainbow/lolcat gradient text, starfield, tunnel, fireworks, image-to-ASCII, and more. Use when the request is for a terminal animation, ANSI/CLI art, or a new console effect. Pure Python stdlib; truecolor.
7SKILL.mdUpdated Jul 11, 2026
mediar-ai/packages/skills/skills/x-twitter-scraper
tools
VerifiedTrustedCommunity
# X Twitter Scraper Use Xquik for X/Twitter tweet search, user lookup, profile tweets, follower export, media download, monitors, webhooks, posting workflows, and MCP-backed API exploration. ## Prerequisites - A Xquik API key in `XQUIK_API_KEY`. - Internet access to `https://xquik.com/api/v1`, `https://xquik.com/mcp`, and `https://docs.xquik.com`. - A clear user request that identifies the target tweets, users, accounts, keywords, media, monitor, webhook, or write action. ## Source Truth -
6SKILL.mdUpdated May 31, 2026