A comprehensive starter kit for AI-assisted development using Cursor, supporting both MVP (vanilla web) and full-stack project modes.

• Tech Stack: HTML5, CSS3, Vanilla JavaScript
• Best For: Learning fundamentals, quick prototypes, simple applications
• Setup Time: 2 minutes
• Dependencies: None (just a browser)

• Tech Stack: React + FastAPI + PostgreSQL (or your choice)
• Best For: Production apps, complex features, team development
• Setup Time: 5 minutes
• Dependencies: Node.js, Python, Database

• Cursor IDE with AI capabilities
• Git

For Full-Stack Mode Only:

• Node.js 18+ and npm
• Python 3.11+
• PostgreSQL 15+ (or your chosen database)

1. Choose Your Mode

   • MVP: For simple web apps, learning, or rapid prototyping
   • Full-Stack: For complex applications with backend services

2. Clone and Navigate

   git clone <repository-url>
   cd cursor-rules-mvp1

3. Configure Cursor

   • Enable "Agent Mode" and "Auto" in Cursor settings
   • Set your preferred AI model (Claude, GPT-4, etc.)

4. Select Your Templates

   • MVP Mode: Use templates/memory-bank/*-mvp.md files
   • Full-Stack Mode: Use templates/memory-bank/*.md files (default)

5. Follow the Development Guide

   • Read CURSOR_GUIDE.md for comprehensive best practices
   • Review appropriate CURSOR_RULES.md for your mode
   • Check appropriate PLAN.md for implementation roadmap

6. Start Development

   • Begin with Phase 1 in your chosen PLAN.md
   • Follow the checklist-driven approach
   • Update memory-bank files regularly

your-project/
├── index.html              # Main HTML file
├── css/                    # Stylesheets
├── js/                     # JavaScript files
├── assets/                 # Images, fonts, etc.
├── memory-bank/           # AI memory system
├── CURSOR_RULES.md        # Development rules
├── PLAN.md               # Implementation plan
└── README.md             # Project overview

your-project/
├── frontend/              # React application
├── backend/               # FastAPI application
├── database/              # Database migrations
├── tests/                 # Test files
├── docs/                  # Documentation
├── memory-bank/           # AI memory system
├── CURSOR_RULES.md        # Development rules
├── PLAN.md               # Implementation plan
└── README.md             # Project overview

The starter kit includes comprehensive templates for common development patterns:

• Button Components: MVP (vanilla JS) and Full-Stack (React) patterns
• Form Components: Validation, error handling, submission patterns
• Modal/Dialog: Show/hide, backdrop, keyboard handling
• Data Display: Lists, tables, cards with pagination
• Navigation: Menus, breadcrumbs, active states

• CRUD Operations: Create, Read, Update, Delete patterns
• Authentication: Login, logout, JWT token management
• File Upload: Image upload, validation, processing
• Search & Filter: Query parameters, pagination, filtering

• Entity Models: MVP (vanilla JS classes) and Full-Stack (SQLAlchemy)
• State Management: MVP (local state) and Full-Stack (Redux/Zustand)
• Data Validation: MVP (custom validators) and Full-Stack (Pydantic)

• User Stories: MVP and Full-Stack story formats
• Feature Specifications: Technical requirements and implementation plans
• Acceptance Criteria: Testable requirements and success metrics
• Implementation Plans: Step-by-step development roadmaps

The memory-bank/ folder serves as an external brain for the AI:

• projectbrief.md: One-sentence project description
• techContext.md: Technology stack and versions
• systemPatterns.md: Architecture and design patterns
• activeContext.md: Current work and next steps
• progress.md: Overall project progress

Starting a session:

Hello, let's continue the project. Please start by reading all files in CURSOR_RULES.md and the memory-bank/ folder to fully understand the current project state.

Ending a session:

Please update activeContext.md and progress.md to summarize our work and outline the next steps.

1. Follow PLAN.md checklist strictly
2. Execute one prompt at a time
3. Review AI output like a Pull Request
4. Commit progress frequently
5. Update memory-bank files

When implementing features, use the provided templates:

For UI Components:

Create a [component-type] component following the template structure in ui-components.md.
Requirements: [specific requirements]

For API Endpoints:

Create a [endpoint-type] endpoint following the template structure in api-endpoints.md.
Requirements: [specific requirements]

For Data Models:

Create a [model-type] data model following the template structure in data-models.md.
Requirements: [specific requirements]

For Feature Development:

Create a user story for [feature] following the template structure in feature-development.md.
Requirements: [specific requirements]

• Use file references (@filename:line-range) for precise context
• Be specific with prompts and requirements
• Test thoroughly before moving to next step
• Monitor Cursor's context usage
• Use /compact when context exceeds 50%
• Leverage building block templates for consistency

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Build Tool: None (or simple Vite if needed)
• Styling: CSS custom properties, Flexbox/Grid
• Testing: Manual testing, browser dev tools

• Frontend: React 18.x with TypeScript
• Backend: FastAPI (Python 3.11+)
• Database: PostgreSQL 15+
• Build Tools: Vite, SQLAlchemy, Alembic
• Testing: Vitest, pytest, React Testing Library

1. Phase 1: Basic Setup (HTML structure, CSS foundation)
2. Phase 2: Core Features (navigation, forms, data management)
3. Phase 3: Interactive Features (dynamic content, event handling)
4. Phase 4: Enhancement (responsive design, accessibility)
5. Phase 5: Testing and Polish (manual testing, optimization)

1. Phase 1: Project Foundation (Structure, Setup)
2. Phase 2: Core Data Models (Database models, schemas)
3. Phase 3: Backend API (Services, endpoints)
4. Phase 4: Frontend Components (UI, state management)
5. Phase 5: Integration and Testing
6. Phase 6: UI/UX Enhancement
7. Phase 7: Documentation and Deployment

• ❌ Vague prompts ("make it better")
• ❌ Dumping whole files (use @filename:line-range)
• ❌ Asking AI to design everything (architect first)
• ❌ Trusting "it compiles" means "it works"
• ❌ Ignoring context limits
• ❌ Choosing complex mode for simple projects

• Cursor Documentation
• MDN Web Docs (for MVP mode)
• React Documentation (for full-stack mode)
• FastAPI Documentation (for full-stack mode)

This project demonstrates AI-assisted development practices. To contribute:

1. Follow the established patterns in CURSOR_RULES.md
2. Update memory-bank files with your changes
3. Follow the TDD methodology
4. Maintain comprehensive documentation

This project is open source and available under the MIT License.

Happy coding with Cursor AI! 🎉