Guide · Agent skill
How to use the Tech Green Dark Mode Design agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The tech-green-dark-mode-modern skill is a style guide for AI coding agents. Once installed, it tells the agent to build web pages and dashboards with near-black surfaces, layered panels, thin gradient borders, mono metadata labels and small emerald highlights. This guide explains what the skill changes, how to install it, how to trigger it with plain requests, and what to check before using it on a real project.
Tech Green Dark Mode DesignMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Download the tech-green-dark-mode-modern skill as a ZIP from this page.
- 2Unzip the folder. Unzip the archive so that SKILL.md sits inside the tech-green-dark-mode-modern folder.
- 3Place the folder. Move it to ~/.claude/skills/ for personal use, or to .claude/skills/ in a project.
- 4Or upload it in the apps. In the Claude apps, open Settings, go to Capabilities, then upload it under Skills.
- 5Make a request. Ask for a dark technical dashboard or page, naming the skill with $tech-green-dark-mode-modern if you want to be explicit.
- 6Review the output. Check the generated HTML/CSS for layout, readability and contrast before using it.
What the skill makes the agent do
An agent skill is a folder of instructions that an AI agent loads when a task matches it. This skill applies one fixed visual direction to the agent's design output: a dark, instrument-panel style for web pages and dashboards.
The skill covers the page background, layout framing, cards, navigation, typography, data modules and motion. It asks for matte or dark-glass card shells, faint grid lines, vertical guides, corner brackets and tick marks, with green used only as a signal color for active states, live indicators and focused zones.
It is a style guide, not a generator of finished assets. The agent still writes the HTML/CSS itself. The skill also includes a demo page (demo/index.html) and a prompt file (demo/PROMPT.md) that show the look.
- Near-black or black base with subtle tonal separation between page, panels and elevated surfaces
- Emerald or mint accents for status dots, progress fills, active borders and graph highlights
- Sans-serif headlines and body text paired with monospace labels for IDs, timestamps and metadata
- Framed cards with one-pixel shells, corner details and dark inner panels
- Motion limited to masked reveals, slight hover brightening and quiet glow shifts
Install the skill from the ZIP download
Download the skill as a ZIP archive from this page, then unzip it. The skill folder must contain SKILL.md, which is the file the agent reads.
For a personal install that works across your projects, place the unzipped folder in ~/.claude/skills/. To limit it to one project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local setup, you can upload the skill instead. Open Settings, go to Capabilities, then add it under Skills.
- Personal install: ~/.claude/skills/tech-green-dark-mode-modern/
- Project install: .claude/skills/tech-green-dark-mode-modern/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the skill
Trigger the skill with natural requests
You do not need a special command. Ask for a dark technical dashboard or product page in plain language and mention the look you want. The skill's description covers requests for a dark, matte-black, emerald-accented, instrument-panel interface.
The demo prompts name the skill directly with $tech-green-dark-mode-modern. Using that name is the most reliable way to make sure the agent loads it.
- Use $tech-green-dark-mode-modern to build a dark analytics dashboard with framed cards and a green status indicator.
- Create a single-page operations overview in the tech green dark mode style with a header rail and three module cards.
- Build a product landing page with matte-black surfaces, mono labels and restrained green glow.
Use $tech-green-dark-mode-modern to create a polished standalone HTML example that clearly demonstrates the skill.Examples of what you can ask for
The skill suggests a few recurring patterns. You can name one in your request to get it directly: large dashboard cards with soft emerald underglow, header rails with mono section codes, compact modules with an icon, label and status footer, and data visuals where green marks only the active bars or nodes.
The demo prompt asks for a responsive hero with one focal point and three structural cards labeled Frame, Rhythm and Signal. You can adapt that structure to your own content.
- A responsive hero with three cards labeled Frame, Rhythm and Signal
- A metrics dashboard where green appears only on active bars and status dots
- A fixed background with vertical guides and corner brackets around the page shell
What the skill needs and how it runs
The skill lists no requirements. It does not run scripts and does not use the network, so it only changes the instructions the agent follows. Review the output as you would any generated HTML/CSS, because the agent writes the code and you decide what ships.
Because the skill pushes low-contrast textures and soft glows, check text contrast and readability before publishing. This matters most for accessibility-critical projects.
- Requirements: none listed
- Scripts: none
- Network access: none
- Licence: MIT
Tips for better results
Tell the agent how much technical detail you want. The skill lets you tune green intensity, surface lift, glow radius, texture amount and technical density. Asking for a lighter or denser instrument-panel feel gives more control than accepting the default.
If your brand already has a colour palette or layout, say so in the prompt or choose a different skill. The skill pushes one fixed palette and layout language, which can clash with an existing identity.
- Ask for green only on key components so the glow stays localized
- Specify the content and the number of modules before asking for the style
- Ask the agent to check contrast on the final output if readability matters
What people use it for
- Prototyping an analytics dashboard with framed metric cards and green status indicators
- Building an operations or monitoring interface with a header rail and mono section codes
- Creating a single-page product or landing page in a dark instrument-panel style
- Generating a standalone HTML/CSS reference page that shows the visual system
Frequently asked questions
Is the Tech Green Dark Mode Modern skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms before you reuse it in a commercial product.
What do I need to use this agent skill?
The skill lists no requirements. It does not run scripts and does not use the network, so it only adds style instructions for the agent.
Where do I install an agent skill?
Unzip the skill and place the 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, then Capabilities, then Skills.
Does the skill generate finished design files on its own?
No. It is a style guide the agent applies when it writes HTML/CSS and layouts. It also includes a demo page and prompt file that show the look.
Is this skill safe for accessibility-critical projects?
Use caution. The skill asks for low-contrast textures and soft glows, which can reduce readability unless you check the output against contrast requirements.
Can I use it for a brand that already has its own colours?
It is not a good fit. The skill pushes a single fixed palette and layout language, which may conflict with an existing visual identity. Consider a different skill or adjust the output manually.
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 consistent dark, instrument-panel style for a dashboard, analytics or operations prototype, and you want the agent to produce HTML/CSS in that look without long style instructions. Pick something else if your brand already has a visual identity, or if your project has strict accessibility or contrast requirements that a low-contrast, glow-heavy style could fail.
Download the skill