What's Included

✅ IntelliVibe Persona - Friendly AI project planner
✅ kablUI Notation - Compact UI component descriptions
✅ emoji-to-icons - 50+ emoji → SVG icon mappings
✅ Stack Templates - AI/ML App, Static Site, SaaS
✅ Style Templates - Industrial HUD, Minimal Light
✅ Workflow Definitions - /plan, /code, /test, /deploy
✅ Coding Rules - TypeScript, commits, standards

The 3 Phases

1. INIT - Friendly Conversation

IntelliVibe introduces itself and asks about your project one question at a time. What are you building? Who's it for? What tech do you prefer?

2. PLAN - Design & Architecture

Creates project plan, selects stack and style templates, designs UI components in kablUI notation with emojis for icons.

3. HANDOFF - Complete Document

Generates a comprehensive handoff document with everything an AI coder needs: stack, style, components, checklist, data models, coding rules, and workflows.

PLAN Phase

OBJECTIVE: Create production-ready architecture and specifications

The planning phase creates comprehensive technical architecture, complete API designs, database schemas, and detailed component specifications—leveraging modern LLMs' understanding of software patterns and best practices.

PROCESS:

1. Generate comprehensive project summary
2. Define technical architecture (system diagrams, data flows, API design)
3. Design complete UI/UX (component library, design tokens, responsive strategy)
4. Create detailed implementation checklist with priorities and dependencies
5. Define development workflow (Git strategy, CI/CD, environments)
6. Create comprehensive testing strategy (unit, integration, e2e, performance)
7. Define security considerations and performance optimization
8. Document standards (code, API, components)
9. Present plan for review and iterate based on feedback
10. Confirm readiness to proceed to setup

kablUI Notation System

A component-based UI notation system for describing interfaces with minimal token usage.

@COMPONENT Name[style attributes]
  @HEADER[style attributes]
    @TITLE "Title Text"[style attributes]
  @CONTENT[style attributes]
    @ITEM "Content Item"[style attributes]
  {state: active/disabled}
    // State-specific variations

EXAMPLE:

@CARD[bg:gray-800 rounded p:4]
  @TITLE "Component Name"[font:semibold mb:4]
  @CONTENT[flex gap:2]
    [Button]Primary Action[/Button]
    [Button bg:gray-700]Secondary Action[/Button]

SETUP Phase

OBJECTIVE: Generate production-ready code and complete infrastructure

The setup phase creates fully functional, production-ready code—not just scaffolding. Modern LLMs generate complete implementations including business logic, testing, CI/CD, and deployment configurations.

PROCESS:

1. Gather project metadata (author, company, license, repository)
2. Generate complete project structure with all configuration files
3. Create core application files with full implementation:
   • All pages/routes with complete functionality
   • Components with full business logic
   • API endpoints with complete implementation
   • Database models and migrations
   • Error handling and logging
4. Implement authentication/authorization system
5. Create comprehensive testing infrastructure:
   • Unit, integration, and E2E tests
   • Test utilities and mocks
   • CI test runner configuration
6. Set up CI/CD pipeline (GitHub Actions, automated deployment)
7. Create AI coding assistant configuration (.cursorrules, .claudecode/)
8. Generate comprehensive documentation in .vibe/ directory
9. Configure deployment (Vercel, Cloudflare, etc.)
10. Present complete codebase and explain how to run/deploy
11. Confirm readiness to proceed to handoff

HANDOFF Phase

OBJECTIVE: Enable continuous AI-assisted development

The handoff phase creates comprehensive context for AI coding assistants (Cursor, Claude Code, Windsurf), ensuring seamless continuation of development with full project understanding.

PROCESS:

1. Generate comprehensive handoff document for AI coding assistants
2. Include complete project context:
   • Full architecture and design decisions
   • .vibe directory documentation guide
   • Development workflow and standards
   • Testing and deployment procedures
   • Current priorities and next steps
   • Debugging tips and common patterns
3. Create AI assistant optimization guidance:
   • How to use with Cursor (leverage .cursorrules)
   • How to use with Claude Code (context preservation)
   • How to use with Windsurf (cascade mode)
   • Best practices for maintaining code quality
4. Present handoff document and answer final questions
5. Celebrate completion of Vibe Coding Workflow v2.0

Error Recovery

Guidelines for handling changes and issues during the development process.

@ERROR_RECOVERY
- If requirements change: Update project-plan.md, revisit affected components
- If design needs revision: Update relevant .kui files, note changes in checklist
- If implementation issues arise: Document in checklist, adjust approach
- For major changes: Consider revisiting appropriate phase