Guide · Agent skill
How to use the Blue Laser Clean Glass Layout agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The blue-laser-clean-glass-layout skill is a design direction for AI agents that builds dark, glassy web pages and app interfaces with a thin blue laser beam running through the background. It suits front-end developers and designers who want a premium dark dashboard or landing page without describing every visual detail themselves. After this guide you will know what the skill changes, how to install it, how to ask for it in plain language, and what to check before using the result.
Blue Laser Clean Glass LayoutMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the blue-laser-clean-glass-layout ZIP from this page.
- 2Unzip the skill. Extract the folder so that SKILL.md and the demo folder are inside it.
- 3Place it in your skills folder. Move the folder to ~/.claude/skills/, or to .claude/skills/ inside a project if you want it limited to that project.
- 4Or upload it in the apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the skill.
- 5Make a request. Ask for a page or dashboard and mention $blue-laser-clean-glass-layout in the request.
- 6Review the output. Check contrast, readability and motion before using the page.
What does the skill make the agent do?
When the skill is active, the agent follows one specific visual style for web pages and app interfaces. The background is near-black with subtle blue undertones, a thin blue or indigo laser beam with soft fog behind the content, frosted dark glass cards and navigation bars, and tidy dashboard layouts. The agent applies this one look across the hero section, navigation, cards, tables and subtle motion, rather than producing a generic design.
The skill is a set of design instructions. It does not run code or change anything on its own; the agent uses the instructions when it writes the page.
- Floating or sticky dark glass navigation pill with backdrop blur and thin borders
- Fixed laser and fog background behind a scrollable content layer
- Glass cards with translucent dark fill and one-pixel gradient borders
- Dashboard shells with sidebars, metric cards, data tables and search controls on the same surface style
- Calm motion such as masked headline reveals, soft beam pulse and gentle hover brightening
How do you install the blue-laser-clean-glass-layout skill?
Download the ZIP of the skill from this page and unzip it. To make it available for your own use, place the folder in ~/.claude/skills/. To keep it only for one project, place it in that project's .claude/skills/ folder instead.
You can also upload the skill in the Claude apps: open Settings, go to Capabilities, then Skills, and upload it there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills
How do you trigger the skill with a natural request?
You do not need to name every design detail. Ask for the kind of page you want and mention the skill by name. The demo prompts in the package use the form $blue-laser-clean-glass-layout followed by the task, so you can follow the same pattern.
Name the page type and the content it needs. The skill is strongest for dark, premium, blue-accented interfaces, so say so if that is what you want.
- Use $blue-laser-clean-glass-layout to build a dark SaaS landing page with a hero, three feature cards and a pricing section.
- Use $blue-laser-clean-glass-layout to create a dashboard with a sidebar, four metric cards, an event stream and a data table.
- Use $blue-laser-clean-glass-layout to make a standalone HTML example that shows the style.
Use $blue-laser-clean-glass-layout to create a polished standalone HTML example that clearly demonstrates the skill.What does the package include?
The skill folder contains SKILL.md, which holds the design rules, and a demo folder. The demo contains demo/index.html and demo/PROMPT.md. The prompt file describes a standalone reference demo with inline CSS and JavaScript, eighteen slow procedural wave bands and one narrow moving signal beam placed behind live-system metadata.
Read demo/index.html to see the look in a working page, and use demo/PROMPT.md as a template for your own requests.
- SKILL.md: the design system rules, visual target, implementation guidance, patterns, tuning knobs and things to avoid
- demo/index.html: a standalone example page
- demo/PROMPT.md: example prompts for minimal and full recreations
What requirements and safety notes apply?
The skill lists no required tools. It does not run scripts and does not use the network. Because it only supplies instructions, the main thing to check is the output the agent produces.
Review generated pages for readability. The skill warns against haze reducing readability, but it does not verify contrast. Motion and glow effects may also need review before you ship.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Check text contrast yourself, since the skill does not measure it
- Review motion and glow for accessibility needs
What tips improve the results?
Keep the laser thin. The skill asks for a narrow beam with separate control of halo, pulse and smoke, so say if you want a restrained effect. Ask for blue mood changes if you want something cooler or more energetic, and ask for less layout density if the page feels crowded.
If the output looks like generic dark glass or bright pastel cards, restate that the design should be dark, blue-led and premium.
- Ask for indigo, cobalt or electric blue depending on the mood you want
- Limit the number of floating cards so the composition stays clean
- Ask for a light or brand-specific theme only if you use another skill; this one is dark by design
What people use it for
- A dark SaaS landing page with a laser-lit hero and a blue CTA button beside a glass secondary button
- An operations dashboard with a sidebar, metric cards, live event stream and clean data table
- A standalone HTML demo of the glass and laser style for a design review
- A premium product page with floating pill navigation and border-gradient feature cards
Frequently asked questions
Is the blue laser clean glass layout skill free?
The skill is released under the MIT licence, as listed on this page. Check the licence file in the package for the full terms before reusing it.
What do I need to use this skill?
The listing states that nothing is required. It does not run scripts and does not use the network, so it only adds design instructions to your agent.
Where do I put the skill folder?
Place it in ~/.claude/skills/ for personal use, or in .claude/skills/ inside a project. You can also upload it in the Claude apps under Settings, Capabilities, Skills.
Does the skill change my files or run code?
No. The skill is a set of design instructions and does not change anything on its own. The agent writes the page based on those instructions.
Can I use this style for a light or brand-specific website?
Not well. The skill is dark and blue-led by design, so it is a poor fit for bright, light-themed or brand-specific designs.
Is the skill accessible enough for production?
The skill warns against haze reducing readability but does not verify contrast. Test text contrast and review motion and glow effects before release.
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 premium dark dashboard or landing page with a thin blue laser look and you are happy to review contrast and motion yourself. Pick a different skill if you need a light theme, a brand-specific design, or interfaces where accessibility must be verified.
Download the skill