Guide · Agent skill
How to use the Dark Blue Mesh Gradient Design agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Dark Blue Mesh Gradient Design skill (mesh-gradient-dark-blue-clean) teaches an AI agent to build web pages in one specific style: a near-black navy background, a large rounded hero panel with an animated blue gradient behind the content, thin rails, glass-like navigation pills and slow motion. It is written for designers and front-end developers who want a dark, premium landing page without designing every detail from scratch. This guide explains what an agent skill is, how to install this one, how to ask for the style, and what to check before you ship.
Dark Blue Mesh Gradient DesignMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the skill ZIP from this page.
- 2Unzip the folder. Extract the archive so the skill folder contains SKILL.md and the demo folder.
- 3Place it where your agent looks. Put the folder in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder.
- 4Or upload it in the Claude apps. Go to Settings, then Capabilities, then Skills, and upload the ZIP.
- 5Write a clear request. Describe the page, its audience and its content, and mention the dark blue mesh style.
- 6Review the output. Check contrast, text legibility and the reduced-motion behaviour before publishing.
What an agent skill is and what this one changes
An agent skill is a folder with a SKILL.md file that gives an AI agent instructions, and optionally supporting files, for a particular kind of task. The agent reads the skill's description and loads its instructions when a request matches.
This skill is a design system. Once it is active, the agent uses its colour tokens, page foundation CSS, hero shell, navigation, node callouts and CTA styles, plus a JavaScript canvas routine that draws the animated gradient. The source describes the goal as a mesh that powers the composition rather than sitting behind it as a generic backdrop.
- Near-black navy foundation, not flat black
- Rounded hero shell with a white-to-transparent gradient border
- Blue-led animated mesh drawn on a canvas inside the hero
- Compact translucent navigation pill and floating node labels
- One solid CTA and one ghost CTA, slow and subtle motion
Install the Dark Blue Mesh Gradient skill
Download the skill ZIP from this page and unzip it. For personal use across projects, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
If you use the Claude apps, you can instead upload the ZIP under Settings, then Capabilities, then Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Files included in the skill
The skill folder contains SKILL.md, the main instructions and design system, plus a demo folder with reference material. The demo folder holds demo/index.html, which is a visual reference, demo/PROMPT.md, which has example prompts, and demo/source.json.
- SKILL.md: design rules, colour tokens, CSS and canvas code
- demo/index.html: visual and interaction reference
- demo/PROMPT.md: example prompts, including a minimal one
- demo/source.json: source metadata
Ask for the style in natural language
You do not need special syntax. Describe a page that needs a dark, premium, technical feel with a blue animated hero, and the agent should match the skill's description. The skill's own examples mention it by name, so you can also write the name explicitly, as the demo prompts do.
Name the page concept and content anchors clearly. The demo prompts pair the skill with a product brief, a purpose and a few key features. Give the same kind of brief for your own page.
- Good: Build a dark navy landing page for an infrastructure product with a blue animated mesh hero, a floating status pill and two CTAs.
- Good: Use $mesh-gradient-dark-blue-clean to create a responsive standalone HTML page for our AI monitoring tool.
- Weak: Make it look cool.
Know what the skill is not for
The skill is deliberately dark and restrained. It is a poor fit for light, airy or colourful brands. The source also says that the animated, low-contrast gray-blue text and the motion need checking for accessibility, so review contrast and motion before launch.
- Not for light, airy or colourful brand systems
- Accessibility-critical projects need human review of contrast and motion
- The canvas code respects the prefers-reduced-motion setting
Safety notes: scripts and network
According to the skill listing, the skill runs no scripts and uses no network access, and it lists no required dependencies. The JavaScript in the skill is code the agent writes into your page. It runs in the visitor's browser, so review it like any front-end code before deploying.
The source also suggests WebGL or Three.js for a final build when available, and offers a 2D canvas version as a fallback. Choose the one your project can support.
- Runs scripts: no
- Uses network: no
- Requires: nothing listed
- Review generated front-end code before deploying
:root { --mesh-bg: #030712; --mesh-cobalt: #1d4ed8; }What people use it for
- A landing page for an infrastructure or cloud monitoring product with a glowing blue hero
- A front-end hero section for an AI product site with floating status pills and connector lines
- A dark, minimal design-system starting point that a team adapts to its own brand
- A standalone responsive HTML demo built from the demo prompts
Frequently asked questions
Is the Dark Blue Mesh Gradient skill free?
The skill is listed under the MIT licence, which is a permissive open-source licence. Check the licence file included with your download for the full terms before using it commercially.
What do I need to use this agent skill?
The listing states that it requires nothing and that it runs no scripts and uses no network access. You need an agent environment that supports skills, such as the Claude apps or Claude Code with a skills folder.
Where do I install the mesh gradient skill?
Unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, upload the ZIP under Settings, then Capabilities, then Skills.
Why does my page not look like the demo?
The agent adapts the design system to your content, and the demo is a reference rather than a template to copy exactly. Include the page concept, content and the dark blue mesh style in your request, and check that the skill is installed in the folder your agent reads.
Does the animated gradient respect reduced motion?
Yes. The canvas code in the skill checks the prefers-reduced-motion setting and stops the drift animation when it is on. You should still test motion and contrast for your audience.
Is this skill better than a generic gradient background?
It is more specific. It provides tokens, layout rules, navigation, node and CTA styles and motion guidance, so the result is consistent. If you want a light or colourful page, or a simple static background, a generic approach is a better fit.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you want a dark, premium, technical landing page with an animated blue hero and a ready-made design system to adapt. Pick something else if you need light, colourful or highly accessible designs without a review step, since the style is deliberately dark and restrained.
Download the skill