← All posts
  • #tutorial
  • #skinning
  • #css
  • #claude-code

Building your first MOLTamp skin

· · 7 min read

A skin is a folder with a manifest, a CSS file, and some assets. If you can write CSS, you can build a Claude Code theme. Here is the 30-minute version.

Building your first MOLTamp skin

A MOLTamp skin is the simplest possible thing: a folder containing a JSON manifest, a CSS file, and an optional assets/ directory. There is no build step, no compiler, no plugin system. You write CSS, you save the file, you reload — your terminal looks different.

This post walks you through building a complete skin from nothing, in about thirty minutes, no prior knowledge required beyond "I have written CSS at some point in my life."

The folder structure

Every skin lives in ~/Moltamp/skins/<your-skin-id>/. The minimum viable skin is two files:

~/Moltamp/skins/my-first-skin/
├── skin.json
└── theme.css

Optionally:

└── assets/
    ├── vibes.gif
    └── background.png

That is the entire format. No webpack, no plugin manifest, no manifest.json schema you need to look up — just a JSON file describing the skin and a CSS file describing how it looks.

Writing the manifest

Open skin.json in your editor and paste this:

{
  "id": "my-first-skin",
  "name": "My First Skin",
  "version": "1.0.0",
  "author": "You",
  "description": "A starter skin built in 30 minutes.",
  "engine": ">=2.0.0"
}

Two important things:

  • id must match the folder name exactly. Lowercase, hyphens only, no spaces.
  • engine is the minimum MOLTamp version your skin targets. >=2.0.0 is safe for anything modern.

That is the whole manifest. There are more optional fields (vibes art recommendations, default layouts, effects toggles) but you can add them later.

Writing the CSS

This is where the actual design happens. MOLTamp exposes about 40 CSS variables that control every color, font, and effect in the UI. You override them in :root and the entire app picks up your values.

Start with this skeleton:

:root {
  /* Terminal colors */
  --t-background: #0a0a0f;
  --t-foreground: #e0e0e8;
  --t-cursor: #4d9fff;

  /* Chrome (the panels around the terminal) */
  --c-chrome-bg: #08080a;
  --c-chrome-text: #e0e0e8;
  --c-chrome-dim: #5a5a72;
  --c-chrome-border: #1a1a2e;
  --c-chrome-accent: #4d9fff;
  --c-chrome-hover: rgba(77, 159, 255, 0.08);

  /* Effects */
  --effect-scanlines: 0;
  --effect-glow: 0;
  --effect-crt: 0;

  /* Fonts */
  --font-terminal: "JetBrains Mono", monospace;
  --font-chrome: "Inter", sans-serif;
}

Save the file. Open MOLTamp (or restart it if it was already running). Go to Settings → Skins. Your skin should appear in the list — pick it. The terminal background is now #0a0a0f and the cursor is blue.

That is it. You have a working MOLTamp skin.

The fun part: making it yours

Now play. Change the colors. Try a high-contrast monochrome by setting everything to grayscale variants of one accent. Try a CRT effect by setting --effect-scanlines: 1 and --effect-glow: 1. Try setting the chrome background to transparent and putting a giant background image in assets/.

There is no right way to do this. The goal is to build a room you want to be in, and the room is yours.

Adding ANSI terminal colors

If you want to control how the terminal renders colored output (like the colors ls --color uses), MOLTamp exposes the full ANSI palette as --t-black, --t-red, --t-green, etc. through --t-bright-white. Sixteen variables, sixteen colors. Override them in the same :root block.

A safe starting point for a dark theme:

--t-black: #1a1a2e;
--t-red: #ff5555;
--t-green: #50fa7b;
--t-yellow: #f1c232;
--t-blue: #6299e6;
--t-magenta: #c678dd;
--t-cyan: #56d4ef;
--t-white: #e0e0e8;
/* ...and the bright variants */

Testing your skin against real content

The best way to test a skin is to run actual code in it. Open a project in MOLTamp, run claude (or codex, or whatever your AI terminal of choice is), and let it work. Watch how the syntax-highlighted output looks against your background. Notice if any color combinations are unreadable. Iterate.

Common gotchas:

  • Bright text on bright background — happens easily if you set --t-foreground and --c-chrome-bg independently. Test against actual terminal output.
  • Cursor invisible against background — pick a --t-cursor color that contrasts hard with --t-background.
  • Accent color used for too many things — --c-chrome-accent shows up in a lot of UI states. If yours is a hot pink, the whole UI will look like an alarm.

Sharing your skin

When you are happy with your skin, you can package it and share it with the community. Go to Settings → Skins → Export. MOLTamp produces a .zip file. Upload it at moltamp.com/community and other users can install it with one click.

Your skin gets its own page at moltamp.com/skins/<your-skin-id> with screenshots, ratings, downloads, and your name attached. Welcome to the community gallery.

What is next

If 30 minutes was not enough, the skinning guide covers the full set of variables, the manifest schema, layout snapshots, vibes art recommendations, and how to build effects on top of the engine. There is also a _template skin in the bundled set you can fork as a starting point.

Everything else is just iteration. Make a thing. Save it. Look at it. Change one variable. Repeat. The community is full of skins that started exactly like that.