VibeCodex
Back to AI Development Guide/
Development Workflow

Development Workflow

Learn effective AI interaction patterns, file organization, and context-providing strategies.

Structured AI Interaction

Effective AI-assisted development requires a structured approach to problem decomposition and interaction.

Problem Decomposition Principles
1

Break projects into components

Divide your project into distinct, manageable components

2

Single Responsibility Principle

Each component/function should do one thing well

3

Create a hierarchy

Organize requirements from high-level goals to individual tasks

Example Decomposition

Project Goal

Build a task management application

Feature: Task List

Display and manage tasks

Component: Task Item

Individual task display and actions

Function: Toggle Completion

Mark task as complete/incomplete

Customize AI Behavior

Create and update custom instructions as your project progresses to get more consistent and relevant results.

Rules for AI
Create custom instructions to guide AI behavior

Example Rules:

  • Always use TypeScript instead of JavaScript
  • Follow the project's naming conventions (camelCase for variables, PascalCase for components)
  • Use Tailwind CSS for styling
  • Prefer functional components with hooks over class components
  • Always include proper error handling
  • Write unit tests for all components

Update these rules as your project evolves and your needs change. You can maintain a RulesForAI.md file in your project that you reference in prompts.

Tool-Specific Customization
Optimize for your specific AI coding tool
1

Cursor

Use settings menu to configure AI behavior rules

Create a .cursor_rules file in your project root

2

GitHub Copilot

Use comments to guide code generation

Create a .github/copilot/settings.json file

3

Claude

Use custom instructions in the settings panel

Reference documentation links in your prompts

File Organization

Use clear, descriptive file names that indicate each file's purpose. Many AI coding tools don't include all files in context, so good naming prevents code duplication and helps AI understand the codebase.

Effective File Organization
project/
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   └── card.tsx
│   │   ├── layout/
│   │   │   ├── header.tsx
│   │   │   ├── footer.tsx
│   │   │   └── sidebar.tsx
│   │   └── features/
│   │       ├── auth/
│   │       │   ├── login-form.tsx
│   │       │   └── signup-form.tsx
│   │       └── dashboard/
│   │           ├── stats-card.tsx
│   │           └── recent-activity.tsx
│   ├── hooks/
│   │   ├── use-auth.ts
│   │   └── use-form.ts
│   ├── utils/
│   │   ├── api.ts
│   │   └── validation.ts
│   └── pages/
│       ├── index.tsx
│       ├── login.tsx
│       └── dashboard.tsx
└── public/
    ├── images/
    └── fonts/

File Naming Best Practices

  • Use descriptive, purpose-indicating names
  • Follow consistent naming conventions
  • Group related files in logical directories
  • Use kebab-case for file names (e.g., user-profile.tsx)
  • Use PascalCase for component files (e.g., UserProfile.tsx)
  • Use camelCase for utility files (e.g., formatDate.ts)
Benefits of Good File Organization
  • Helps AI understand the codebase structure
  • Prevents code duplication
  • Makes it easier to reference existing files
  • Improves collaboration with other developers
  • Facilitates maintenance and scaling
Previous: Planning with AI