New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Web Visuals

by glifxyz in glifxyz/glif-mcp-server

Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

MITAuto-check passedMedia & Creative

Install Web Visuals

skills CLI
$ npx skills add glifxyz/glif-mcp-server --skill web-visuals -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install glifxyz/glif-mcp-server web-visuals --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/glifxyz/glif-mcp-server.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/web-visuals .claude/skills/web-visuals && rm -rf skills-src

Use ~/.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/

Facts

Skill name
web-visuals
GitHub stars
212
Token cost
~1.5k tokens
SKILL.md length
759 words
Files
2
Skills in repo
10
Repo updated
First seen
Licence
MIT

At a glance

Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

  • Works in 5 steps: Take inventory → Match the site's style → Check cost, then batch → …
  • : add a hero image
  • SKILL.md covers 1. Take inventory, 2. Match the site's style, 3. Check cost, then batch and 4. Bring the files home, plus 2 more sections
  • Calls curl

What it does

Web Visuals is an agent skill from glifxyz/glif-mcp-server. Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code. Use when: "add a hero image", "this page needs visuals", "replace these stock photos", "placeholder images", "background texture", "seamless pattern", "paper grain", "section backgrounds", "feature illustrations", "SVG illustration", "empty state art", "404 illustration", "infographic", "blog cover", "OG image", "social share image", "product cutouts for the shop", "looping…

Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `agents/openai.yaml`). Compatibility notes: Requires the Glif MCP server at https://glif.app/api/mcp.

It sits in Media & Creative, covering Icons and illustration, Game assets and audio and Logo and visual identity. It works with Model Context Protocol. The repository describes itself as: Glif's hosted MCP server, plugin and skills for creating images, video and audio. Works with Claude, ChatGPT, Codex, Cursor and more. The licence is MIT.

When your agent uses it

  • : add a hero image
  • This page needs visuals
  • Replace these stock photos
  • Placeholder images

Example prompts

  • “add a hero image”
  • “this page needs visuals”
  • “replace these stock photos”
  • “/web-visuals”

Requirements

  • Compatibility (from SKILL.md): Requires the Glif MCP server at https://glif.app/api/mcp.

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Take inventory
  2. Match the site's style
  3. Check cost, then batch
  4. Bring the files home
  5. Wire it in

What it can do on your machine

Read from SKILL.md and the folder at commit 0c90bf7. 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

    Shell commands in SKILL.md call:

    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use curl, 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.

  • Compatibility

    Requires the Glif MCP server at https://glif.app/api/mcp.

    From compatibility in the SKILL.md frontmatter.

Context cost

Web Visuals loads about 1.5k tokens when it runs. Until then it costs about 220 tokens; SKILL.md has 759 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~220
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

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 glifxyz/glif-mcp-server at commit 0c90bf7, republished under its MIT licence (© glifxyz). 759 words, ~1,452 tokens.

Download SKILL.mdSave it as .claude/skills/web-visuals/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
web-visuals
description
Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code. Use when: "add a hero image", "this page needs visuals", "replace these stock photos", "placeholder images", "background texture", "seamless pattern", "paper grain", "section backgrounds", "feature illustrations", "SVG illustration", "empty state art", "404 illustration", "infographic", "blog cover", "OG image", "social share image", "product cutouts for the shop", "looping background video", "scroll animation video", or when a page you're building has empty image slots. NOT for: editing an existing image (use edit-images), images not tied to a site (use make-images), logos or icons (use app-icons-and-logos), store or launch graphics (use app-promo-materials), demo videos (use app-demo-videos), game art (use game-assets).
compatibility
Requires the Glif MCP server at https://glif.app/api/mcp.

Make the visuals a web page needs and put them in the project. The user's explicit instructions come first, within host safety rules.

1. Take inventory

Read the page or component. List each visual slot:

  • Hero: full-bleed or split, and which side the headline sits on.
  • Section backgrounds: soft gradients, paper grain, material close-ups.
  • Textures and patterns: must tile seamlessly.
  • Illustrations: feature cards, empty states, 404, onboarding. Ask for SVG when the style is flat.
  • Cutouts: product or people photos on a transparent background, to sit on page colors.
  • Infographics and stat cards: keep the numbers and labels in HTML; let Glif make the art around them.
  • Device or hardware surface: a photoreal laptop, phone or panel with a pure #00FF00 screen area that your code draws live UI into.
  • OG image: 1200×630, one per major route.
  • Motion (optional): a looping background, or a scroll-scrubbed hero video.

Use what the user already has first. Never replace a supplied logo, product photo or screenshot. Glif fills the gaps.

2. Match the site's style

Pull the palette (CSS variables or Tailwind theme), fonts, mood and any existing images. Put hex colors and a one-line mood in the brief. If a logo or screenshot sets the style, upload it with upload_file and attach the returned fileUrl.

If the site supports dark mode, ask for matched light and dark versions with the same size and crop.

3. Check cost, then batch

Generation spends the user's Glif credits.

  • If the user asked for these visuals, go ahead.
  • If adding visuals was your idea, show the slot list in one line each and wait for a yes.
  • Video uses more credits than images. Offer it; never make it unasked.
  • When the look is still open, ask for 2 or 3 directions for the hero first, then make the rest in the chosen style.

Send one compose_project call for the whole page. For each asset, give:

  • filename, such as hero.png or texture-paper.png
  • exact pixel size and aspect ratio
  • where it goes and what it must show
  • where to leave empty space for headline text

Add these rules to every brief:

  • No text, letters, logos or watermarks in images, except an OG card that should carry the page title. Real text stays in HTML.
  • Textures: seamless on all four edges, 1:1, low contrast so text on top stays readable.
  • Report each output's actual pixel size.

Keep coding with placeholders while it runs. Call get_job_status with the jobId as job_id when you need the results. A pending status or a timeout is not a reason to start another run. Share the projectUrl.

Show full SKILL.md (326 more words)Show less

4. Bring the files home

Never hotlink Glif URLs in shipped code. Download each result into the static folder, such as public/images/ (Next.js, Vite, Astro) or static/ (SvelteKit):

sh
curl -fsSL "<media url>" -o public/images/hero.png
file public/images/hero.png
  • Use the media's MIME type for the extension. Don't overwrite an existing file; save hero-v2.png instead.
  • Convert photos to WebP or AVIF if a tool is available, such as sharp, cwebp, magick or sips. Aim for about 300 KB for a hero, much less for other images.
  • Check each texture by tiling it 2×2. If a seam shows, ask Glif to fix that one in the same project.
  • Check real pixel sizes. Resize locally or ask Glif to redo a wrong one. Never upscale.
  • Check any text in an OG card letter by letter.

5. Wire it in

  • Set width and height (or use the framework's image component) to prevent layout shift.
  • Hero: fetchpriority="high", no lazy loading. Everything else: loading="lazy".
  • Add srcset widths such as 640, 1280 and 1920 when the framework doesn't.
  • Write real alt text. Use alt="" for decorative textures.
  • Textures: background-repeat: repeat with a sensible background-size. Grain overlays work well at 4–10% opacity.
  • Background video: <video autoplay muted loop playsinline poster="...">, MP4 (H.264), no audio track.
  • OG image: absolute URL in og:image and twitter:card set to summary_large_image.

Scroll-scrubbed hero video. Ask Glif for 3 to 5 keyframe stills first. After the user approves them, ask for smooth transitions between them, stitched into one MP4 encoded so every frame is a keyframe, for smooth seeking. In code, pause the video and set video.currentTime = progress * video.duration on scroll, inside requestAnimationFrame. Show the poster image when the user prefers reduced motion.

Then render the page, if you can, at narrow and wide widths, in light and dark mode. Report what you added and where. Report anything you couldn't check.

When not to use Glif

Simple shapes, gradients, dividers and standard UI icons are better as CSS, hand-written SVG or the project's icon library. Don't spend credits on them.

© glifxyz, MIT. 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 1 other file in skills/web-visuals of glifxyz/glif-mcp-server.

  • SKILL.md
  • agents/openai.yaml

Open the folder on GitHubat commit 0c90bf7

Compare with similar skills

Web Visuals 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.

Web Visuals compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Web Visuals this skillglifxyz/glif-mcp-server212—~1.5kAutomated safety check: PassMIT
Canvasocial-media-skills/skills128—~2.1kAutomated safety check: PassMIT
Fal AI Generationwitnesstodark/mr-mak-workspace343—~1kAutomated safety check: NotesMIT
Scenario Ideogramscenario-labs/skills931—~2.7kAutomated safety check: PassMIT
Imagegennexu-io/open-design100k—~300Automated safety check: PassApache-2.0
SEO Image GeneratorAgriciDaniel/claude-seo19k2 repos~2.1kAutomated safety check: PassMIT

Similar skills

  • Canva

    social-media-skills/skills

    The Canva craft skill — produce on-brand social graphics, carousels, quote cards, infographics, and thumbnails at scale without a designer, and escape the "Canva look." Use when someone wants to…

    128 GitHub stars~2.1k tokensUpdated 7 days ago
    Media & CreativeAuto-check passed

  • Fal AI Generation

    witnesstodark/mr-mak-workspace

    Generate and edit images, create video, audio, 3D assets or material maps through fal.ai MCP or the Python queue client.

    343 GitHub stars~1k tokensUpdated today
    Media & CreativeAuto-check: notes

  • Scenario Ideogram

    scenario-labs/skills

    A skill your agent uses when generating or editing images with Ideogram models on Scenario via MCP: posters, logos, menus, packaging, or signage with exact in-image text, editing an image in place…

    931 GitHub stars~2.7k tokensUpdated today
    Media & CreativeAuto-check passed

  • Imagegen

    nexu-io/open-design

    Generate and edit images using OpenAI's Image API for project assets — UI mockups, icons, illustrations, social cards, and visual references.

    100k GitHub stars~300 tokensUpdated today
    Media & CreativeAuto-check passed

  • SEO Image Generator

    AgriciDaniel/claude-seo

    Generates Open Graph previews, blog hero images, product photos and infographics for SEO use through Gemini image tools and the banana extension.

    19k GitHub starsUsed in 2 repos~2.1k tokens
    Media & CreativeAuto-check passed

  • Blog Image

    AgriciDaniel/claude-blog

    AI image generation and editing for blog content powered by Gemini via MCP.

    2.3k GitHub stars~3.4k tokensUpdated today
    Media & CreativeAuto-check passed

More from glifxyz/glif-mcp-server

All 10 skills in this repo

  • App Demo Videos

    glifxyz/glif-mcp-server

    Record a screencast of an app you are building and turn it into a polished demo, explainer or promo video with Glif, using video templates for device mockups, captions, voiceover and music.

    212 GitHub stars~1.4k tokensUpdated today
    Auto-check passed

  • Audio And Video

    glifxyz/glif-mcp-server

    Make or edit audio and video with Glif, from a text brief or from a reference image, video or audio file.

    212 GitHub stars~1.6k tokensUpdated today
    Auto-check passed

  • Edit Images

    glifxyz/glif-mcp-server

    Edit an existing image with Glif: remove the background, erase or replace objects, expand the canvas, restore or upscale, retouch, restyle or change one detail.

    212 GitHub stars~778 tokensUpdated today
    Auto-check passed

  • Make Images

    glifxyz/glif-mcp-server

    Make new still images from a brief with Glif and save them to a folder: concept art, a series of variations, mockups, posters, illustrations, wallpapers, reference boards or any picture that isn't…

    212 GitHub stars~931 tokensUpdated today
    Auto-check passed

  • App Icons And Logos

    glifxyz/glif-mcp-server

    Design a logo, app icon, favicon set, icon set or brand kit with Glif for an app or site you are building, then export every size and wire it into the code.

    212 GitHub stars~1.3k tokensUpdated today
    Auto-check passed

  • App Promo Materials

    glifxyz/glif-mcp-server

    Plan and make launch, store, ad and campaign graphics with Glif: real app screens turned into store listings and launch posts, or a coordinated set of product photos, ads, a short video and a jingle…

    212 GitHub stars~1.7k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Web Visuals

What does Web Visuals do?

Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code. Web Visuals is an agent skill from glifxyz/glif-mcp-server. Make images, textures, illustrations and background video for a website or app you are building, with Glif, and wire them into the code.

When should I use Web Visuals?

Web Visuals fits situations like: : add a hero image; this page needs visuals; replace these stock photos; placeholder images.

How do I install Web Visuals in Claude Code?

Run `npx skills add glifxyz/glif-mcp-server --skill web-visuals -a claude-code`. Or copy the skill folder (skills/web-visuals in glifxyz/glif-mcp-server) into .claude/skills/web-visuals in your project. Claude Code loads it when a task matches its description.

How do I install Web Visuals in Codex?

Run `npx skills add glifxyz/glif-mcp-server --skill web-visuals -a codex`. Or copy the skill folder (skills/web-visuals in glifxyz/glif-mcp-server) into .agents/skills/web-visuals in your project. Codex loads it when a task matches its description.

Can I use Web Visuals 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 glifxyz/glif-mcp-server --skill web-visuals -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/web-visuals, .gemini/skills/web-visuals, .github/skills/web-visuals and .opencode/skills/web-visuals in your project.

What does Web Visuals need to run?

Going by SKILL.md and its folder, Web Visuals needs the command-line tools its instructions call (curl). Compatibility (from SKILL.md): Requires the Glif MCP server at https://glif.app/api/mcp..

Does Web Visuals access the network?

SKILL.md contains no URLs. Its commands use curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Web Visuals 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 Web Visuals use?

Web Visuals 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 Web Visuals use?

About 1.5k tokens (SKILL.md is roughly 5.8k 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 Web Visuals?

Skills that share tags, products or a category with Web Visuals: Canva (social-media-skills/skills, 128 stars), Fal AI Generation (witnesstodark/mr-mak-workspace, 343 stars), Scenario Ideogram (scenario-labs/skills, 931 stars) and Imagegen (nexu-io/open-design, 100k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Web Visuals?

glifxyz (a GitHub organization) maintains it in glifxyz/glif-mcp-server, which has 212 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 8, 2026.

Source: glifxyz/glif-mcp-server on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.