initial claude code plugin project #491
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| { | ||
| "name": "vibes-marketplace", | ||
| "owner": { | ||
| "name": "Vibes.diy Team", | ||
| "email": "hello@vibes.diy" | ||
| }, | ||
| "metadata": { | ||
| "description": "Claude Code plugins for Fireproof and Vibes.diy development", | ||
| "version": "1.0.0" | ||
| }, | ||
| "plugins": [ | ||
| { | ||
| "name": "vibes", | ||
| "source": "./vibes", | ||
| "description": "Generate Fireproof and Vibes.diy codebases with AI-powered component generation", | ||
| "version": "1.0.0", | ||
| "author": { | ||
| "name": "Vibes.diy Team", | ||
| "email": "hello@vibes.diy" | ||
| }, | ||
| "keywords": ["fireproof", "vibes", "react", "code-generation", "ai"], | ||
| "category": "development" | ||
| } | ||
| ] | ||
| } | ||
|
Contributor
There was a problem hiding this comment. move to into the to .gitignore ---- and then pls remove |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| # macOS | ||
| .DS_Store | ||
| .DS_Store? | ||
| ._* | ||
| .Spotlight-V100 | ||
| .Trashes | ||
|
|
||
| # User-specific Claude settings | ||
| **/.claude/settings.local.json | ||
|
|
||
| # Node.js | ||
| node_modules/ | ||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* | ||
| package-lock.json | ||
| yarn.lock | ||
|
|
||
| # Build artifacts | ||
| dist/ | ||
| build/ | ||
| *.log | ||
|
|
||
| # Editor files | ||
| .vscode/ | ||
| .idea/ | ||
| *.swp | ||
| *.swo | ||
| *~ |
|
Contributor
There was a problem hiding this comment. never reference monorepo things like use-vibes with there real version ---- use workspace:* |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| VIBES PLUGIN - FILES CREATED | ||
| ============================= | ||
| Date: 2025-10-24 | ||
|
|
||
| MARKETPLACE | ||
| ----------- | ||
| cli/.claude-plugin/marketplace.json | ||
| → Defines "vibes-marketplace" with vibes plugin | ||
|
|
||
| PLUGIN MANIFEST | ||
| --------------- | ||
| cli/vibes/.claude-plugin/plugin.json | ||
| → Plugin metadata (name, version, description) | ||
|
|
||
| COMMAND | ||
| ------- | ||
| cli/vibes/commands/vibes.md | ||
| → /vibes slash command | ||
| → Prompts user for app description and output path | ||
| → Invokes vibes-generator Skill | ||
|
|
||
| SKILL (CORE LOGIC) | ||
| ------------------ | ||
| cli/vibes/skills/vibes-generator/SKILL.md | ||
| → 300+ lines of generation instructions | ||
| → Reads vibes.diy codebase patterns | ||
| → Generates system prompt + React component | ||
| → Creates complete Vite project | ||
|
|
||
| TEMPLATES | ||
| --------- | ||
| cli/vibes/skills/vibes-generator/templates/package.json.template | ||
| → Dependencies: React 19, use-vibes 0.14.6, Vite 7.1.9 | ||
|
|
||
|
Comment on lines
+32
to
+34
Contributor
There was a problem hiding this comment. This inventory still lists SuggestionCorrect 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.9Reply with "@CharlieHelps yes please" and I’ll update this file. |
||
| cli/vibes/skills/vibes-generator/templates/vite.config.js.template | ||
| → Vite config with React plugin | ||
|
|
||
| cli/vibes/skills/vibes-generator/templates/index.html.template | ||
| → HTML entry point with {{APP_TITLE}} placeholder | ||
|
|
||
| cli/vibes/skills/vibes-generator/templates/main.jsx.template | ||
| → React root mounting logic | ||
|
|
||
| cli/vibes/skills/vibes-generator/templates/gitignore.template | ||
| → Standard Node.js .gitignore | ||
|
|
||
| DOCUMENTATION | ||
| ------------- | ||
| cli/vibes/README.md | ||
| → User-facing documentation | ||
| → Installation, usage, examples | ||
| → Troubleshooting guide | ||
|
|
||
| cli/vibes/DEVELOPMENT.md | ||
| → Complete development documentation | ||
| → Architecture, design decisions | ||
| → Integration with vibes.diy codebase | ||
| → Testing checklist, known issues | ||
|
|
||
| cli/QUICK_START.md | ||
| → Quick reference for getting started | ||
| → Installation commands | ||
| → File structure overview | ||
|
|
||
| cli/FILES_CREATED.txt | ||
| → This file - inventory of created files | ||
|
|
||
| INSTALLATION | ||
| ------------ | ||
| /plugin marketplace add ./cli | ||
| /plugin install vibes@vibes-marketplace | ||
| [Restart Claude Code] | ||
|
|
||
| USAGE | ||
| ----- | ||
| /vibes | ||
| [Enter app description] | ||
| [Enter output directory] | ||
| cd <output-directory> | ||
| npm install && npm run dev | ||
|
|
||
| KEY CONCEPTS | ||
| ------------ | ||
| 1. Plugin uses Agent Skills system for progressive disclosure | ||
| 2. Skill reads vibes.diy codebase to understand patterns | ||
| 3. Generates Vite projects (not single-file HTML) | ||
| 4. Uses use-vibes package (includes useFireproof + callAI) | ||
| 5. Applies "brutalist web" design aesthetic by default | ||
|
|
||
| MOST IMPORTANT FILE | ||
| ------------------- | ||
| cli/vibes/skills/vibes-generator/SKILL.md | ||
| → This contains ALL the generation logic | ||
| → Claude reads this when /vibes is invoked | ||
| → Implements the complete workflow | ||
|
|
||
| WHAT GETS GENERATED | ||
| ------------------- | ||
| When you run /vibes, you get: | ||
|
|
||
| output-dir/ | ||
| ├── package.json (React 19, use-vibes, Vite) | ||
| ├── vite.config.js | ||
| ├── index.html | ||
| ├── .gitignore | ||
| └── src/ | ||
| ├── main.jsx (React root) | ||
| └── App.jsx (Your generated component) | ||
|
|
||
| The App.jsx uses: | ||
| - useFireproof hook from use-vibes | ||
| - callAI for LLM features | ||
| - Tailwind CSS classes | ||
| - Brutalist web styling | ||
| - Real-time Fireproof queries | ||
|
|
||
| NEXT STEPS | ||
| ---------- | ||
| 1. Test the plugin installation | ||
| 2. Generate a sample app | ||
| 3. Verify it builds and runs | ||
| 4. Refine based on results | ||
| 5. Add more examples | ||
|
|
||
| DOCUMENTATION LOCATIONS | ||
| ----------------------- | ||
| Quick start: cli/QUICK_START.md | ||
| Full dev docs: cli/vibes/DEVELOPMENT.md | ||
| User guide: cli/vibes/README.md | ||
| This inventory: cli/FILES_CREATED.txt | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| # Vibes Plugin - Quick Start | ||
|
|
||
| **Created**: 2025-10-24 | ||
| **Status**: Ready for testing | ||
|
|
||
| ## What We Built | ||
|
|
||
| A Claude Code plugin that generates complete Fireproof/Vibes.diy Vite projects via the `/vibes` command. | ||
|
|
||
| ## File Structure | ||
|
|
||
| ``` | ||
| cli/ | ||
| ├── .claude-plugin/marketplace.json ← Marketplace definition | ||
| ├── vibes/ ← The plugin | ||
| │ ├── .claude-plugin/plugin.json ← Plugin metadata | ||
| │ ├── commands/vibes.md ← /vibes command | ||
| │ ├── skills/vibes-generator/ ← Core logic | ||
| │ │ ├── SKILL.md ← Main Skill (reads vibes.diy patterns) | ||
| │ │ └── templates/ ← Vite project templates | ||
| │ ├── README.md ← User docs | ||
| │ └── DEVELOPMENT.md ← Full development docs | ||
| └── QUICK_START.md ← This file | ||
| ``` | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| # In Claude Code: | ||
| /plugin marketplace add ./cli | ||
| /plugin install vibes@vibes-marketplace | ||
| # Restart Claude Code | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```bash | ||
| /vibes | ||
| # Enter app description when prompted | ||
| # Specify output directory (default: ./vibes-app) | ||
| # cd to output directory | ||
| # npm install && npm run dev | ||
| ``` | ||
|
|
||
| ## How It Works | ||
|
|
||
| 1. **Command** (`commands/vibes.md`) prompts user for input | ||
| 2. **Skill** (`skills/vibes-generator/SKILL.md`): | ||
| - Reads `prompts/pkg/prompts.ts` for system prompt patterns | ||
| - Reads `prompts/pkg/llms/*.ts` for library docs | ||
| - Reads `prompts/pkg/style-prompts.ts` for styling | ||
| - Generates augmented prompt + React component | ||
| - Processes templates and writes Vite project | ||
| 3. **Output**: Complete runnable Vite project | ||
|
|
||
| ## Generated Project | ||
|
|
||
| ``` | ||
| vibes-app/ | ||
| ├── package.json # React 19, use-vibes, Vite | ||
| ├── vite.config.js | ||
| ├── index.html | ||
| ├── .gitignore | ||
| └── src/ | ||
| ├── main.jsx # React root | ||
| └── App.jsx # Generated component | ||
| ``` | ||
|
|
||
| ## Key Files to Check | ||
|
|
||
| - `cli/vibes/skills/vibes-generator/SKILL.md` - Core generation logic (300+ lines) | ||
| - `cli/vibes/DEVELOPMENT.md` - Full documentation | ||
| - `cli/vibes/README.md` - User-facing docs | ||
|
|
||
| ## Testing Checklist | ||
|
|
||
| - [ ] Plugin installs successfully | ||
| - [ ] `/vibes` command appears after restart | ||
| - [ ] Can generate a test app | ||
| - [ ] Generated files are created | ||
| - [ ] `npm install` works | ||
| - [ ] `npm run dev` starts server | ||
| - [ ] App runs in browser | ||
|
|
||
| ## Differences from vibes:vibes | ||
|
|
||
| There's an existing `/vibes:vibes` plugin that creates single-file HTML apps. | ||
|
|
||
| **Existing vibes:vibes**: | ||
| - Single HTML file | ||
| - CDN imports | ||
| - Browser-based Babel | ||
| - No build step | ||
| - Output: `vibes-output/<timestamp>/index.html` | ||
|
|
||
| **Our new /vibes**: | ||
| - Full Vite project | ||
| - npm packages | ||
| - Proper build pipeline | ||
| - Modern dev workflow | ||
| - Output: user-specified directory | ||
|
|
||
| Both are valid for different use cases. | ||
|
|
||
| ## Next Steps | ||
|
|
||
| 1. Test installation and generation | ||
| 2. Verify generated apps work | ||
| 3. Fix any issues | ||
| 4. Add more examples | ||
| 5. Publish to public marketplace | ||
|
|
||
| ## Quick Reference | ||
|
|
||
| **Install marketplace**: `/plugin marketplace add ./cli` | ||
| **Install plugin**: `/plugin install vibes@vibes-marketplace` | ||
| **Generate app**: `/vibes` | ||
| **Run app**: `cd <dir> && npm install && npm run dev` | ||
|
|
||
| **Full docs**: See `cli/vibes/DEVELOPMENT.md` |
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| { | ||
| "name": "vibes", | ||
| "description": "Generate Fireproof and Vibes.diy codebases with AI-powered component generation. Creates complete Vite projects with React components that use Fireproof for data persistence and callAI for LLM integration.", | ||
| "version": "1.0.0", | ||
| "author": { | ||
| "name": "Vibes.diy Team", | ||
| "email": "hello@vibes.diy" | ||
| }, | ||
| "homepage": "https://vibes.diy", | ||
| "repository": "https://github.com/fireproof-storage/vibes.diy", | ||
| "license": "MIT", | ||
|
Contributor
There was a problem hiding this comment. License metadata is inconsistent: SuggestionPick a single license and apply it consistently. For example, align the In - "license": "Apache-2.0"
+ "license": "MIT"Reply with "@CharlieHelps yes please" and I’ll make this change. |
||
| "keywords": [ | ||
| "fireproof", | ||
| "vibes", | ||
| "react", | ||
| "code-generation", | ||
| "ai", | ||
| "vite" | ||
| ] | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The marketplace entry points
sourceto./vibes, but from the directory containing this file (cli/.claude-plugin) that path resolves tocli/.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 👍 / 👎.