How to use the Liquid Background Hero agent skill

What the skill makes the agent produce

The skill produces a single HTML file. The background is drawn with CSS gradients and animations by default, with canvas or WebGL as optional methods, so the file opens by double-clicking and needs no external image files.

The page is built for either a 1920×1080 (16:9) landscape canvas or a 1080×1920 (9:16) portrait canvas. The background fills the whole frame, and a single quote sits in the centre or the lower left.

• Background: three to five large radial-gradient ellipses that drift, scale and hue-rotate on staggered loops of about 8 to 14 seconds.
• Text: one headline quote at 5 to 7vw, a small subtitle at 70% opacity and an optional call-to-action chip or hairline with metadata.
• Motion: a reduced-motion setting that turns the animation off for users who request it.

Install the skill in Claude

You can install the skill in one of three ways. Download the ZIP file from the skill's page in this directory. Then either unzip it into your personal skills folder at ~/.claude/skills/, or unzip it into a project's .claude/skills/ folder so it applies only to that project.

If you use the Claude apps instead, upload the ZIP under Settings → Capabilities → Skills.

• Personal use across projects: ~/.claude/skills/
• One project only: the .claude/skills/ folder inside that project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

Ask for it with a natural request

You do not need to type the skill name. Describe the output and mention the use: a video intro, a landing hero or a poster. Include your real quote or headline, because the skill is written to use your supplied words rather than placeholder text.

If your input is data rather than a quote, ask the agent to distil it into one line of 18 characters or fewer. The skill asks for that kind of short quote so the headline stays readable at large sizes.

• "Make a 16:9 video title frame with the quote 'Slow is smooth, smooth is fast' over a liquid background."
• "Build a 9:16 story poster with my headline and a soft aurora-style fluid background."
• "Create a landing page hero with a liquid background and this sentence as the big quote."

Choose a palette and background method

The skill offers four palettes and asks for one, not a rainbow. Solar Peach uses warm orange and peach tones. Ocean Aqua uses sea blues. Aurora Violet uses purple tones. Forest Mint uses green tones. Say which one you want in your request, or let the agent pick one.

For the background, the default is CSS layered gradients, which the skill calls the most stable option. Canvas with a simple noise field is a middle option, used when performance allows. WebGL fragment shaders are the most advanced option and the skill says to use them sparingly.

• CSS gradients: default and most reliable
• Canvas noise: middle option, falls back to a still image under reduced motion
• WebGL shader: advanced, use only when you need it

Typography and text readability

The text uses paper white (#fafaf8) or ink, depending on how light or dark the background is. A difference blend mode keeps the headline readable over any fluid colour. Suggested English fonts are Source Serif Pro, Inter Tight and Manrope Black. Chinese text uses Noto Serif SC for the headline and Noto Sans SC for the subtitle.

The skill sets its own styles. If your project needs exact brand colours or fonts, the skill is a poor fit, and you should say so clearly or choose another approach.

Safety notes: scripts and network

This skill does not run scripts. It does use the network in one optional case: the WebGL option may load the regl library from the jsdelivr CDN, or the agent may write plain WebGL inline. The CSS and SVG approach loads no external images.

The skill forbids external image links. Check the generated HTML for any external URL before you publish the file, and avoid the WebGL option if you do not want the page to load remote code.

• Scripts: none
• Network: optional, only the WebGL CDN option
• Images: none; the skill bans external image links

Tips for better results

Give the agent a finished quote rather than a rough idea, and state the canvas size first. Ask for reduced-motion support in the request if you plan to publish, since the skill is designed to include it. Open the file in a web browser to check the motion and the text contrast, then adjust the palette if the headline is hard to read.

• State the canvas size: 1920×1080 or 1080×1920
• Name one palette to keep the look restrained
• Preview in a browser before using the file in a video or poster