Skip to content
Get packs

Tech Green Dark Mode Design

Styles web interfaces as a modern dark, technical dashboard with emerald accents and framed cards

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

When installed, the agent follows a fixed visual direction when building web pages or dashboards: near-black backgrounds, layered panels, thin gradient borders, faint grid lines and corner brackets, monospace labels for metadata, and small emerald-green highlights for active states and status indicators. It is a style guide the agent applies to its design output, not a tool that generates finished assets on its own. The skill also includes a demo page and a prompt file that show the look.

Great for

  • Designers or developers who want a consistent dark, instrument-panel style for a dashboard or product page
  • Teams prototyping an analytics or operations interface quickly
  • People who want the agent to produce HTML/CSS in a specific aesthetic without writing long style instructions

Skip it if

  • Brands with an existing visual identity, since the skill pushes a single fixed palette and layout language that may conflict with it
  • Accessibility-critical projects: the skill asks for low-contrast textures and soft glows, which can reduce readability unless the agent is checked against contrast requirements

Try asking

  • “Build a dark-mode analytics dashboard with emerald status dots and framed metric cards”
  • “Redesign our landing page in a matte-black technical style with mono section labels”
  • “Create a monitoring panel layout with corner brackets and subtle grid background”
Step-by-step guide: how to use Tech Green Dark Mode DesignInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    tech-green-dark-mode-modern.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip tech-green-dark-mode-modern.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip tech-green-dark-mode-modern.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the page type and content (for example, a sales dashboard) so the agent can apply the module and card patterns sensibly
  • Ask the agent to check text contrast after applying the style, since the guidance favours low-contrast textures
  • Use the demo/index.html file as a visual reference to compare the agent's output against

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.