Making Your First MOLTamp Skin — A Two-Hour Guide

Most MOLTamp users install a community skin and stop there. That is completely fine. But if you have ever thought "this is 90% what I want, I'd just change three things," you are eight minutes away from a fork and three hours away from your first published skin.

This post is the real end-to-end walkthrough. No abstract architecture diagrams, just "here is what to type, in what order, from blank folder to shipped."

What a skin actually is

A MOLTamp skin is two files:

• manifest.json — metadata (name, author, version) plus a small set of declarative settings (accent color, font, layout preferences)
• skin.css — the visual customization, scoped to MOLTamp's DOM

That is the whole thing. There is no build step, no framework to learn, no compiled output. If you can write CSS, you can make a skin.

Step 1: Pick a starting point

Do not start from blank. Fork an existing community skin that is close to what you want. The 10 minutes you save will outweigh the "but it's mine from scratch" feeling.

For this walkthrough, we'll fork phosphor — the green-monochrome skin that looks like a classic VT100. It is a good base because the CSS is simple and most of the customization is done through variables.

cd ~/Library/Application\ Support/moltamp/skins
cp -R phosphor midnight
cd midnight

Edit manifest.json:

{
  "name": "Midnight",
  "slug": "midnight",
  "author": "Your Name",
  "version": "0.1.0",
  "description": "A deep-blue riff on phosphor. For late-night sessions.",
  "accent": "#4d9fff",
  "font": "JetBrains Mono",
  "category": "monochrome"
}

Restart MOLTamp (or reload skins in Settings). Your new skin shows up in the picker. Apply it. It still looks exactly like phosphor — but now it is your fork, and you can change things.

Step 2: The accent color pass

Open skin.css. Most skins define their accent color at the top:

:root {
  --skin-accent: #22c55e;       /* phosphor green */
  --skin-accent-dim: #15803d;
  --skin-accent-glow: #22c55e33;
  --skin-bg: #0a0f0a;
  --skin-fg: #e8ecf1;
}

Change the accent color family. For a midnight blue skin:

:root {
  --skin-accent: #4d9fff;
  --skin-accent-dim: #2563eb;
  --skin-accent-glow: #4d9fff33;
  --skin-bg: #0a0d14;
  --skin-fg: #e8ecf1;
}

Save. MOLTamp hot-reloads the skin. You should immediately see the accent color shift from green to blue, and the background get a little bluer. This is the fastest 20% of skin authoring and already makes it yours.

Step 3: Picking the right blue is harder than it sounds

If your midnight blue looks garish, it is probably too saturated. Monitor calibration varies wildly, so the hex you pick will look different on different screens. Rules of thumb that work on most monitors:

• Accent saturation: 60-70% if it is on light backgrounds, 50-60% if on dark
• Accent lightness: around 60-65 for dark-mode skins, 40-45 for light-mode
• Avoid true primary colors (#0000ff) — they look digital-cartoon on modern displays

A reliable starting palette for a blue dark skin: #4d9fff accent, #2563eb dim, #0a0d14 background. Tune from there by ±5 on each channel until it looks right to your eyes.

Step 4: The font pass

Phosphor uses JetBrains Mono, which is a safe default. Try others:

• IBM Plex Mono — more distinct characters, slightly warmer
• Berkeley Mono — premium paid font but very popular for this kind of skin
• Cascadia Code — Microsoft's mono font, good ligature support
• Iosevka — narrow, letter-precise, lots of stylistic sets

Change "font" in manifest.json. Reload. Let it sit for twenty minutes of real usage before judging — fonts that look weird at first glance often read best over longer sessions, and vice versa.

Step 5: The status line and chrome

This is where skins start visibly diverging from their parent. Phosphor's status line is minimal. Let's add a subtle glow.

.moltamp-status-bar {
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--skin-accent) 4%, transparent)
  );
  border-top: 1px solid color-mix(in srgb, var(--skin-accent) 15%, transparent);
  backdrop-filter: blur(8px);
}

.moltamp-status-bar .moltamp-token-counter {
  color: color-mix(in srgb, var(--skin-accent) 70%, var(--skin-fg));
  text-shadow: 0 0 8px color-mix(in srgb, var(--skin-accent) 30%, transparent);
}

Now your token counter has a soft blue glow that reads like a CRT. This is the kind of small detail that separates "a skin I forked in 20 minutes" from "a skin I actually want to use."

Step 6: Widget frame styling

Widgets live in panels. Skinning the panels is where you can get really playful:

.moltamp-widget-panel {
  background: color-mix(in srgb, var(--skin-accent) 3%, var(--skin-bg));
  border: 1px solid color-mix(in srgb, var(--skin-accent) 12%, transparent);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--skin-accent) 6%, transparent),
    0 0 24px color-mix(in srgb, var(--skin-accent) 8%, transparent);
}

That gives your widgets a subtle inset border plus an outer glow, which tends to look polished without being busy.

Step 7: Test against real output

The mistake people make is previewing their skin against a blank terminal. A terminal with no output is always going to look clean. A terminal running Claude Code with long tool-call annotations is what you actually need to test against.

Open Claude Code inside your skinned MOLTamp. Run a real task — edit a file, have a conversation, let it produce several hundred lines of prose output. Now see how your skin looks. You will probably find:

• Code blocks are illegible because you didn't style them
• Tool invocations get lost because they blend into prose
• Error output has the wrong color weight

Fix those before publishing. Real usage is the only honest test.

Step 8: Publishing

Once you are happy, publishing is simple. Go to moltamp.com/community, sign in, hit "Submit a skin." Upload your folder. It goes through light moderation (we check for malicious code, not aesthetic judgment) and goes live typically within 24 hours.

Once live, other people can install your skin with one click. If they rate it well it gets surfaced in the popular feed. If it gets featured by the moderators it goes on the front page. First-time authors frequently get downloaded into the hundreds in the first week.

What takes longer than people expect

Three things reliably surprise first-time skin authors:

Picking the right palette. Getting a color scheme that reads well across code, prose, and widgets takes real attention. Budget an hour for just color picking.

Widget frame details. The skin feels cheap or polished largely based on how the widget panels are styled. Small details (border weight, shadow falloff, blur radius) matter disproportionately.

Typography tuning. Font + line height + letter spacing interact in ways you won't notice until you have used the skin for an hour. Expect to re-tune after your first real work session.

What does not take as long as people expect

Getting something shippable. From fork to publish is realistically 2-4 hours for your first skin. After that, 30-60 minutes per skin. The authoring loop is fast.

Finding your voice. Your second skin will be twice as good as your first, and your third will be identifiably "yours." Skin authoring has a steep early learning curve that plateaus fast.

Your homework

If you have read this far and own MOLTamp, here is the specific thing to do:

1. Fork phosphor (or deep-claw, or hexcore — whichever is closest to your taste)
2. Rename, change the accent color, change the background
3. Ship it to the community today

You will be one of 400 people who have published a skin instead of 40,000 who have installed one. And you will understand the tool in a way you cannot from just being a consumer of other people's work.

Full skin spec reference: github.com/shoot-here/moltamp-skins. Questions welcome in the community Discord.