Skip to content

README.md

Latest commit

 

History

History
177 lines (130 loc) · 7.93 KB

README.md

File metadata and controls

177 lines (130 loc) · 7.93 KB
Raw

Vib Tools — Dark-First Open-Source Developer Ecosystem 🚀

License: MIT GitHub Stars React 19 TypeScript Tailwind CSS v4 Brand Spec Compliant

Deploy to your account. Own your infrastructure. Open source by default. No lock-in.

Vib Tools is a dark-first, developer-first, and open-source-first technology ecosystem. Designed for high-performance CLI workflows, Git-native deployment orchestrators, and local-first privacy edge proxies.

📌 Recommended GitHub Repository Topics & Search Keywords

To maximize repository discoverability on GitHub search and search engines, add these GitHub Repository Topics under your repository settings (About ⚙️ -> Topics):

vibtools • ygit • developer-tools • open-source • dark-theme • cli • react19 • typescript • tailwindcss • vite • cloud-native • git-native • no-lock-in • coming-soon-page • landing-page • developer-hub • privacy-first • cloudflare-workers • waitlist-template • free-template • starter-kit • mit-license

🔍 Search Engine Keywords Index

Target Search Terms: free coming soon template, developer landing page starter, react 19 coming soon page, tailwind css v4 landing page, open source developer waitlist template, interactive bash terminal template, github tools landing page template, mit licensed dark mode website.

✨ Features & Highlights

  • ⚡ Dark-First Design System: Engineered strictly around the official Vib Tools Brand Spec v1.0 (#0D1117 canvas, #161B22 cards, #38BDF8 cyan highlights, #2563EB electric blue CTA).
  • 💻 Interactive Bash Terminal Shell: Live interactive CLI emulator in the browser with real commands (help, status, ecosystem, ygit, specs, subscribe, star, version, clear).
  • 🔒 Privacy & Full Infrastructure Ownership: Built to promote YGIT engine deployment to user-owned Cloudflare or AWS accounts without SaaS vendor lock-in.
  • 🎨 Live Brand Specification Inspector: Built-in modal inspector to audit color tokens, accessibility contrast ratios (WCAG Pass), typography scale (Inter & JetBrains Mono), and AI handoff prompts.
  • 🚀 Early Access Waitlist Engine: Interactive signup form assigning custom reserved developer tokens (VIB-DEV-XXXX) backed by local persistence.
  • 🧭 Ecosystem Roadmap: Transparent milestone timeline detailing upcoming releases for Vib CLI, YGIT Engine, and Edge Privacy Sync.

🛠️ Ecosystem Repositories

Repository Description Status Tech Stack
vibtools/ygit-engine Git-native deployment orchestrator with zero lock-in In Development Rust, Cloudflare Workers, TypeScript
vibtools/vib-cli High-performance developer terminal CLI Alpha Node.js, Go, JetBrains Mono
vibtools/vib-hub Ecosystem portal & entry point (vibtools.github.io) In Development React 19, Vite, Tailwind CSS v4
vibtools/vib-cloud-proxy Local-first zero-knowledge privacy proxy Alpha TypeScript, mTLS, AES-256-GCM

🎨 Brand Specification & Design System

Vib Tools adheres strictly to the Vib Tools — Brand Identity & UI Design Specification (v1.0).

Color Tokens

:root {
  /* Master Brand */
  --vib-logo-blue: #0053FC;
  --vib-logo-cyan: #00BFFD;
  --vib-logo-gradient: linear-gradient(135deg, #0053FC 0%, #00BFFD 100%);

  /* Interface Accents */
  --vib-primary: #2563EB;     /* Primary button fill & active states */
  --vib-secondary: #38BDF8;   /* Links, focus rings, technical highlights */

  /* Backgrounds & Surfaces */
  --vib-background: #0D1117;  /* Main canvas background */
  --vib-surface: #161B22;     /* Cards, modals, code blocks */
  --vib-border: #30363D;      /* 1px card borders & input outlines */

  /* Typography */
  --vib-text-primary: #F8FAFC;/* Main headings & primary body */
  --vib-text-secondary: #8B949E; /* Metadata & supporting copy */
}

Visual Ratio Rule

  • 70–80%: Dark backgrounds & surfaces (#0D1117, #161B22)
  • 15–20%: White & slate typography (#F8FAFC, #8B949E)
  • 5–10%: Electric Blue & Cyan accents (#2563EB, #38BDF8)

⚡ Quick Start & Installation

Prerequisites

  • Node.js: v18.0.0 or higher
  • npm or pnpm / yarn

1. Clone the repository

git clone https://github.com/vibtools/vibtools.git
cd vibtools

2. Install dependencies

npm install

3. Run the development server

npm run dev

Open http://localhost:3000 in your browser to view the live application.

4. Build for production

npm run build

🖥️ Interactive CLI Shell Commands

You can run the following commands directly inside the embedded terminal:

$ help               # List all available commands
$ status             # Check ecosystem engine & node health
$ ecosystem          # List open-source Vib Tools repositories
$ ygit               # Inspect YGIT engine configuration & principles
$ subscribe <email>  # Join early access waitlist & receive token
$ specs              # Open the Brand Identity Inspector modal
$ star               # Open GitHub repository to star
$ clear              # Clear terminal output buffer

📁 Directory Structure

├── index.html              # HTML entry point with Inter & JetBrains Mono Google Fonts
├── metadata.json           # Application metadata & frame permissions
├── package.json            # Node.js dependencies & dev scripts
├── src/
│   ├── App.tsx             # Main layout wrapper & waitlist state manager
│   ├── index.css           # Tailwind v4 CSS imports & Vib Tools CSS variable tokens
│   ├── main.tsx            # React 19 root entry
│   ├── types.ts            # TypeScript interfaces for ecosystem & brand specs
│   └── components/
│       ├── BrandSpecModal.tsx    # Live Brand Spec v1.0 token inspector modal
│       ├── EcosystemGrid.tsx     # Open source products & YGIT architecture spotlight
│       ├── Footer.tsx            # Deep dark footer with specification links
│       ├── HeroSection.tsx       # Headline, waitlist signup form, command box
│       ├── InteractiveTerminal.tsx # Bash shell CLI emulator
│       ├── Navbar.tsx            # Navigation header with version badge & GitHub stars
│       ├── RoadmapSection.tsx    # Quarterly release roadmap timeline
│       └── VibLogo.tsx           # Official master V symbol with canonical gradient

🤝 Contributing

We welcome contributions from developers worldwide!

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Please ensure your changes adhere to the Vib Tools Brand Specification v1.0 (dark-first, no gaudy gradients, WCAG contrast compliance).

📄 License

Distributed under the MIT License. See LICENSE for details.

Vib Tools Open Source Project • Built for developers who demand complete infrastructure ownership.