Skip to main content

​
🤖 AI-Assisted Development (Vibecoding)

Shipnative is meticulously designed for AI-assisted development, a philosophy we call “Vibecoding.” This approach allows you to describe what you want to build to an AI, and it generates production-ready code that adheres to the project’s conventions and patterns. The core of this workflow revolves around the vibe/ folder, which provides comprehensive context to your AI assistant.

​
The vibe/ Folder: Your AI’s Brain

The vibe/ folder (shipnativeapp/vibe/) contains critical context files that guide your AI assistant. Before writing any code, your AI should always read these files to understand the project’s current state, technical decisions, and coding style.
  • CONTEXT.md: Provides a high-level overview of what the app is, its current features, and overall purpose. This helps the AI understand the “what.”
  • TECH_STACK.md: Details the technologies used (and sometimes avoided), along with reasons for those choices. This informs the AI about the “how” in terms of technology.
  • STYLE_GUIDE.md: Outlines coding patterns, conventions, and best practices specific to Shipnative. This ensures the AI generates code that matches your existing codebase’s style.
  • MOCK_SERVICES.md: Explains the mock service architecture, which is crucial for AI to understand how to handle backend interactions when API keys are not available.

​
The Golden Prompt

When you’re ready to build a new feature or make a change, use a prompt similar to this in your AI coding assistant (e.g., Cursor, Claude, Gemini):
Copy this prompt:
I am ready to vibe. Read the .cursorrules and the vibe/ folder. I want to build a [describe your app or feature in detail]. Start by outlining the database schema changes I need.
This prompt is designed to prime your AI assistant effectively:
  1. I am ready to vibe.: Signals to the AI that you want to engage in AI-assisted development within the Shipnative context.
  2. Read the .cursorrules and the vibe/ folder.: Explicitly instructs the AI to consume the project’s foundational context.
  3. I want to build a [describe your app or feature in detail].: This is where you provide your specific requirements. Be as detailed as possible about the functionality, UI, and any constraints.
  4. Start by outlining the database schema changes I need.: A common and effective starting point for many features, guiding the AI to think about data modeling first.

​
AI Development Workflow

When working with your AI assistant, follow these steps:

​
Step 1: Read Context Files

Always ensure your AI has read the shipnativeapp/vibe/ folder and any project-specific rules (like .cursorrules). This is the most critical step for generating relevant and idiomatic code.

​
Step 2: Check Existing Code

Before implementing a new feature, instruct your AI to review existing code patterns:
  • apps/app/app/components/: For reusable UI components.
  • apps/app/app/screens/: For screen structure and common patterns.
  • apps/app/app/stores/: For state management patterns using Zustand.
  • apps/app/app/services/: For service interaction patterns (e.g., Supabase, RevenueCat).
This helps the AI understand how to integrate new code seamlessly.

​
Step 3: Implement Feature

Guide your AI to implement the feature following established Shipnative patterns:
  • Styling: Use Unistyles with theme values (never hardcode).
  • State Management: Leverage Zustand for global state and React Query for server state/data fetching.
  • UI/UX: Ensure dark mode support, accessibility labels, and graceful error handling.
  • API Interaction: Use the provided service wrappers (e.g., supabase, revenueCat) which automatically support mock mode.

​
Step 4: Update Documentation (Crucial for AI)

If you add a new major feature or modify existing ones, remember to update the relevant documentation. This keeps the AI’s context up-to-date for future tasks.
  • shipnativeapp/vibe/CONTEXT.md: For major new features or significant architectural changes.
  • Feature-specific .md files (e.g., SUPABASE.md, MONETIZATION.md): For detailed changes to integrated services.
  • Mintlify Docs: Update the user-facing documentation (like this one!) to reflect new capabilities.

​
Benefits of Vibecoding

  • Consistency: AI generates code that adheres to your project’s style and architecture.
  • Speed: Automate boilerplate and repetitive tasks, allowing you to focus on core logic.
  • Quality: Reduce human error and ensure best practices are followed.
  • Maintainability: New features are integrated seamlessly, making the codebase easier to understand and maintain.
By effectively using the vibe/ folder and guiding your AI assistant, you can significantly accelerate your development process and maintain a high-quality codebase.