initial claude code plugin project

[popmechanic]

Marcus' initial Claude Code plugin project.

[netlify]

✅ Deploy Preview for fireproof-ai-builder ready!

Name	Link
🔨 Latest commit	339a4c4
🔍 Latest deploy log	https://app.netlify.com/projects/fireproof-ai-builder/deploys/68fc1a0a7a5df500084657d4
😎 Deploy Preview	https://deploy-preview-491--fireproof-ai-builder.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 56 (🟢 up 1 from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Use updated selected card when saving trick

After a card is clicked, handleCardClick schedules performMagic with setTimeout. Because performMagic was defined in the prior render where selectedCard was null, the timer executes with stale state and this block dereferences selectedCard.id and magicCard.id, throwing before the trick completes or the result is recorded. Pass the chosen card into performMagic (or read from the timeout callback) so the function operates on the latest state.

Useful? React with 👍 / 👎.

[charliecreates]

• A runtime-breaking import typo in fireproof-guidance.txt (use-firproof → use-fireproof) will mislead users and fail at runtime.
• The month index in the date-prefix example is inconsistent with getMonth() semantics, likely causing copy/paste bugs.
• In version-1/index.html, using array indices as React keys should be replaced with stable IDs to avoid reconciliation issues.
• The viewer relies solely on keyboard events; when the iframe is focused, navigation can fail—add visible buttons as a fallback.

Summary of changes

• Added a Claude Code plugin scaffold for generating Fireproof-powered apps:
  • New plugin manifest at cli/vibes/.claude-plugin/plugin.json.
  • Command instruction docs: cli/vibes/commands/vibes.md for single generation and cli/vibes/commands/vibes-select.md for multi-version parallel generation and viewer creation.
  • Fireproof guidance reference at cli/vibes/resources/fireproof-guidance.txt.
• Included a concrete example generation output under cli/vibes/vibes-output/20251022-094307-magic-trick/ with three distinct versions and a comparison viewer.html.
• Each generated HTML app follows the specified single-file structure with React, Tailwind, Fireproof (via esm.sh), and Babel-in-browser.

[charliecreates]

The import path has a typo: use-firproof will fail to resolve at runtime. This breaks the guidance example and will mislead consumers trying to copy/paste. It should be use-fireproof.

Suggestion

Replace the incorrect import path with the correct use-fireproof module name.

- import { fireproof } from "use-firproof";
+ import { fireproof } from "use-fireproof";

If you want, I can push a commit with this fix. Reply with "@CharlieHelps yes please" and I'll add it.

[charliecreates]

The example claims the prefix query loads "everything from November 2024," but Date.getMonth() is zero-based. Using 11 in the prefix corresponds to December. This mismatch will confuse readers and produce unexpected results if copied verbatim.

Suggestion

Align the example with JavaScript's zero-based months. Either adjust the comment to December or use 10 for November. For clarity, you can also normalize month to 1–12 in the index key.

Option A (keep zero-based, correct the prefix to November):

- // ...loading everything from November 2024:
+ // ...loading everything from November 2024 (getMonth() is zero-based):
   const queryResult = useLiveQuery(
     (doc) => [doc.date.getFullYear(), doc.date.getMonth(), doc.date.getDate()],
-    { prefix: [2024, 11] }
+    { prefix: [2024, 10] }
   );

Option B (normalize to 1–12 months):

- (doc) => [doc.date.getFullYear(), doc.date.getMonth(), doc.date.getDate()],
+ (doc) => [doc.date.getFullYear(), doc.date.getMonth() + 1, doc.date.getDate()],
   { prefix: [2024, 11] }

Reply with "@CharlieHelps yes please" if you want me to apply Option A across the file, or specify Option B and I’ll commit that instead.

[charliecreates]

Using the array index as a React key can lead to unnecessary re-renders and subtle UI bugs if the list changes. You already have a stable card.id—use that instead.

Suggestion

Switch to a stable key derived from the data:

- {displayedCards.map((card, index) => (
-   <Card
-     key={index}
+ {displayedCards.map((card) => (
+   <Card
+     key={card.id}
      card={card}
      onClick={() => handleCardClick(card)}
      isRevealed={false}
      isSelected={false}
      isFlipping={false}
    />
 ))}

Reply with "@CharlieHelps yes please" and I’ll update both occurrences in this file.

[charliecreates]

Keyboard navigation may not work when the iframe has focus because key events won’t bubble to the parent document. Consider adding visible Prev/Next buttons to the header and wiring them to the same logic so users can navigate reliably regardless of focus.

Suggestion

Add explicit navigation buttons and hook them up to updateVersion for better usability when the iframe has focus.

   <div class="fixed top-0 left-0 right-0 bg-gradient-to-r from-purple-600 to-blue-600 text-white p-4 shadow-lg z-10">
     <div class="max-w-7xl mx-auto flex items-center justify-between">
       <div>
         <h1 class="text-2xl font-bold">Vibes Version Selector</h1>
         <p class="text-sm opacity-90">Use ← → arrow keys to navigate</p>
       </div>
       <div class="text-right">
         <p class="text-3xl font-bold" id="version-indicator">Version 1 of 3</p>
         <p class="text-sm opacity-90">Press 'S' to select current version</p>
+        <div class="mt-2 flex gap-2 justify-end">
+          <button id="prev-btn" class="px-3 py-1 bg-white/10 rounded hover:bg-white/20">← Prev</button>
+          <button id="next-btn" class="px-3 py-1 bg-white/10 rounded hover:bg-white/20">Next →</button>
+        </div>
       </div>
     </div>
   </div>
@@
   <script>
     const totalVersions = 3;
     let currentVersion = 1;
@@
     document.addEventListener('keydown', (e) => {
       if (e.key === 'ArrowLeft') {
         updateVersion(currentVersion - 1);
       } else if (e.key === 'ArrowRight') {
         updateVersion(currentVersion + 1);
       } else if (e.key === 's' || e.key === 'S') {
         if (confirm(`Select Version ${currentVersion} as the final version?`)) {
           alert(`Version ${currentVersion} selected! Return to Claude Code to complete the selection process.`);
         }
       }
     });
+
+    // Click navigation for when the iframe has focus
+    document.getElementById('prev-btn').addEventListener('click', () => updateVersion(currentVersion - 1));
+    document.getElementById('next-btn').addEventListener('click', () => updateVersion(currentVersion + 1));
   </script>

Reply with "@CharlieHelps yes please" and I’ll add these buttons and hooks.

[charliecreates]

The viewer’s content area uses pt-24 h-screen, which results in the iframe being shorter than the viewport by the header’s height (the bottom gets cut off due to overflow: hidden on body). Consider sizing the content to calc(100vh - 6rem) (Tailwind h-24 ~ 6rem) so the iframe fully fits beneath the fixed header.

Suggestion

Adjust the container height to account for the fixed header:

<div class="pt-24" style="height: calc(100vh - 6rem);">
  <iframe id="viewer" src="./version-1/index.html" class="w-full h-full"></iframe>
</div>

Alternatively, use a fixed-positioned iframe with top offset. I can add this change for you—reply with "@CharlieHelps yes please".

[charliecreates]

These are build artifacts/generated outputs being committed into the repo. This usually increases repository size and churn, and makes reviews noisy. It’s better to exclude cli/vibes/vibes-output/ from version control and generate them on demand.

Suggestion

Add a .gitignore entry and consider moving sample outputs to a documented, locally generated path:

cli/vibes/vibes-output/

If you want, I can add a top-level .gitignore update and a README note—reply with "@CharlieHelps yes please".

[charliecreates]

Edge case: if the user taps contradictory answers, the binary search bounds can cross (newMin > newMax), which yields invalid guesses. Handling this gracefully improves robustness (e.g., detect contradiction and reset or reveal an error state).

Suggestion

Add a guard after updating newMin/newMax to handle impossible ranges:

if (newMin > newMax) {
  // Optional: save a session with an error flag
  mergeSession({
    questions: [...currentSession.questions, { question: `Inconsistent answers at ${guess}`, answer: 'contradiction' }],
    finalGuess: null,
  });
  setGameState('intro'); // or show a friendly error/restart prompt
  return;
}

I can wire this in and keep the UI consistent—reply with "@CharlieHelps yes please".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Fix plugin source path in marketplace manifest

The marketplace entry points source to ./vibes, but from the directory containing this file (cli/.claude-plugin) that path resolves to cli/.claude-plugin/vibes, which does not exist. As written the marketplace cannot locate the actual plugin directory (cli/vibes) so the plugin will fail to register. Update the path to be relative to the marketplace file (e.g. ../vibes) or otherwise ensure it resolves to the real plugin root.

Useful? React with 👍 / 👎.

[charliecreates]

• The cached Fireproof docs in plugin-data.json contain a bad import path (use-firproof) and a month-index example that’s inconsistent with getMonth(), both of which can leak into generated code.
• The image-gen docs reference use-vibes, but templates don’t include it—this risks broken imports in generated apps.
• Documentation inconsistencies in cli/vibes/README.md (stray claude block and references to use-vibes) will confuse users.
• Minor but worthwhile fixes: make the style-name regex more robust, avoid disabling user zoom in the HTML template, and consider committing a lockfile for reproducible plugin builds.

Additional notes (2)

• Readability | cli/vibes/README.md:24-26
  There’s an odd standalone code block containing just claude under “Add the marketplace,” which looks like a stray artifact and will confuse users following the setup steps.

• Maintainability | cli/.gitignore:16-17
  Ignoring lockfiles (package-lock.json, yarn.lock) in the CLI workspace reduces build reproducibility and can make debugging difficult. Even if the generated apps don’t include a lockfile, the plugin’s own workspace benefits from deterministic installs.

Summary of changes

• Added a complete Claude Code marketplace plugin under cli/ for generating Vite-based React apps with Fireproof and callAI.
• Introduced plugin manifests (cli/.claude-plugin/marketplace.json, cli/vibes/.claude-plugin/plugin.json) and command docs (/vibes, /vibes-update).
• Implemented core generation logic as a Skill with Vite project templates (React 19, Tailwind 3, use-fireproof, call-ai).
• Added a build script to compile cached prompt/style/library docs into cli/vibes/plugin-data.json.
• Expanded documentation: development guide, quick start, and README updates.
• Updated root .gitignore to exclude CLI outputs and local plugin settings; added cli/.gitignore for the CLI workspace.

[charliecreates]

The Fireproof docs embedded in plugin-data.json contain a runtime-breaking import typo (use-firproof → use-fireproof). Because this JSON seeds the augmented prompt, it can cause generated code to import a non-existent module and fail to build/run.

Suggestion

Replace the incorrect import in the libraries.fireproof string from use-firproof to use-fireproof. I can update cli/vibes/plugin-data.json accordingly. Reply with "@CharlieHelps yes please" and I’ll add a commit that fixes this content.

[charliecreates]

In the Fireproof docs, the array index/prefix example claims to load "everything from November 2024" while using getMonth() directly with 11. Since Date.getMonth() is zero-based, 11 corresponds to December. This inconsistency will mislead users and can propagate into incorrect generated code.

Suggestion

Adjust the example in the libraries.fireproof string either by clarifying zero-based months and using { prefix: [2024, 10] } for November, or by normalizing with getMonth() + 1 and keeping { prefix: [2024, 11] }. I can apply the zero-based fix across the embedded example. Reply with "@CharlieHelps yes please" if you want me to do that.

[charliecreates]

The image-gen library docs reference ImgGen from use-vibes, but generated projects do not include use-vibes (your templates depend on use-fireproof and call-ai only). Including these docs in the augmentation can cause the model to emit imports that won’t resolve, breaking builds.

Suggestion

Either (a) remove or gate the image-gen docs from plugin-data.json until use-vibes is added as a dependency in templates, or (b) add use-vibes (and its published, installable dependencies) to templates/package.json.template. Given you explicitly moved away from use-vibes, I recommend removing/gating image-gen from prompt data. I can update plugin-data.json to omit image-gen. Reply with "@CharlieHelps yes please" and I’ll commit that change.

[charliecreates]

This section says the generated code uses use-vibes (and that it’s in package.json), but your templates clearly depend on use-fireproof and call-ai. This inconsistency will send users down the wrong path when troubleshooting.

Suggestion

Update the troubleshooting note to refer to use-fireproof (and call-ai) rather than use-vibes. I can revise the wording to: “The generated code uses: react, use-fireproof, call-ai. These are automatically included in package.json.” Reply with "@CharlieHelps yes please" and I’ll commit the doc fix.

[charliecreates]

The instruction “IMPORTANT: You are working in one JavaScript file” contradicts the Vite project structure you generate (multiple files). It should clarify that the main app logic lives in src/App.jsx, not that the entire project is a single file.

Suggestion

Reword this to something like: “IMPORTANT: Keep all app logic in a single component file, src/App.jsx (don’t create extra files). Use Tailwind classes for styling.” I can update this paragraph to avoid confusing the Skill execution. Reply with "@CharlieHelps yes please" and I’ll apply the change.

[charliecreates]

The regex used to extract DEFAULT_STYLE_NAME from style-prompts.ts only matches double quotes and may miss single-quoted values or formatting changes, leading to silent fallback. This is fragile for a key setting.

Suggestion

Use a more robust regex that supports both single and double quotes and optional whitespace, e.g.: const defaultMatch = content.match(/DEFAULT_STYLE_NAME\s*=\s*['"]([^'"]+)['"]/);. I can apply this change. Reply with "@CharlieHelps yes please" and I’ll commit it.

[charliecreates]

The build script tolerates missing library docs by logging warnings and still emitting output. That risks shipping partially populated plugin-data.json without failing CI. It’s better to validate required inputs and exit non‑zero if essential docs are missing.

Suggestion

Add a validation step before writing the output; fail fast if expected libraries are missing. For example:

   const libraries = extractLibraryDocs();
   const coreGuidelines = generateCoreGuidelines();
+
+  // Validate required libraries were loaded (fail fast in CI)
+  const requiredLibs = ["fireproof", "callai"]; // extend if needed
+  const missing = requiredLibs.filter((k) => !libraries[k] || !libraries[k].length);
+  if (missing.length) {
+    console.error(`\n✖ Missing required library docs: ${missing.join(", ")}`);
+    process.exit(1);
+  }

Reply with "@CharlieHelps yes please" and I’ll add this guard.

[charliecreates]

License metadata is inconsistent: plugin.json declares MIT while cli/vibes/package.json declares Apache-2.0. This can cause compliance and distribution confusion.

Suggestion

Pick a single license and apply it consistently. For example, align the cli/vibes/package.json to MIT to match the plugin manifest:

In cli/vibes/package.json:

- "license": "Apache-2.0"
+ "license": "MIT"

Reply with "@CharlieHelps yes please" and I’ll make this change.

[charliecreates]

This inventory still lists use-vibes as a dependency, which no longer matches the templates (now use-fireproof + call-ai).

Suggestion

Correct the dependency note to reflect the current stack:

- → Dependencies: React 19, use-vibes 0.14.6, Vite 7.1.9
+ → Dependencies: React 19, use-fireproof ^0.23.15, call-ai ^0.15.13, Vite 7.1.9

Reply with "@CharlieHelps yes please" and I’ll update this file.

[charliecreates]

The verification checklist contradicts the later decision to avoid use-vibes. It says "Imports from use-vibes (not use-fireproof)" but you’ve documented switching to use-fireproof + call-ai. This inconsistency will lead to incorrect review outcomes.

Suggestion

Update the checklist to match the adopted dependencies:

- Check that `src/App.jsx`:
- - Imports from `use-vibes` (not `use-fireproof`)
+ Check that `src/App.jsx`:
+ - Imports from `use-fireproof` and `call-ai`

Reply with "@CharlieHelps yes please" and I’ll apply this fix.

[mabels]

move to into the to .gitignore ---- and then pls remove

[mabels]

never reference monorepo things like use-vibes with there real version ---- use workspace:*

[mabels]

License --- APACHE

[mabels]

pls make the u llm less noisy --- this stuff it mostly sense less to review but it cost time.

[mabels]

add to pnpm-workspace and use the core-cli task

i would think it should named @vibes.diy/cli-vibes --- follow the pattern we use from the directory name.

and if you want to use it in claude it should be public and published

[mabels]

this is mostly un maintainable --- due to the embedded code --- ask your llm to write a tool which generate this file from multiple source files

[mabels]

NEVER any JS ---- and in addition we are a ESM not COMMON JS shop.

Use tsx as runtime for tools.

[mabels]

you are in the monorepo so fetch the stuff directly --- with package depenendcy

[mabels]

make the version dynamic and fetch them from you package package.json ---- than the dependabot infra will keep them update --- we don't want to use use-fireproof directly any more --- it should fetched from use-vibes.