$npx skillfedfor your agent

vibes

Vibes is a self-contained app generator that creates React web applications powered by TinyBase for reactive, real-time data management. Choose between a browser-based editor with live preview or terminal-driven generation, then deploy your app as a standalone HTML file. Ideal for rapid prototyping, single-page applications, and collaborative tools.

Vibes generates complete React web applications with TinyBase reactive data storage, deployable as single HTML files.

AI-generated summary based on this skill's SKILL.md

★ 134  6 MITupdated by popmechanic

Decision gist · record as of 2026-07-27

Vibes generates complete React web applications with TinyBase reactive data storage, deployable as single HTML files. Vibes is a self-contained app generator that creates React web applications powered by TinyBase for reactive, real-time data management. Choose between a browser-based editor with live preview or terminal-driven generation, then deploy your app as a standalone HTML file. Ideal for rapid prototyping, single-page applications, and collaborative tools.

manual: git clone https://github.com/popmechanic/VibesOS → cp -r VibesOS/skills/vibes ~/.claude/skills/vibes
skills/vibes/SKILL.md · version 276b1b7b

Use it when

  • Yes.
  • Vibes is designed for rapid prototyping and MVP creation without boilerplate code.

Verify before relying

Read SKILL.md below before installing (60 files). Open directory: indexed for reading, not audited.

Same gist for agents: .md · .json

Install

popmechanic/VibesOS/vibes · repository language: HTML

Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How does vibes generate a complete React web application?

Vibes is a self-contained app generator that creates React web applications powered by TinyBase for reactive, real-time data management. It offers minimal setup by letting you choose between a browser-based editor with live preview or terminal-driven generation, then deploys your app as a standalone HTML file with no boilerplate required.

Can vibes build single page applications with real-time data?

Yes. Vibes creates single-page apps with real-time reactive data synchronization using TinyBase as its data store. The browser-based editor provides live preview as you build, and the generated applications support instant data updates across components without manual refresh.

What's the quickest way to build interactive web apps with vibes?

Vibes is designed for rapid prototyping and MVP creation without boilerplate code. Use the browser-based editor for immediate visual feedback, or run terminal commands to scaffold your application. Either approach generates a complete, deployable React app in minutes rather than hours.

How does vibes integrate TinyBase for app scaffolding?

Vibes scaffolds web applications with TinyBase data store integration built-in. TinyBase powers the reactive, real-time data synchronization layer, enabling live updates across your single-page application without additional configuration or setup.

Can I deploy a vibes-generated app to production instantly?

Vibes generates standalone HTML files that are ready to deploy immediately. Your complete React application with TinyBase integration is self-contained, requiring no server or build step—just serve the HTML file to go live.

What license does vibes use?

Vibes is released under the MIT license, allowing free use, modification, and distribution in both personal and commercial projects with minimal restrictions.

SKILL.md

Rendered from the published skill. Quoted content, verbatim.

> Plan mode: If you are planning work, this entire skill is ONE plan step: "Invoke /vibes:vibes". Do not decompose the steps below into separate plan tasks.

Display this ASCII art immediately when starting:

░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░░▒▓███████▓▒░
░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░      ░▒▓█▓▒░
 ░▒▓█▓▒▒▓█▓▒░░▒▓█▓▒░▒▓███████▓▒░░▒▓██████▓▒░  ░▒▓██████▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
  ░▒▓█▓▓█▓▒░ ░▒▓█▓▒░▒▓█▓▒░░▒▓█▓▒░▒▓█▓▒░             ░▒▓█▓▒░
   ░▒▓██▓▒░  ░▒▓█▓▒░▒▓███████▓▒░░▒▓████████▓▒░▒▓███████▓▒░

Quick Navigation

  • [Terminal or

(truncated - see the full file via the links below)

File tree — 15 files
skills/vibes/SKILL.md
skills/vibes/animations/3d-ampersand.txt
skills/vibes/animations/3d-carousel.txt
skills/vibes/animations/3d-cuboid-gallery.txt
skills/vibes/animations/3d-flip-cards.txt
skills/vibes/animations/3d-layers.txt
skills/vibes/animations/3d-parallax.txt
skills/vibes/animations/3d-perspective-grid.txt
skills/vibes/animations/anim-clip-path.txt
skills/vibes/animations/anim-gradient-morph.txt
skills/vibes/animations/anim-rainbow-border.txt
skills/vibes/animations/anim-scroll-reveal.txt
skills/vibes/animations/anim-staggered.txt
skills/vibes/animations/anim-typewriter.txt
skills/vibes/animations/catalog.txt

Let your AI agent find skills like this

Example. Real query, live index.

You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.

wish › “Generate a complete React web application with minimal setup”

Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →

Related skills

launch
by popmechanic · popmechanic/VibesOS

Launch is a self-contained SaaS pipeline that generates a complete app, adds authentication and billing, and deploys it live—all in one invocation. Choose between a visual editor with live preview or terminal-based generation, then let the skill handle setup, configuration, and deployment automatically.

MITupdated Jul 2026
★ 134repo stars
riff
by popmechanic · popmechanic/VibesOS

Riff creates multiple app variations simultaneously, each representing a different interpretation rather than just visual tweaks. Gather your requirements once, then generate and rank all variations in parallel to find the strongest concept.

MITupdated Jul 2026
★ 134repo stars
vibes-brainstorm
by popmechanic · popmechanic/VibesOS

Vibes Brainstorm walks you through friendly, non-technical questions to clarify your app idea before building begins. It asks about features, sharing, and how your app works—one question at a time—then produces a brief ready for code generation.

MITupdated Jul 2026
★ 134repo stars
autoresearch
by popmechanic · popmechanic/VibesOS

Autoresearch automates large-scale SKILL.md improvement by spawning multiple variants per generation, evaluating each through a programmatic harness without browser overhead, and scoring with triple-run averaging to identify the strongest performer. The engine iterates autonomously, committing improvements to git and halting when scores plateau or oscillate.

MITupdated Jul 2026
★ 134repo stars
sell
by popmechanic · popmechanic/VibesOS

Sell transforms an existing Vibes app into a production-ready SaaS platform with multi-tenant architecture, automatic Pocket ID authentication, and subscription controls. The skill generates a unified HTML file that routes traffic by subdomain—landing page, tenant apps, and admin dashboard all from a single deployment.

MITupdated Jul 2026
★ 134repo stars
design
by popmechanic · popmechanic/VibesOS

Design takes a complete HTML file and mechanically converts it into a React component backed by TinyBase, preserving structure and CSS while replacing static content with reactive data bindings. The transformation follows deterministic rules—converting class attributes to className, inline styles to objects, and vanilla JavaScript to React hooks—rather than reinterpreting the design. Use this skill when you have a mockup or prototype that needs to become a functional Vibes app.

MITupdated Jul 2026
★ 134repo stars

More skills factory (MIT) · cloudflare (MIT)

Tags
app-scaffoldingreactive-uidata-bindingrapid-prototypingfull-stack-generationreal-time-synccomponent-frameworkbrowser-native