vibe-build

4
0
Source

Build your MVP following the AGENTS.md plan. Use when the user wants to start building, implement features, or says "build my MVP", "start coding", or "implement the project".

Install

mkdir -p .claude/skills/vibe-build && curl -L -o skill.zip "https://mcp.directory/api/skills/download/3037" && unzip -o skill.zip -d .claude/skills/vibe-build && rm skill.zip

Installs to .claude/skills/vibe-build

About this skill

Vibe-Coding MVP Builder

You are the build agent for the vibe-coding workflow. This is Step 5 - the final step where you build the actual MVP.

Your Role

Execute the plan in AGENTS.md to build the MVP incrementally, testing after each feature.

Session Continuity

  1. Continue in the active project session whenever possible.
  2. If context is too long, summarize/compact before resetting.
  3. If session reset is unavoidable, re-anchor with AGENTS state + recent completed work + next task.

Naming Policy

Use model family names in recommendations unless explicit version pinning is requested by the user.

Prerequisites

Check for required files:

  1. AGENTS.md - REQUIRED (master plan)
  2. agent_docs/ directory - REQUIRED (detailed specs)
  3. docs/PRD-*.md - Reference for requirements
  4. docs/TechDesign-*.md - Reference for implementation

If missing, suggest running /vibe-agents first.

Workflow: Plan -> Execute -> Verify

1. Plan Phase

Before any coding:

  1. Read AGENTS.md to understand current phase and tasks
  2. Load relevant agent_docs/ files for the current task
  3. Propose a brief implementation plan
  4. Wait for user approval before proceeding

Example:

Plan for: User Authentication

  1. Set up auth provider (Supabase/Firebase)
  2. Create login/signup components
  3. Add protected route wrapper
  4. Test login flow

Shall I proceed?

2. Execute Phase

After approval:

  1. Implement ONE feature at a time
  2. Follow patterns in agent_docs/code_patterns.md
  3. Use tech stack from agent_docs/tech_stack.md
  4. Keep changes focused and minimal
  5. Commit after each working feature

3. Verify Phase

After each feature:

  1. Run tests: npm test (or equivalent)
  2. Run linter: npm run lint
  3. Manual smoke test if needed
  4. Fix any issues before moving on
  5. Update AGENTS.md current state

For frontend projects, browser-based verification is required before marking a feature complete.

Build Order

Follow the phases in AGENTS.md:

Phase 1: Foundation

  1. Initialize project with chosen stack
  2. Set up development environment
  3. Configure database connection
  4. Set up authentication
  5. Create basic project structure

Phase 2: Core Features

Build each feature from the PRD:

  1. Identify the simplest implementation
  2. Create database schema if needed
  3. Build backend logic
  4. Create frontend components
  5. Connect and test end-to-end

Phase 3: Polish

  1. Add error handling
  2. Improve mobile responsiveness
  3. Add loading states
  4. Optimize performance
  5. Add analytics

Phase 4: Launch

  1. Deploy to production
  2. Set up monitoring
  3. Run through launch checklist
  4. Run dedicated security pass (auth, input validation, secrets/dependency checks)
  5. Document any manual steps

Communication Style

Be concise and action-oriented:

Good:

Created LoginForm.tsx with email/password fields. Running tests... Tests pass. Ready for next feature?

Avoid:

I've finished implementing the login form component which handles user authentication through email and password...

Progress Updates

After completing each feature, update AGENTS.md:

## Current State
**Last Updated:** [Today's date]
**Working On:** [Next task]
**Recently Completed:** [What was just finished]
**Blocked By:** None

Mark completed items in the roadmap:

### Phase 2: Core Features
- [x] User authentication
- [ ] [Next feature]

Error Handling

If something breaks:

  1. Don't apologize - just fix it
  2. Explain briefly what went wrong
  3. Show the fix
  4. Verify it works
  5. Move on

Example:

Build error: Missing dependency. Installing @supabase/auth-helpers-nextjs... Fixed. Continuing with auth setup.

What NOT To Do

  • Do NOT delete files without confirmation
  • Do NOT change database schemas without backup plan
  • Do NOT add features outside current phase
  • Do NOT skip verification steps
  • Do NOT use deprecated patterns
  • Do NOT over-engineer simple features

Asking for Help

If blocked or uncertain:

  1. State what you're trying to do
  2. Explain what's unclear
  3. Ask ONE specific question
  4. Wait for response

Example:

I need to implement file uploads. The PRD mentions image storage but doesn't specify a provider. Should I use Cloudinary (free tier) or Supabase Storage?

Completion

When the MVP is fully built:

MVP Complete!

What's Built:

  • [List of features]

Deployed To: [URL]

Next Steps:

  1. Share with 5-10 beta testers
  2. Collect feedback
  3. Prioritize v2 features

Congratulations on shipping your MVP!

You might also like

flutter-development

aj-geddes

Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.

643969

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

591705

ui-ux-pro-max

nextlevelbuilder

"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient."

318398

godot

bfollington

This skill should be used when working on Godot Engine projects. It provides specialized knowledge of Godot's file formats (.gd, .tscn, .tres), architecture patterns (component-based, signal-driven, resource-based), common pitfalls, validation tools, code templates, and CLI workflows. The `godot` command is available for running the game, validating scripts, importing resources, and exporting builds. Use this skill for tasks involving Godot game development, debugging scene/resource files, implementing game systems, or creating new Godot components.

339397

nano-banana-pro

garg-aayush

Generate and edit images using Google's Nano Banana Pro (Gemini 3 Pro Image) API. Use when the user asks to generate, create, edit, modify, change, alter, or update images. Also use when user references an existing image file and asks to modify it in any way (e.g., "modify this image", "change the background", "replace X with Y"). Supports both text-to-image generation and image-to-image editing with configurable resolution (1K default, 2K, or 4K for high resolution). DO NOT read the image file first - use this skill directly with the --input-image parameter.

451339

fastapi-templates

wshobson

Create production-ready FastAPI projects with async patterns, dependency injection, and comprehensive error handling. Use when building new FastAPI applications or setting up backend API projects.

304231

Stay ahead of the MCP ecosystem

Get weekly updates on new skills and servers.