VibeFuse is a local-first agent harness. Everything you extend it with comes in three flavours: skills, widgets and styling packs. This thread is the full zero-to-shipping walkthrough for all three, with copy-paste code. Paste any snippet into the Jarvis chat panel and ask it to build the thing for you.
Folders in C:\vibefuse\skills. Markdown instructions your agent loads on demand. Give them a slash command and they become one-word superpowers.
Single-file HTML apps that mount on the canvas. Dark theme, no build step, optional host bridge for storage and files.
Theme tokens, orb animation, particles, border and overlay effects, plus your own CSS and JS for the whole shell.
Create a skill called night-shift with a SKILL.md.
Create a widget called Pixel Clock with a dark neon UI.
Create a styling pack called Midnight Ember with embers particles and a pulse border.
1. Skills
Skills live in C:\vibefuse\skills\<slug> and are discovered from one file: SKILL.md. The front matter is the contract, the body is the procedure. Supporting files go in references/, scripts/ or assets/ and are read only when the skill runs.
C:\vibefuse\skills\release-notes\
SKILL.md
scripts\collect.ps1
references\style.md---
name: release-notes
description: Draft release notes from git log and publish to the forum. Use when the user says ship notes, changelog, or release post.
---
# Release Notes
1. Read the last tag with git describe --tags --abbrev=0
2. Collect commits since that tag, skipping merges.
3. Group into Added, Changed, Fixed, Docs.
4. Write CHANGELOG.md, then post a summary thread.
Always cite the commit hash for every bullet.- Be specific in the description. That sentence is the only thing the agent sees before it decides to load the skill.
- Write steps, not vibes. Numbered actions with real commands beat paragraphs of guidance.
- Ship scripts with it. A skill that owns a working script is far more reliable than one that improvises.
- Invoke with a slash command. Typing /release-notes in the Jarvis panel makes that skill mandatory for the turn.
2. Widgets
Widgets are marketplace packages: a manifest.json plus one self-contained index.html. No React, no npm, no build step. Author with create_widget and it lands in the Widgets nav and on the canvas immediately.
create_widget
name: Pixel Clock
description: Dark neon clock with world time zones
html: <!-- full single-file app -->
permissions: storage
spawn: true<!doctype html>
<html><head><meta charset='utf-8'>
<style>
html,body{height:100%;margin:0;background:#070b12;color:#e6edf7}
body{font:14px/1.5 Inter,system-ui,sans-serif;display:grid;place-items:center}
.glass{backdrop-filter:blur(14px);background:rgba(255,255,255,.05);
border:1px solid rgba(91,163,245,.35);border-radius:20px;padding:26px 34px}
#t{font-size:52px;font-weight:700;letter-spacing:.02em;
background:linear-gradient(90deg,#5ba3f5,#a5c9f5);-webkit-background-clip:text;color:transparent}
</style></head>
<body>
<div class='glass'><div id='t'>--:--</div></div>
<script>
const el=document.getElementById('t');
const tick=()=>{el.textContent=new Date().toLocaleTimeString()};
tick();setInterval(tick,1000);
</script>
</body></html>Need the shell? Talk to it with the optional host bridge:
const reqId = crypto.randomUUID();
parent.postMessage({bridge:'vibefuse',reqId,type:'hello'},'*');
parent.postMessage({bridge:'vibefuse',reqId,type:'config:set',
key:'theme',value:'dark'},'*');3. Styling packs
Packs restyle the entire harness: tokens, orb, particles, effects and arbitrary CSS or JS. They live in C:\vibefuse\styling\<slug>.
{
"shell": {
"tokens": { "--bg-0":"#05070c", "--text":"#e6edf7",
"--accent":"#5ba3f5", "--titlebar-bg":"rgba(5,7,12,.72)" },
"particles": { "canvas": { "preset":"embers", "color":"245,170,90",
"count":64, "speed":0.5, "size":1.6, "opacity":0.5, "direction":"up" } },
"effects": { "border":"pulse", "overlay":"scanlines", "intensity":0.55 },
"customCss": ".widget-window{border-radius:18px}"
}
}Particle presets: snow, stars, dust, embers, rain, spark, aurora, bubbles, fireflies, confetti, matrix, mist, petals, geometric, lightning. Overlay effects: scanlines, vignette-pulse, film-grain, crt, aurora-veil.
const pack = {
name: 'Midnight Ember',
theme: { shell: { ambient: false, particles: { canvas: {
preset: 'embers', count: 70, color: '245,170,90' } } } },
files: { 'effects.js': `
export default ({ qs, onCleanup }) => {
const t = setInterval(() => {
qs('.status-bar').style.opacity = 0.8 + Math.random() * 0.2;
}, 1400);
onCleanup(() => clearInterval(t));
};` }
};4. What makes it look good
- One accent, one neutral ramp. Pick a single accent and tint everything from it instead of stacking colours.
- Type scale of four. 13px body, 15px secondary, 20px title, 52px hero. Nothing else.
- Space in eights. 8, 16, 24, 32 keeps panels calm at every zoom level.
- Glass beats flat. Transparent white at 4 to 7 percent, a 1px accent border at 35 percent and backdrop blur reads as premium on dark.
- Motion is seasoning. One 200 to 400ms transition on hover and entry, then stop. Static beauty ages better than constant animation.
- Contrast guard. Body text at 7 to 1 against its own panel, not against the page background.
Skill: SKILL.md with a sharp description, plus any script it needs.
Widget: one index.html that fills the frame at about 540px wide and 190px tall.
Styling pack: rich tokens, an orb style, one particle preset, one CSS block. Then refresh the pack.
Links: the marketplace, the VibeFuse docs, and the Discord. Reply below with what you build.