Guide · Agent skill
How to use the Blue Cloudy Clean Modern agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
Blue Cloudy Clean Modern is an agent skill: a set of written design rules that tells an AI coding agent to build web interfaces in a specific look, a full-screen blue sky background with soft drifting cloud light, white typography, thin container lines and gentle motion. This guide is for designers and front-end developers who may never have used an agent skill before. By the end you will know what the skill changes, how to install it, how to ask for a page that uses it, and where it fits and where it does not.
Blue Cloudy Clean ModernMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the blue-cloudy-clean-modern ZIP from this page and unzip it.
- 2Place the folder. Move the blue-cloudy-clean-modern folder into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 3Or upload in the apps. In the Claude apps, open Settings → Capabilities → Skills and upload the skill instead.
- 4Write a clear request. Describe the page type, purpose and content, and name the skill with $blue-cloudy-clean-modern or describe the sky-blue look.
- 5Review against the demo. Compare the output with demo/index.html for hierarchy, spacing and motion.
- 6Check contrast. Test white text on the pale blue areas before publishing any page that needs accessible contrast.
What the skill makes the agent do
An agent skill is a folder with a SKILL.md file that the agent reads when a task matches the skill's description. This skill does not run code. It gives the agent a design direction to follow when it builds a landing page or hero section.
When the skill applies, the agent aims for a rich blue-to-pale-blue sky atmosphere, white or translucent white UI details, minimal framing such as thin container rails and tiny corner squares, and refined sans-serif headlines with one italic or serif accent phrase. It favours open spacing over dashboard-style cards and grids.
- Full-viewport background built with canvas, WebGL, or layered gradients with drifting cloud-like light
- Pill buttons with gradient borders or translucent shells, plus a dark pill when a grounded call to action is needed
- Gentle motion: masked word reveals, soft fades, slow cloud drift and subtle CTA hover scaling
- Palette limited to blue and white, with at most one restrained extra accent
Install the Blue Cloudy Clean Modern skill
Download the ZIP of the skill from this page and unzip it. The folder contains SKILL.md, plus a demo folder with index.html, PROMPT.md and source.json. Keep the folder name as blue-cloudy-clean-modern.
For a personal install, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead. In the Claude apps you can instead upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/blue-cloudy-clean-modern/
- Single project: your-project/.claude/skills/blue-cloudy-clean-modern/
- Claude apps: Settings → Capabilities → Skills, then upload
~/.claude/skills/blue-cloudy-clean-modern/SKILL.mdHow to trigger the skill with a natural request
The skill loads when your request matches its description. You can name it explicitly with a dollar sign, as the included demo prompts do, or describe the look you want and let the agent pick it up.
Be specific about the page type and content. The skill controls the visual direction, so your request should cover the sections, copy and purpose of the page.
- Explicit: Use $blue-cloudy-clean-modern to build a landing page for a meditation app with a hero, three feature points and a footer.
- Descriptive: Make me a calm, airy sky-blue hero section for a design studio homepage with white headline type.
- Recreate the demo: Use $blue-cloudy-clean-modern to recreate the included demo/index.html as a responsive standalone HTML page.
Use $blue-cloudy-clean-modern to create a responsive standalone HTML design.Examples of good requests and what to expect
The included PROMPT.md gives a full product brief pattern: a page concept, a purpose, and content anchors such as headings and feature names. Using that structure helps the agent place content inside the sky-blue layout rather than inventing its own.
Treat demo/index.html as the visual and interaction reference. Ask the agent to match its hierarchy and motion, then review the result against it.
- Give a page concept, purpose and 3 to 5 content anchors
- Ask for a responsive standalone HTML file if you want a single page you can open in a browser
- Check contrast yourself after generation, since white text on pale blue can be hard to read
Know what the skill needs and its safety notes
The skill lists no required tools or packages. It does not run scripts and does not use the network, according to its listing. It is a set of written rules plus a reference demo.
Because it is only instructions, it cannot check accessibility for you. The skill's own guidance is that its white-on-blue look can fail contrast checks, so review any project that needs accessibility-critical contrast before shipping.
- Requirements: none listed
- Runs scripts: no
- Uses network: no
- Licence: MIT
Tips for better results
Choose the blue mood first: richer cobalt, brighter product blue or softer pastel azure. Name it in your prompt so the agent does not guess.
Keep content light. The skill is built for open layouts, so asking for many dense cards will fight the design.
Adjust the tuning points the skill names: cloud softness, framing visibility, and whether the main CTA is a dark grounded button or a lighter translucent shell.
- Name the blue tone you want
- Ask for a dark CTA pill if the action needs emphasis
- Ask for fewer accent colours, not more
- Avoid asking for dashboards or data tables with this skill
What people use it for
- A calm sky-blue landing page for a wellbeing or travel product
- A premium brand hero with minimal white framing and soft motion for a pitch or prototype
- A consistent aesthetic applied quickly to a new marketing page
- A responsive standalone HTML prototype based on the included demo
Frequently asked questions
How do I install the blue cloudy clean modern skill?
Download the ZIP from this page and unzip it. Put the blue-cloudy-clean-modern folder in ~/.claude/skills/ for personal use, or in a project's .claude/skills/ folder. In the Claude apps you can upload it under Settings → Capabilities → Skills.
Does the blue cloudy clean modern skill cost anything?
The skill is listed under the MIT licence. Check the licence text in the download for the full terms. This page does not list any price.
What does the skill require to run?
The listing shows no required tools, it runs no scripts and it uses no network access. It consists of a SKILL.md file of design rules and a demo folder.
Can I use this skill for a dashboard?
Not well. The skill explicitly avoids heavy cards and dense grids, so it is built for landing pages and hero sections rather than data interfaces.
Is this skill accessible?
The skill does not check accessibility. White text over pale blue gradients may fail contrast checks, so test and adjust before using it where accessible contrast is required.
Are there alternatives if I need a bold or dark brand look?
Yes. This skill restricts the palette to blue and white, so if your brand needs a bold, dark or highly colourful identity, pick a different design skill or write your own design rules.
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
Blue Cloudy Clean Modern suits designers and front-end developers who want a calm, airy, premium sky-blue landing page or hero and a quick, consistent look for a new page. It is a poor fit for dashboards, dense data interfaces, bold or colourful brands, and projects that need accessibility-critical contrast without manual review.
Download the skill