vibe-to-prod

🥈Silver

Vibe-to-prod is a full-stack template for AI-assisted developers. It automates the software development lifecycle, from coding to production. It benefits developers and operations teams by reducing deployment time. It connects to Firebase, Pulumi, and integrates with Claude for AI-assisted development.

2950Updated 2w ago

Intermediate30min to implementautomation

Saves ~480 min per use

Quick InstallView Source

git clone https://github.com/muyen/vibe-to-prod.git

Works with:

Claude

Overview

About This Skill

How to Use

1. **Initialize the project**: Clone the template repository or use the prompt to generate a new project. Replace all [CUSTOM_CONFIGURATION] placeholders with your actual values (project ID, API keys, etc.). Run `npm install` in each subdirectory (pulumi/, firebase/functions/, frontend/). 2. **Configure Firebase**: Run `firebase login` and `firebase init` to set up your Firebase project. Select Firestore, Functions, and Hosting when prompted. 3. **Deploy infrastructure**: Navigate to the pulumi/ directory and run `pulumi up` to provision GCP resources. Review the preview carefully before confirming. 4. **Deploy backend**: In firebase/functions/, run `npm run deploy` to deploy your Firebase Functions. The AI hooks will automatically generate documentation and suggest optimizations. 5. **Deploy frontend**: In frontend/, run `npm run deploy` to deploy your React app to Firebase Hosting. The CI/CD pipeline in .github/workflows/deploy.yml will handle future deployments automatically. Tips: - Use Claude's inline comments feature to get AI assistance while coding by adding `// [CLAUDE-HELP]` comments in your code. - For production use, replace all placeholder values in config files with your actual secrets using Pulumi's secret management (`pulumi config set --secret`). - Monitor deployment logs in Firebase Console and GCP Console to verify everything is working correctly.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/muyen/vibe-to-prod

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Convert the [PROJECT_IDEA] into a full-stack Firebase + Pulumi template. Generate a complete project structure with: 1) Firebase backend (Firestore, Auth, Functions), 2) Pulumi infrastructure (GCP/AWS resources), 3) React frontend (TypeScript), 4) CI/CD pipeline (GitHub Actions), and 5) AI-assisted development hooks for Claude. Include placeholder comments for [CUSTOM_CONFIGURATION] like environment variables, API keys, and domain settings. Output the entire project as a zip file structure with file contents in code blocks.

Example Output

```
Project Structure:
my-app/
├── firebase/
│   ├── functions/src/index.ts (Firebase Functions with AI hooks)
│   ├── firestore.rules (security rules)
│   └── .firebaserc (Firebase project config)
├── pulumi/
│   ├── index.ts (Pulumi stack with GCP resources)
│   ├── config.ts (Pulumi configuration)
│   └── package.json
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── App.tsx
│   │   └── index.tsx
│   ├── package.json
│   └── tsconfig.json
├── .github/workflows/
│   └── deploy.yml (CI/CD pipeline)
└── README.md (Setup instructions)

File Contents Example (pulumi/index.ts):
```typescript
import * as pulumi from "@pulumi/pulumi";
import * as gcp from "@pulumi/gcp";

// [CUSTOM_CONFIGURATION] - Replace with your project ID
const projectId = "my-app-12345";

// Deploy Firebase Hosting
const firebaseHosting = new gcp.firebase.HostingSite("my-app-hosting", {
  project: projectId,
  siteId: "my-app",
  appId: pulumi.output(gcp.firebase.getProjectConfig({ project: projectId })).appId,
});

// Deploy Cloud Run service for backend
const backendService = new gcp.cloudrun.Service("backend-service", {
  location: "us-central1",
  template: {
    spec: {
      containers: [{
        image: "gcr.io/PROJECT_ID/backend-image:latest",
        env: [{ name: "FIREBASE_CONFIG", value: JSON.stringify({ /* [CUSTOM_CONFIGURATION] */ }) }],
      }],
    },
  },
});

export const url = backendService.statuses[0].url;
```

Setup Instructions:
1. Run `npm install` in pulumi/ and firebase/functions/
2. Configure Firebase: `firebase login && firebase init`
3. Deploy infrastructure: `pulumi up`
4. Deploy backend: `cd firebase/functions && npm run deploy`
5. Deploy frontend: `cd frontend && npm run deploy`

The template includes pre-configured AI hooks for Claude in the Firebase Functions (functions/src/index.ts) that provide:
- Automated API documentation generation
- Security rule validation suggestions
- Performance optimization recommendations
- Cost estimation for GCP resources

All components are wired together with environment-specific configurations that can be customized via [CUSTOM_CONFIGURATION] placeholders in each file.
```