solpbc.org
open source is social v-it.org
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>get started — vit</title>
7 <meta name="description" content="Set up vit and start discovering software capabilities across the network.">
8 <meta property="og:title" content="get started — vit">
9 <meta property="og:description" content="Set up vit and start discovering software capabilities across the network.">
10 <meta property="og:type" content="website">
11 <link rel="icon" type="image/svg+xml" href="/brand/vit-mark.svg">
12 <style>
13 :root {
14 color-scheme: light;
15 --vit-green: #06D6A0;
16 --vit-green-deep: #059669;
17 }
18
19 body {
20 margin: 0;
21 padding: 0;
22 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
23 color: #111827;
24 background: #ffffff;
25 line-height: 1.6;
26 }
27
28 .container {
29 max-width: 720px;
30 margin: 0 auto;
31 padding: 24px 20px 32px;
32 }
33
34 header {
35 border-bottom: 2px solid var(--vit-green);
36 padding-bottom: 16px;
37 margin-bottom: 24px;
38 }
39
40 .header-bar {
41 display: flex;
42 align-items: center;
43 justify-content: space-between;
44 gap: 16px;
45 }
46
47 header h1 {
48 margin: 0;
49 line-height: 1;
50 }
51
52 header h1 a {
53 display: inline-flex;
54 align-items: flex-end;
55 text-decoration: none;
56 cursor: pointer;
57 }
58
59 header h1 svg {
60 display: inline-block;
61 height: 28px;
62 width: auto;
63 }
64
65 .ality {
66 display: inline-block;
67 color: var(--vit-green);
68 font-size: 0.82rem;
69 font-weight: 700;
70 letter-spacing: 0.01em;
71 line-height: 1;
72 opacity: 0;
73 max-width: 0;
74 overflow: hidden;
75 transition: opacity 0.3s ease, max-width 0.4s ease, margin 0.4s ease;
76 white-space: nowrap;
77 margin-left: 0;
78 padding-bottom: 5px;
79 }
80
81 .ality.show {
82 opacity: 1;
83 max-width: 50px;
84 margin-left: 1px;
85 }
86
87 .tagline {
88 margin: 6px 0 0;
89 color: #4b5563;
90 font-size: 1rem;
91 }
92
93 nav {
94 display: flex;
95 flex-wrap: wrap;
96 gap: 14px;
97 }
98
99 nav a {
100 color: var(--vit-green-deep);
101 text-decoration: none;
102 }
103
104 nav a:hover {
105 text-decoration: underline;
106 }
107
108 nav a.active {
109 color: var(--vit-green-deep);
110 text-decoration: underline;
111 text-decoration-color: var(--vit-green);
112 text-underline-offset: 3px;
113 }
114
115 .nav-toggle {
116 display: none;
117 background: none;
118 border: none;
119 font-size: 1.5rem;
120 cursor: pointer;
121 color: var(--vit-green-deep);
122 padding: 0;
123 line-height: 1;
124 }
125
126 a {
127 color: var(--vit-green-deep);
128 }
129
130 main {
131 min-height: 240px;
132 }
133
134 .hero {
135 font-size: 1.8rem;
136 margin-top: 0;
137 margin-bottom: 0.4em;
138 line-height: 1.2;
139 }
140
141 .hero-visual {
142 margin: 1.2em -80px;
143 }
144
145 .hero-visual img {
146 width: 100%;
147 height: auto;
148 display: block;
149 }
150
151 @media (max-width: 880px) {
152 .hero-visual {
153 margin-left: -20px;
154 margin-right: -20px;
155 }
156 }
157
158 .cta-row {
159 display: flex;
160 flex-wrap: wrap;
161 gap: 8px 20px;
162 }
163
164 .cta-row a {
165 color: var(--vit-green-deep);
166 font-weight: 500;
167 }
168
169 main h1,
170 main h2,
171 main h3,
172 main h4 {
173 line-height: 1.25;
174 margin-top: 1.5em;
175 margin-bottom: 0.6em;
176 }
177
178 main p,
179 main ul,
180 main ol,
181 main blockquote,
182 main pre {
183 margin-top: 0;
184 margin-bottom: 1em;
185 }
186
187 pre,
188 code {
189 font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
190 }
191
192 pre {
193 background: #f3f4f6;
194 padding: 12px;
195 border-radius: 6px;
196 overflow-x: auto;
197 }
198
199 code {
200 background: #f3f4f6;
201 padding: 0.1em 0.3em;
202 border-radius: 4px;
203 }
204
205 pre code {
206 background: transparent;
207 padding: 0;
208 border-radius: 0;
209 }
210
211 .cmd-label {
212 display: block;
213 font-size: 0.82rem;
214 font-weight: 600;
215 color: #6b7280;
216 margin-bottom: 4px;
217 letter-spacing: 0.02em;
218 }
219
220 hr {
221 border: 0;
222 border-top: 1px solid var(--vit-green);
223 margin: 1.5em 0;
224 }
225
226 footer {
227 margin-top: 36px;
228 padding-top: 16px;
229 border-top: 1px solid #e5e7eb;
230 font-size: 0.9rem;
231 color: #6b7280;
232 }
233
234 footer a {
235 color: var(--vit-green-deep);
236 }
237
238 @media (max-width: 600px) {
239 .nav-toggle {
240 display: block;
241 }
242
243 .header-bar {
244 flex-wrap: wrap;
245 }
246
247 .header-bar > nav {
248 display: none;
249 width: 100%;
250 flex-direction: column;
251 gap: 8px;
252 padding-top: 12px;
253 }
254
255 .header-bar > nav.open {
256 display: flex;
257 }
258 }
259 </style>
260</head>
261<body>
262 <div class="container">
263 <header>
264 <div class="header-bar">
265 <h1><a href="/" aria-label="vit" id="vit-mark">
266 <svg viewBox="3.75 3 49 25.75" xmlns="http://www.w3.org/2000/svg" height="24" aria-hidden="true">
267 <circle cx="16" cy="6" r="3" fill="#06D6A0"/>
268 <path d="M5.5 11 L16 27 L26.5 11" stroke="#06D6A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
269 <circle cx="33.5" cy="6" r="3" fill="#06D6A0"/>
270 <line x1="33.5" y1="12.5" x2="33.5" y2="27" stroke="#06D6A0" stroke-width="3.5" stroke-linecap="round"/>
271 <line x1="45" y1="7" x2="45" y2="27" stroke="#06D6A0" stroke-width="3.5" stroke-linecap="round"/>
272 <line x1="39" y1="12.5" x2="51" y2="12.5" stroke="#06D6A0" stroke-width="3.5" stroke-linecap="round"/>
273 </svg><span class="ality">ality</span>
274 </a></h1>
275 <button class="nav-toggle" aria-label="Menu" aria-expanded="false">☰</button>
276 <nav>
277 <a href="/">home</a>
278 <a href="/start/" class="active">start</a>
279 <a href="/doctrine/">doctrine</a>
280 <a href="https://explore.v-it.org">explore</a>
281 <a href="https://github.com/solpbc/vit">source</a>
282 </nav>
283 </div>
284 <p class="tagline">open source is social</p>
285 </header>
286
287 <main>
288 <h1>get started</h1>
289<p>vit is a collaboration tool for you and your coding agent. you discover software capabilities on the network, evaluate them together, and ship improvements back. set aside about 15 minutes for your first run.</p>
290
291<h2>what you need</h2>
292<ul>
293<li><strong><a href="https://nodejs.org">Node.js</a> 20+</strong> and <strong>git</strong></li>
294<li><strong>a <a href="https://bsky.app">Bluesky</a> account</strong> — vit publishes to your identity on the <a href="https://atproto.com">AT Protocol</a></li>
295<li><strong>a coding agent</strong> — <a href="https://claude.ai/code">Claude Code</a>, <a href="https://github.com/openai/codex">Codex CLI</a>, or <a href="https://github.com/google-gemini/gemini-cli">Gemini CLI</a></li>
296</ul>
297
298<hr>
299
300<h2>1. install</h2>
301<span class="cmd-label">you run this (terminal)</span>
302<pre><code>npm install -g vit</code></pre>
303<p>installing vit auto-installs the agent skill so your coding agent knows how to use vit. you can also try vit without installing globally — just use <code>npx vit</code> instead.</p>
304
305<h2>2. log in</h2>
306<span class="cmd-label">you run this (terminal)</span>
307<pre><code>vit login your-handle.bsky.social</code></pre>
308<p>this opens your browser for Bluesky authorization. after you approve, vit saves your session locally.</p>
309
310<h2>3. follow some publishers</h2>
311<span class="cmd-label">you run this (terminal)</span>
312<pre><code>vit follow jeremie.com</code></pre>
313<p>following controls whose capabilities show up when you skim. start with a few active publishers:</p>
314<ul>
315<li><code>jeremie.com</code> — vit's creator, ships capabilities and skills regularly</li>
316</ul>
317<p>use <code>vit scan</code> to discover more publishers — it replays recent network activity and shows who's shipping.</p>
318
319<hr>
320
321<h2>4. open your agent</h2>
322<p>open your coding agent (Claude Code, Codex, Gemini CLI). the vit skill was installed automatically, so your agent already knows how to use every vit command.</p>
323
324<h2>5. initialize your project</h2>
325<span class="cmd-label">your agent runs this (inside Claude Code / Codex / Gemini CLI)</span>
326<pre><code>vit init</code></pre>
327<p>this creates a <code>.vit/</code> directory in your repo — your project's identity on the network (called a “beacon”). other builders can now discover your project.</p>
328
329<h2>6. skim the network</h2>
330<span class="cmd-label">your agent runs this (inside Claude Code / Codex / Gemini CLI)</span>
331<pre><code>vit skim</code></pre>
332<p>your agent browses capabilities from people you follow, filtered to your project. this is how you discover what others have built that might be useful.</p>
333
334<hr>
335
336<h2>the loop</h2>
337<img src="/vit-social-loop.svg" alt="The vit social loop: skim, vet, remix, ship" style="max-width:100%;height:auto;display:block;margin:1em 0">
338
339<p>vit has four core verbs:</p>
340<ul>
341<li><strong>skim</strong> — browse capabilities on the network</li>
342<li><strong>vet</strong> — evaluate a capability in a sandbox before trusting it</li>
343<li><strong>remix</strong> — adapt a vetted capability into your codebase</li>
344<li><strong>ship</strong> — publish a new capability back to the network</li>
345</ul>
346
347<p>you and your agent work together through this loop. your agent skims and finds something interesting. you vet it — reviewing the approach in a sandbox. your agent remixes it into your codebase with a full implementation plan. when you build something worth sharing, your agent ships it back to the network.</p>
348
349<h3>who does what</h3>
350<p>vit is a human+agent collaboration tool. some commands are for you, some are for your agent:</p>
351
352<p><strong>you run these</strong> (terminal):<br>
353<code>login</code>, <code>vet</code> — authentication and trust decisions stay with you.</p>
354
355<p><strong>your agent runs these</strong> (inside your coding agent):<br>
356<code>init</code>, <code>skim</code>, <code>remix</code>, <code>ship</code>, <code>follow</code>, <code>learn</code> — discovery, integration, and publishing are agent tasks.</p>
357
358<hr>
359
360<h2>skills</h2>
361<p>capabilities are project-scoped improvements. <strong>skills</strong> are different — they're reusable agent abilities that work across any project. think npm for AI agent skills.</p>
362
363<span class="cmd-label">your agent runs this</span>
364<pre><code>vit skim --skills</code></pre>
365<p>browse skills on the network. when you find one you want:</p>
366<span class="cmd-label">you run this (terminal)</span>
367<pre><code>vit vet skill-agent-test-patterns</code></pre>
368<span class="cmd-label">your agent runs this</span>
369<pre><code>vit learn skill-agent-test-patterns</code></pre>
370<p>skills install to <code>.claude/skills/</code> in your project, or <code>~/.claude/skills/</code> with <code>--user</code> for global use. they follow the <a href="https://agentskills.io">Agent Skills</a> open standard.</p>
371
372<hr>
373
374<h2>going deeper</h2>
375<p>once you're comfortable with skim, vet, remix, and ship, there's more to explore:</p>
376<ul>
377<li><strong>vouch</strong> — publicly endorse a capability you trust. vouching stakes your reputation and helps others find quality.</li>
378<li><strong>learn</strong> — install a vetted skill for your agents.</li>
379<li><strong>adopt</strong> — fork an existing project by its beacon and join its network.</li>
380<li><strong>scan</strong> — discover active publishers across the network.</li>
381</ul>
382<p>see <a href="https://github.com/solpbc/vit/blob/main/COMMANDS.md">COMMANDS.md</a> for the full command reference and <a href="https://github.com/solpbc/vit/blob/main/VOCAB.md">VOCAB.md</a> for the complete vocabulary.</p>
383
384<hr>
385
386<h2>learn more</h2>
387<ul>
388<li><a href="/doctrine/">the doctrine</a> — why vit exists and how it works</li>
389<li><a href="https://explore.v-it.org">explore the network</a> — browse live capabilities, skills, and projects</li>
390<li><a href="https://github.com/solpbc/vit/blob/main/CONTRIBUTING.md">contributing</a> — how to contribute to vit itself</li>
391</ul>
392
393<hr>
394<p><em>built in the <a href="https://atproto.com">atmosphere</a> on ATProto. <a href="https://github.com/solpbc/vit">see the source</a>.</em></p>
395
396 </main>
397
398 <footer>
399 part of <a href="https://solpbc.org">sol pbc</a>. created by <a href="https://bsky.app/profile/jeremie.com">Jeremie Miller</a>. vit is a trademark of sol pbc.
400 </footer>
401 </div>
402
403 <script>
404 // Mobile nav toggle
405 document.querySelector('.nav-toggle').addEventListener('click', function() {
406 var nav = this.parentNode.querySelector('nav');
407 var open = nav.classList.toggle('open');
408 this.setAttribute('aria-expanded', open);
409 this.textContent = open ? '\u2715' : '\u2630';
410 });
411
412 // Vitality easter egg — click the vit mark to reveal the full word
413 document.getElementById('vit-mark').addEventListener('click', function(e) {
414 e.preventDefault();
415 this.querySelector('.ality').classList.toggle('show');
416 });
417 </script>
418</body>
419</html>