@bottomlessmargaritas/doc-bar

You built something cool. Maybe you prompted your way through it, maybe you followed a tutorial, maybe you just kept asking AI until it worked. It works. You shipped it.

But you don't really know how it works — what all those files do, why there's a tsconfig.json, what "server components" means, or what half the things in your package.json actually are.

This tool fixes that.

Install it, add one line to your layout, and you get an interactive learning panel built right into your app. It explains your project to you — what you built, what technologies you're using, how they fit together, a quiz to test yourself, and a code review that shows you what to fix.

Everything is generated by AI from your source code. You copy one prompt, paste it into ChatGPT or Claude, and it writes the docs. Nothing leaves your machine. No accounts. No API keys. No data collection.

What You Get

| Tab | What it answers | |-----|----------------| | Summary | What did I build? | | Stack Guide | What are all these technologies, and what do they do? | | Technical Summary | How is this thing architected? | | Technical Overview | How does every piece work? (with links to learn more) | | Quiz | Do I actually understand my own project? | | Review | What should I fix? (with severity badges and how-to-fix guides) |

Install

npm install @bottomlessmargaritas/doc-bar

That's it. The package automatically creates the docs directory in your public/ folder.

Add to Your App

React / Next.js

'use client'; // Next.js only
import AppDocBar from '@bottomlessmargaritas/doc-bar';
import '@bottomlessmargaritas/doc-bar/styles.css';

export default function DocBar() {
  return <AppDocBar appName="My App" />;
}

Drop that component in your layout. A bar appears at the bottom of your page.

Other Frameworks

| Framework | Import | |-----------|--------| | Vue | from '@bottomlessmargaritas/doc-bar/vue' | | Svelte | from '@bottomlessmargaritas/doc-bar/svelte' | | SolidJS | from '@bottomlessmargaritas/doc-bar/solid' | | Preact | from '@bottomlessmargaritas/doc-bar/preact' | | Angular | from '@bottomlessmargaritas/doc-bar/angular' | | Web Component | import '@bottomlessmargaritas/doc-bar/web-component' then <app-doc-bar> | | Vanilla JS | from '@bottomlessmargaritas/doc-bar/vanilla' |

All require: import '@bottomlessmargaritas/doc-bar/styles.css'

Generate Your Docs

When you first load your app, the bar shows a "Generate Documents" button. Click it, copy the prompt, paste it into your AI tool, and save the files it generates. That's the whole setup.

The prompt tells your AI to read your source code and write 6 documents that explain your project. The AI runs on your machine (or in your browser tab) — we never see your code.

Props

| Prop | Type | Default | What it does | |------|------|---------|-------------| | appName | string | '' | Your app's name, shown in the bar | | position | 'top' \| 'bottom' | 'bottom' | Which edge of the screen | | fixed | boolean | true | Stick to viewport (hover to reveal) | | theme | 'dark' \| 'light' | 'dark' | Color scheme | | basePath | string | /.bottomlessmargaritas/application-documentation | Where the doc files live |

The Stack Guide

This is the doc most vibe coders open first. For every technology in your project, it explains:

• What it is in one plain sentence
• What it does in your project specifically
• Why it was chosen over alternatives
• Where to learn more — one beginner-friendly link

You see next.config.ts and wonder what Next.js is? The Stack Guide answers that.

The Quiz

An interactive quiz about your own project. Questions are ordered easy to hard, with a progress bar, score tracking, and a results screen. It's not a test you can fail — it's a way to find out what you know and what you don't.

The Review

A friendly code review with severity badges (CRITICAL, HIGH, MEDIUM, LOW, INFO) rendered as colored pills. Each finding explains what's wrong, shows you how to fix it, and links to resources to learn why it matters.

Who This Is For

• Vibe coders who built something with AI and want to understand how it works
• Tutorial followers who adapted someone else's code and want to make it their own
• Junior developers onboarding onto a new codebase
• Hobbyists who are curious about the technologies in their projects
• Anyone who's ever looked at their own code and thought "what does this do?"

Philosophy

Read our MANIFESTO.md — or the short version:

Vibe coding is valid. You built something that works. Now understand it — not because someone says you have to, but because it makes everything easier. Your codebase is a classroom. This tool opens the door.

Architecture

TypeScript core with thin framework wrappers. Single dependency: DOMPurify.

src/core/
├── DocBar.ts           # Main class — nav, modals, doc checking
├── QuizRenderer.ts     # Quiz state machine (start → questions → results)
├── PromptUI.ts         # Generate/regenerate prompt modals
├── dom.ts              # DOM helpers
├── markdown.ts         # Markdown → HTML with severity badges
├── parseQuiz.ts        # Quiz parser with difficulty sorting
├── prompts.ts          # Embedded generation prompts
└── constants.ts        # Shared defaults

License

MIT