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.
Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type.
Install Gradient Text
$ npx skills add nexu-io/motion-anything --skill gradient-text -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install nexu-io/motion-anything gradient-text --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/nexu-io/motion-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/recipes/web/gradient-text .claude/skills/gradient-text && 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 "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .claude/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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/nexu-io/motion-anything/tree/main/recipes/web/gradient-textType 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 nexu-io/motion-anything --skill gradient-text -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install nexu-io/motion-anything gradient-text --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .agents/skills && cp -r skills-src/recipes/web/gradient-text .agents/skills/gradient-text && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .agents/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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 nexu-io/motion-anything --skill gradient-text -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install nexu-io/motion-anything gradient-text --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/recipes/web/gradient-text .cursor/skills/gradient-text && 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 "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .cursor/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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/nexu-io/motion-anything.git --path recipes/web/gradient-text--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 nexu-io/motion-anything --skill gradient-text -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install nexu-io/motion-anything gradient-text --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/recipes/web/gradient-text .gemini/skills/gradient-text && 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 "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .gemini/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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 nexu-io/motion-anything gradient-textInstalls 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 nexu-io/motion-anything --skill gradient-text -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .github/skills && cp -r skills-src/recipes/web/gradient-text .github/skills/gradient-text && 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 "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .github/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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 nexu-io/motion-anything --skill gradient-text -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install nexu-io/motion-anything gradient-text --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/nexu-io/motion-anything.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/recipes/web/gradient-text .opencode/skills/gradient-text && 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 "gradient-text" agent skill from https://github.com/nexu-io/motion-anything/tree/main/recipes/web/gradient-text into .opencode/skills/gradient-text/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gradient-text", 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
gradient-text- GitHub stars
- 844
- Token cost
- ~476 tokens
- SKILL.md length
- 136 words
- Files
- 4
- Skills in repo
- 12
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type.
- Works in 3 steps: Copy gradient-text.css into the project… → Wrap the phrase → Set brand colors via --g1/--g2/--g3;…
- Tasks that involve Plain language and style rules
- SKILL.md covers When to use it, When NOT to use it (restraint), How to apply and Accessibility & performance, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Gradient Text is an agent skill from nexu-io/motion-anything. Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.
Its SKILL.md is about 480 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files (for example `recipe.motion.yaml`).
It sits in Media & Creative, covering Plain language and style rules and Logo and visual identity. The repository describes itself as: ✨ The agentic motion layer — an open-source, chat-native motion engine. Describe the feeling; your AI ships the animation. The licence is Apache-2.0.
When your agent uses it
- Tasks that involve Plain language and style rules
- Tasks that involve Logo and visual identity
Example prompts
- “/gradient-text”
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Copy gradient-text.css into the project and link it.
- Wrap the phrase
- Set brand colors via --g1/--g2/--g3; tune the duration (default 6s).
What it can do on your machine
Read from SKILL.md and the folder at commit b016900. 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 (its code samples are html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Gradient Text loads about 476 tokens when it runs. Until then it costs about 59 tokens; SKILL.md has 136 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 nexu-io/motion-anything at commit b016900, republished under its Apache-2.0 licence (© nexu-io). 136 words, ~476 tokens.
Download SKILL.mdSave it as
.claude/skills/gradient-text/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.- name
- gradient-text
- description
- Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. One phrase per view; never body copy (readability). Pure CSS; falls back to a solid brand color under prefers-reduced-motion.
- triggers
- gradient text, animated headline, shimmering title, premium heading color, 渐变文字, 流光标题
- od.mode
- prototype
- od.surface
- web
- od.platform
- desktop
- od.category
- animation-motion
- od.upstream
- https://magicui.design/docs/components/animated-gradient-text
- od.example_prompt
- Use gradient-text on the hero word only: a slow on-brand gradient drifts through it. Keep the rest of the type solid; solid color under reduced-motion.
gradient-text
A gradient that drifts through a headline. Part of
motion-anything; obeys MOTION-SPEC.md. Technique
popularized by Magic UI, reimplemented dependency-free (pure CSS).
When to use it
- One hero word / short headline / brand name / key metric you want to feel premium.
When NOT to use it (restraint)
- Body copy or long text — it hurts readability and contrast. One short phrase per view.
- When guaranteed color contrast is required for accessibility.
How to apply
- Copy
gradient-text.cssinto the project and link it. - Wrap the phrase:
html <h1><span class="gradient-text">motion, anything</span></h1> - Set brand colors via
--g1/--g2/--g3; tune the duration (default 6s).
Accessibility & performance
- Under
prefers-reduced-motionthe drift stops and the text renders in a solid--g1color. - Animates
background-positionof a text-clipped gradient — GPU-safe.
Framework notes
- Pure CSS; works in any framework. Keep the base
--g1readable as the reduced-motion fallback.
© nexu-io, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 3 other files in recipes/web/gradient-text of nexu-io/motion-anything.
- SKILL.md
- gradient-text.css
- preview.html
- recipe.motion.yaml
Open the folder on GitHubat commit b016900
Compare with similar skills
Gradient Text 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 |
|---|---|---|---|---|---|---|
| Gradient Text this skillnexu-io/motion-anything | 844 | — | ~476 | Automated safety check: Pass | Apache-2.0 | |
| Brand and Design Toolkitnextlevelbuilder/ui-ux-pro-max-skill | 134k | 1 repos | ~3.5k | Automated safety check: Pass | MIT | |
| Image Prompt ReverseLunarXuan/image-prompt-reverse | 465 | — | ~678 | Automated safety check: Pass | GPL-3.0 | |
| Opentraces MarketingJayFarei/opentraces | 100 | — | ~2.3k | Automated safety check: Pass | Custom licence | |
| Brand Style Guiderampstackco/claude-skills | 940 | — | ~2.1k | Automated safety check: Pass | MIT | |
| Anima Composition DirectorShiroEirin/comfyui-good-anima | 478 | — | ~2.9k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Image Prompt Reverse
LunarXuan/image-prompt-reverse
Analyze user-provided reference images and reverse-engineer high-fidelity AI image-generation prompts.
Opentraces Marketing
JayFarei/opentraces
Generate branded marketing screenshots of opentraces CLI commands — wordmark + CLI card + caption + wallpaper, filename-stamped and auto-copied to the clipboard.
Brand Style Guide
rampstackco/claude-skills
Build or audit a comprehensive brand style guide that documents the full brand system including story, logo system, color, typography, imagery, voice, applications, and dos/don'ts.
Anima Composition Director
ShiroEirin/comfyui-good-anima
Convert Anima image-generation intent, tags, references, or rough prompts into concrete composition decisions.
Canva Design Feedback
canva-sdks/canva-skills
Read a Canva design and return structured, actionable design feedback — visual hierarchy, copy/messaging, layout & spacing, consistency, readability, and accessibility.
More from nexu-io/motion-anything
All 12 skills in this repoLike Burst
nexu-io/motion-anything
Add a celebratory particle burst to a like / favorite / reaction button.
Border Beam
nexu-io/motion-anything
Give one card or CTA a lively accent: a small bright comet of light travels around its border.
Magnetic Button
nexu-io/motion-anything
Make a primary button feel alive by gently pulling it toward the cursor as it approaches, then springing back.
Scroll Reveal
nexu-io/motion-anything
Reveal content as it scrolls into view — a gentle rise + fade, once per element.
Web Shader Extractor
nexu-io/motion-anything
Extract a real WebGL / WebGPU / Canvas / shader effect from a live webpage (e.g.
Web To Design Md
nexu-io/motion-anything
Extract a real website's design tokens — colors, typography, spacing, CSS, and motion — into a structured design.md an AI can consume.
Related
Questions about Gradient Text
What does Gradient Text do?
Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type. Gradient Text is an agent skill from nexu-io/motion-anything. Give one short headline quiet premium emphasis: a slow on-brand gradient drifts through the type.
When should I use Gradient Text?
Gradient Text fits situations like: tasks that involve Plain language and style rules; tasks that involve Logo and visual identity.
How do I install Gradient Text in Claude Code?
Run `npx skills add nexu-io/motion-anything --skill gradient-text -a claude-code`. Or copy the skill folder (recipes/web/gradient-text in nexu-io/motion-anything) into .claude/skills/gradient-text in your project. Claude Code loads it when a task matches its description.
How do I install Gradient Text in Codex?
Run `npx skills add nexu-io/motion-anything --skill gradient-text -a codex`. Or copy the skill folder (recipes/web/gradient-text in nexu-io/motion-anything) into .agents/skills/gradient-text in your project. Codex loads it when a task matches its description.
Can I use Gradient Text 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 nexu-io/motion-anything --skill gradient-text -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gradient-text, .gemini/skills/gradient-text, .github/skills/gradient-text and .opencode/skills/gradient-text in your project.
What does Gradient Text need to run?
SKILL.md names no scripts, command-line tools or credentials: Gradient Text is instructions for the agent only.
Does Gradient Text access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Gradient Text 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 Gradient Text use?
Gradient Text is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Gradient Text use?
About 476 tokens (SKILL.md is roughly 1.9k 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 Gradient Text?
Skills that share tags, products or a category with Gradient Text: Brand and Design Toolkit (nextlevelbuilder/ui-ux-pro-max-skill, 134k stars), Image Prompt Reverse (LunarXuan/image-prompt-reverse, 465 stars), Opentraces Marketing (JayFarei/opentraces, 100 stars) and Brand Style Guide (rampstackco/claude-skills, 940 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Gradient Text?
nexu-io (a GitHub organization) maintains it in nexu-io/motion-anything, which has 844 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on July 7, 2026.
Source: nexu-io/motion-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.