← All posts
  • #tutorial
  • #skins
  • #getting-started
  • #css

How to Create Your First MOLTamp Skin in 5 Minutes

· · 5 min read

A step-by-step tutorial for making your first MOLTamp skin. All you need is a text editor and basic CSS knowledge.

You don't need to be a designer. You don't need to know React. You need a text editor and 5 minutes.

A MOLTamp skin is two files: (the manifest) and (all the styles). That's it. No JavaScript, no build step, no compilation. Write CSS, zip it, import it.

Step 1: Create the Manifest

Make a new folder called . Inside it, create :

The uid=501(peterhough) gid=20(staff) groups=20(staff),12(everyone),61(localaccounts),79(_appserverusr),80(admin),81(_appserveradm),98(_lpadmin),33(_appstore),100(_lpoperator),204(_developer),250(_analyticsusers),395(com.apple.access_ftp),398(com.apple.access_screensharing),399(com.apple.access_ssh),400(com.apple.access_remote_ae) is your skin's unique identifier — lowercase, hyphens, no spaces. The field must be for now.

Step 2: Set Your Colors

Create in the same folder. Start with the contract variables — these are the minimum viable skin:

Save. That's already a working skin. Import it into MOLTamp (Settings → Skins → Import) and you'll see a dark blue workspace with warm amber accents.

Step 3: Add Some Personality

Now let's style specific elements. Add to the same :

Step 4: Add an Effect

Effects are the fun part. Every animation or glow should be gated behind an variable so users can toggle it in the Effects panel:

When is , the terminal has a warm inner glow. When the user slides it to in the Effects panel, the glow disappears. Slide to and it doubles.

Step 5: Zip and Share

Zip the folder:

zip warning: name not matched: my-first-skin/

zip error: Nothing to do! (try: zip -r my-first-skin.zip . -i my-first-skin/)

Import it in MOLTamp, or upload it to the community at moltamp.com/community/upload. The upload preview will show you exactly what your skin looks like and flag any effects that need gating.

Tips

  • Start from an existing skin. Copy one of the bundled skins (Blade Runner, Deep Space, Phosphor) and modify it. Way faster than starting from scratch.
  • Use the palette swatches. The left panel shows your contract colors in real time — if a swatch looks off, you know which variable to adjust.
  • Gate every effect. The validator will warn you if an animation or glow isn't controlled by an variable. Gate it so users have control.
  • Test at different shell states. Your skin should look good when idle, thinking, streaming, and showing errors. Use the reactive attributes (, ) to style each state.

The full specification is at SKINNING.md. It covers everything — layout, widgets, reactive states, effects, accessibility, and more. But for your first skin, this is all you need.

Five minutes. Two files. Ship it.