Guide · Agent skill
How to use the Dark Blue Contrasting Clean Design agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Dark Blue Contrasting Clean skill is an agent skill that tells an AI coding agent to build web pages in a dark, blue-led visual style: near-black navy backgrounds, bold cobalt feature blocks, thin framed layout lines and soft blue glows. This guide explains what an agent skill is, how to install this one, how to ask for the style in plain language, and what to check before you use the output. It is a design direction for the agent to follow, not a code library.
Dark Blue Contrasting Clean DesignMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from the page where you found this guide.
- 2Unzip the folder. Extract the dark-blue-contrasting-clean folder so it contains SKILL.md.
- 3Place it in a skills folder. Copy the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 4Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities and upload the skill under Skills.
- 5Describe your page. Ask for a page with a dark navy base, a cobalt feature block and framed layout, naming your page type and content.
- 6Review the output. Check the generated code and visuals for contrast, readability and the amount of glow before using it.
What an agent skill is and what this one does
An agent skill is a folder with a SKILL.md file that gives an AI agent extra instructions it can load when a task matches them. This skill's SKILL.md describes one visual system for web pages.
When the skill is active, the agent is guided to build a near-black navy page with one or more cobalt or royal-blue feature blocks as contrast moments, such as hero banners, CTA bands or spotlight cards. White headings and pale-blue support text sit over the dark base, and thin rails, border lines and small corner squares frame the content.
- Dark navy base with subtle tonal variation rather than flat pure black
- Cobalt gradient banners or CTA blocks inside dark framed containers
- Light, thin to regular sans-serif typography with small uppercase labels
- Blue glow used sparingly, for example in background blooms, button emphasis or small live dots
- Calm motion such as fade-up sections and gentle hover movement
Install the skill from the ZIP download
Download the ZIP for this skill from the page where you found this guide. Unzip it so that the folder named dark-blue-contrasting-clean, which contains SKILL.md, sits in one of the skills locations below.
For a personal install, put the folder in ~/.claude/skills/. For a single project, put it in the project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings, go to Capabilities and upload the skill under Skills.
- Personal: ~/.claude/skills/dark-blue-contrasting-clean/
- Project: .claude/skills/dark-blue-contrasting-clean/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
How to trigger the skill with a natural request
Describe the page you want and say that it should use the dark-blue look. The skill's description covers dark-blue clean design, strong contrast, cobalt gradient feature blocks, crisp framed structure and restrained premium glow, so requests that use those ideas are the most likely to load it.
The demo prompts in the source use the skill name directly, so you can also refer to it as $dark-blue-contrasting-clean in your request.
- Build a landing page for my product in the dark-blue contrasting clean style, with a cobalt CTA band at the top.
- Use $dark-blue-contrasting-clean to make a portfolio home page with framed sections and a restrained blue glow.
Example: a complete demo page
The skill ships a demo folder. demo/PROMPT.md holds the prompts used to recreate the reference demo, and demo/index.html is the standalone example it describes.
The reference brief asks for an editorial hero with one focal point and three structural cards labelled Frame, Rhythm and Signal. You can reuse that pattern for your own page by swapping in your own title and copy.
- Read demo/PROMPT.md to see the exact wording of the demo prompts
- Open demo/index.html in a browser to compare the agent's output with the reference
What the skill needs and safety notes
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing. Its files are SKILL.md, demo/index.html and demo/PROMPT.md.
Because it contains instructions rather than executable code, the main thing to check is the output the agent produces. Review any generated HTML, CSS or JavaScript in the normal way before deploying it.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better results
The skill's tuning notes let you control how bold the page feels. Ask for a richer royal blue or a darker steel blue, and say whether the cobalt block should be the hero centrepiece or a secondary conversion zone.
Frame density is another control. Ask for more or fewer rails, corner squares and dividers depending on how structured you want the layout. Avoid asking for glow on every card, since the skill advises against overdecorating.
- Name the focal point: hero, CTA band or product section
- Set frame density: sparse, standard or heavily structured
- Ask for blue intensity: royal blue or steel blue
- Keep glow limited to a few localized elements
What people use it for
- A dark, blue-led product landing page with a cobalt CTA band
- A portfolio home page with framed sections and numbered labels
- A marketing page with three feature cards and a restrained glow accent
- A standalone HTML reference page modelled on demo/index.html
Frequently asked questions
How do I install the dark blue contrasting clean skill?
Download the ZIP from the page, unzip it and place the dark-blue-contrasting-clean folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings, Capabilities, Skills.
Is the dark blue contrasting clean skill free?
The skill is licensed under the MIT licence, as stated on its listing. This guide does not list any price, so check the page where you downloaded it for any terms that apply.
What does the skill require?
The listing says nothing is required. It does not run scripts and does not use the network.
Does this skill write code for me?
It is a design direction for the agent to follow rather than a code library. The agent uses the style rules to produce its own layout, styling and motion.
When should I not use this skill?
Avoid it for projects that need a light or airy look, since the skill steers away from light sky-blue styles. It is also not suited to dense enterprise dashboards, because it is built for clean, sparse layouts.
Why isn't the skill triggering when I ask for a dark page?
Check that the folder is named dark-blue-contrasting-clean and contains SKILL.md in the right skills location. Then mention the style explicitly, using words like dark-blue, cobalt, contrasting or clean, or refer to $dark-blue-contrasting-clean.
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, blue-led landing page or product site and do not want to write style rules yourself. Pick something else if you need a light, airy look or a dense data-heavy dashboard, since this style is deliberately sparse and high-contrast.
Download the skill