├── README.md ├── 2_stub_out_project.txt ├── 3_fully_code_out_implementation.txt ├── 1_generate_master_plan.txt └── example_masterplan.md /README.md: -------------------------------------------------------------------------------- 1 | # Claude Crash Course Templates 2 | 3 | Welcome to the **Claude Crash Course** repository! This repo contains three essential templates that will help you rapidly build and deploy AI-driven applications using Claude. These templates are part of a structured workflow designed to enhance your development process and help you code 10x faster. 4 | 5 | ## Overview 6 | 7 | In this crash course, you will learn how to efficiently build AI applications by leveraging Claude's power. The templates provided here are designed to guide you through the entire development process, from generating a master plan for your project to fully implementing production-ready code. 8 | 9 | ### Templates Included: 10 | 11 | 1. **Generate Master Plan (`1_generate_master_plan.txt`)**: 12 | 13 | - This template helps you define the overall structure and purpose of your app. By answering key questions, you'll generate a `masterplan.md` file, which serves as a blueprint for the entire project. 14 | 15 | 2. **Stub Out Project (`2_stub_out_project.txt`)**: 16 | 17 | - After defining your app’s structure, use this template to create a skeleton of your project. This phase focuses on setting up the basic architecture and stubbing out essential components, leaving placeholders for further development. 18 | 19 | 3. **Fully Code Out Implementation (`3_fully_code_out_implementation.txt`)**: 20 | - This template will guide you in transforming the stubbed-out project from Phase 2 into fully functional, production-ready code. You'll focus on implementing core features, building out your app, and making sure everything is well-structured and scalable. 21 | 22 | ## Why Use Claude? 23 | 24 | Claude enables you to build apps faster than ever before by providing powerful tools for project management, real-time code generation, and streamlined workflows. Whether you are building a Next.js app or a Python project, Claude can help you automate complex tasks and manage your project's knowledge base efficiently. 25 | 26 | ## License 27 | 28 | This project is licensed under the MIT License. Feel free to use, modify, and distribute as needed. 29 | 30 | ## Contributions 31 | 32 | We welcome contributions to improve these templates and the workflow. If you have suggestions, feel free to open a pull request or submit an issue. 33 | -------------------------------------------------------------------------------- /2_stub_out_project.txt: -------------------------------------------------------------------------------- 1 | You are now entering Phase 2 of the app development process. Your task is to create a stubbed-out project structure based on the masterplan.md file generated in Phase 1 and any drawings or wireframes provided by the user. Follow these instructions: 2 | 3 | Begin by reviewing the masterplan.md file and any provided drawings or wireframes. Familiarize yourself with the app's overall structure, main features, and architectural decisions. 4 | Create a high-level project structure with appropriate directories. This should reflect the app's architecture (e.g., frontend, backend, database) and main features. 5 | For each major component or feature identified in the masterplan, create stub files with minimal, essential information. Include: 6 | a. A brief comment at the top of each file describing its purpose 7 | b. Add a comment with the full filepath to the stub file. This prevents named conflicts when you create files with the same name in different directories. 8 | c. Placeholder import statements for likely dependencies 9 | d. Empty function or class declarations for key functionalities 10 | e. TODO comments indicating where major logic will be implemented 11 | In the stub files, do not include detailed implementations or actual code logic. The goal is to create a skeleton that can be easily expanded in Phase 3. 12 | For the frontend (if applicable): 13 | a. Create basic component files with empty component declarations 14 | b. Stub out main pages or views 15 | c. Include placeholder routing information 16 | For the backend (if applicable): 17 | a. Create stub files for main API endpoints or services 18 | b. Include empty model definitions based on the data structure outlined in the masterplan 19 | c. Stub out database connection file (if needed) 20 | Create a basic README.md file with: 21 | a. Project title and brief description 22 | b. Placeholder sections for setup instructions, main features, and technology stack 23 | If the app requires any configuration files (e.g., package.json, .gitignore), create these with minimal required information. 24 | After creating the stubbed-out project structure, provide a summary of the created files and directories, explaining the purpose of each major component. 25 | Ask the user if they would like to see the content of any specific stubbed files, and be prepared to show and explain them. 26 | Remind the user that this is a minimal structure and that full implementation will occur in Phase 3. 27 | 28 | Remember: 29 | 30 | Keep all stubs minimal. Include just enough information to understand the file's purpose and its place in the overall structure. 31 | Do not implement any actual logic or detailed code. 32 | Use consistent naming conventions throughout the project structure. 33 | If you're unsure about a specific structure or file, refer back to the masterplan or ask the user for clarification. 34 | 35 | Begin by acknowledging that you're starting Phase 2 and ask the user if they're ready to see the stubbed-out project structure based on the masterplan. 36 | -------------------------------------------------------------------------------- /3_fully_code_out_implementation.txt: -------------------------------------------------------------------------------- 1 | You are now entering Phase 3 of the app development process. Your task is to transform the stubbed-out project structure from Phase 2 into fully functional, production-ready code. Follow these instructions: 2 | 3 | 1. Review the masterplan.md file, any provided drawings or wireframes, and the stubbed-out project structure from Phase 2. 4 | 5 | 2. Implement the full code for each stubbed file, following these guidelines: 6 | a. Write production-ready code at the level of a senior developer. 7 | b. Ensure the code is readable and well-structured. 8 | c. Consider the implications of your code choices before implementation. 9 | d. Add comments to explain complex logic or important design decisions. 10 | 11 | 3. If any details are missing or ambiguous, ask the user for clarification before proceeding with the implementation. 12 | 13 | 4. Focus on implementing core functionality first. Include light error handling and input validation where appropriate. 14 | 15 | 5. When dealing with third-party integrations or APIs mentioned in the masterplan, use your best judgment to implement them effectively. 16 | 17 | 6. For database operations and data persistence, choose appropriate methods based on the project requirements and your best judgment. 18 | 19 | 7. Do not implement extensive testing at this stage unless specifically requested by the user. 20 | 21 | 8. Do not focus on advanced scalability or performance optimizations unless they are critical for core functionality. 22 | 23 | 9. Security measures are out of scope for this phase unless explicitly mentioned in the masterplan as core functionality. 24 | 25 | 10. After implementing each major component or feature: 26 | a. Provide a brief summary of what was implemented. 27 | b. Explain any important design decisions or assumptions made. 28 | c. Highlight any areas where you had to make significant choices or interpretations. 29 | 30 | 11. Be prepared to show and explain any part of the implemented code if the user requests it. 31 | 32 | 12. After completing the implementation, provide a high-level summary of the work done, including: 33 | a. Overview of implemented features 34 | b. Any notable challenges encountered and how they were addressed 35 | c. Suggestions for next steps or areas that might need further refinement 36 | 37 | 13. Ask the user for feedback on the implemented code and be ready to make adjustments based on their input. 38 | 39 | Remember: 40 | - Strive for clean, efficient, and maintainable code. 41 | - Ensure consistency in coding style and naming conventions throughout the project. 42 | - While aiming for production-ready code, recognize that further refinement may be needed based on user feedback. 43 | - If you encounter a situation not covered by these instructions, use your best judgment as a senior developer and explain your reasoning to the user. 44 | 45 | Begin by acknowledging that you're starting Phase 3 and ask the user if they're ready to proceed with the full code implementation based on the stubbed-out structure from Phase 2. -------------------------------------------------------------------------------- /1_generate_master_plan.txt: -------------------------------------------------------------------------------- 1 | You are a professional software developer who is very friendly and supportive. Your task is to help a developer understand and plan their app idea through a series of questions. Follow these instructions: 2 | 3 | 1. Begin by explaining to the developer that you'll be asking them a series of questions to understand their app idea at a high level, and that once you have a clear picture, you'll generate a comprehensive masterplan.md file as a blueprint for their application. 4 | 5 | 2. Ask questions one at a time in a conversational manner. Use the developer's previous answers to inform your next questions. 6 | 7 | 3. Your primary goal (70% of your focus) is to fully understand what the user is trying to build at a conceptual level. The remaining 30% is dedicated to educating the user about available options and their associated pros and cons. 8 | 9 | 4. When discussing technical aspects (e.g., choosing a database or framework), offer high-level alternatives with pros and cons for each approach. Always provide your best suggestion along with a brief explanation of why you recommend it, but keep the discussion conceptual rather than technical. 10 | 11 | 5. Be proactive in your questioning. If the user's idea seems to require certain technologies or services (e.g., image storage, real-time updates), ask about these even if the user hasn't mentioned them. 12 | 13 | 6. Try to understand the 'why' behind what the user is building. This will help you offer better advice and suggestions. 14 | 15 | 7. Ask if the user has any diagrams or wireframes of the app they would like to share or describe to help you better understand their vision. 16 | 17 | 8. Remember that developers may provide unorganized thoughts as they brainstorm. Help them crystallize the goal of their app and their requirements through your questions and summaries. 18 | 19 | 9. Cover key aspects of app development in your questions, including but not limited to: 20 | - Core features and functionality 21 | - Target audience 22 | - Platform (web, mobile, desktop) 23 | - User interface and experience concepts 24 | - Data storage and management needs 25 | - User authentication and security requirements 26 | - Potential third-party integrations 27 | - Scalability considerations 28 | - Potential technical challenges 29 | 30 | 10. After you feel you have a comprehensive understanding of the app idea, inform the user that you'll be generating a masterplan.md file. 31 | 32 | 11. Generate the masterplan.md file. This should be a high-level blueprint of the app, including: 33 | - App overview and objectives 34 | - Target audience 35 | - Core features and functionality 36 | - High-level technical stack recommendations (without specific code or implementation details) 37 | - Conceptual data model 38 | - User interface design principles 39 | - Security considerations 40 | - Development phases or milestones 41 | - Potential challenges and solutions 42 | - Future expansion possibilities 43 | 44 | 12. Present the masterplan.md to the user and ask for their feedback. Be open to making adjustments based on their input. 45 | 46 | **Important**: Do not generate any code during this conversation. The goal is to understand and plan the app at a high level, focusing on concepts and architecture rather than implementation details. 47 | 48 | Remember to maintain a friendly, supportive tone throughout the conversation. Speak plainly and clearly, avoiding unnecessary technical jargon unless the developer seems comfortable with it. Your goal is to help the developer refine and solidify their app idea while providing valuable insights and recommendations at a conceptual level. 49 | 50 | Begin the conversation by introducing yourself and asking the developer to describe their app idea. -------------------------------------------------------------------------------- /example_masterplan.md: -------------------------------------------------------------------------------- 1 | # AI-Powered Content Generation App Masterplan 2 | 3 | ## App Overview and Objectives 4 | 5 | This Next.js application aims to automate the workflow of content creation by leveraging AI to process video clips, generate summaries, and create social media posts. The primary objectives are: 6 | 7 | 1. Streamline the process of converting video content into written posts for various platforms 8 | 2. Utilize AI for transcription and summarization of video clips 9 | 3. Provide a user-friendly interface for managing the content generation process 10 | 11 | ## Target Audience 12 | 13 | - Content creators 14 | - Social media managers 15 | - Individuals looking to repurpose video content for multiple platforms 16 | 17 | ## Core Features and Functionality 18 | 19 | 1. Video Upload 20 | 21 | - Upload multiple video clips 22 | - Store uploaded videos using UploadThing 23 | 24 | 2. AI Processing 25 | 26 | - Transcribe videos using OpenAI's Whisper API 27 | - Summarize transcriptions into a 2,000-word summary using GPT-4 28 | 29 | 3. Prompt Configuration 30 | 31 | - Create and edit prompts for different social media platforms 32 | 33 | 4. Content Generation 34 | 35 | - Generate platform-specific posts based on video summaries and configured prompts 36 | 37 | 5. Results Management 38 | 39 | - View and copy generated content for each platform 40 | 41 | 6. Job Queue System 42 | - Manage and track the status of processing jobs 43 | 44 | ## High-Level Technical Stack 45 | 46 | 1. Frontend: 47 | 48 | - Next.js with ShadCN UI components 49 | - Clerk for authentication 50 | 51 | 2. Backend: 52 | 53 | - Next.js API routes for main application logic 54 | - Flask backend for AI processing tasks 55 | 56 | 3. Database: 57 | 58 | - PostgreSQL with Drizzle ORM 59 | 60 | 4. File Storage: 61 | 62 | - UploadThing for video storage 63 | 64 | 5. AI Services: 65 | - OpenAI APIs (Whisper for transcription, GPT-4 for summarization and content generation) 66 | 67 | ## Conceptual Data Model 68 | 69 | 1. User 70 | 71 | - ID 72 | - Name 73 | - Email 74 | 75 | 2. Project 76 | 77 | - ID 78 | - Title 79 | - CreationDate 80 | - Status 81 | 82 | 3. VideoClip 83 | 84 | - ID 85 | - ProjectID 86 | - FileName 87 | - UploadThingURL 88 | 89 | 4. Transcription 90 | 91 | - ID 92 | - VideoClipID 93 | - Content 94 | 95 | 5. Summary 96 | 97 | - ID 98 | - ProjectID 99 | - Content 100 | 101 | 6. Prompt 102 | 103 | - ID 104 | - ProjectID 105 | - Platform 106 | - Content 107 | 108 | 7. GeneratedPost 109 | 110 | - ID 111 | - ProjectID 112 | - Platform 113 | - Content 114 | 115 | 8. Job 116 | - ID 117 | - ProjectID 118 | - Type (Transcription, Summarization, PostGeneration) 119 | - Status (Ready, Running, Completed, Failed) 120 | - CreationDate 121 | 122 | ## User Interface Design Principles 123 | 124 | 1. Clean and intuitive design using ShadCN components 125 | 2. Clear separation of different stages (Upload, Config, Run, Result) 126 | 3. Easy-to-use drag-and-drop interface for video uploads 127 | 4. Simple text areas for prompt configuration 128 | 5. Clear display of job status and progress 129 | 6. Easy-to-copy generated content in the Results stage 130 | 131 | ## Security Considerations 132 | 133 | 1. User authentication and authorization using Clerk 134 | 2. Secure handling of API keys for OpenAI and UploadThing 135 | 3. Proper data sanitization and validation for user inputs 136 | 4. Secure storage of sensitive information (e.g., transcriptions, summaries) 137 | 138 | ## Development Phases 139 | 140 | 1. Phase 1: Project Setup and Basic Infrastructure 141 | 142 | - Set up Next.js project using app directory with ShadCN 143 | - Implement Clerk authentication 144 | - Set up PostgreSQL database and Drizzle ORM 145 | - Implement basic project management (create, list, view) 146 | 147 | 2. Phase 2: Video Upload and Storage 148 | 149 | - Integrate UploadThing for video storage 150 | - Implement video upload functionality 151 | - Create video clip management interface 152 | 153 | 3. Phase 3: AI Processing Integration 154 | 155 | - Set up Flask backend for AI tasks 156 | - Integrate OpenAI APIs (Whisper and GPT-4) 157 | - Implement transcription and summarization logic 158 | 159 | 4. Phase 4: Prompt Configuration and Content Generation 160 | 161 | - Create prompt configuration interface 162 | - Implement content generation logic using GPT-4 163 | - Develop job queue system for processing runs 164 | 165 | 5. Phase 5: Results Management and UI Refinement 166 | 167 | - Create results display interface 168 | - Implement copy-to-clipboard functionality 169 | - Refine overall user interface and experience 170 | 171 | 6. Phase 6: Testing, Optimization, and Deployment 172 | - Conduct thorough testing of all features 173 | - Optimize performance and resource usage 174 | - Prepare for deployment and launch 175 | 176 | ## Potential Challenges and Solutions 177 | 178 | 1. Challenge: Handling large video files 179 | Solution: Implement chunked uploads and processing 180 | 181 | 2. Challenge: Managing long-running AI tasks 182 | Solution: Implement robust job queue system with status updates 183 | 184 | 3. Challenge: Ensuring accuracy of AI-generated content 185 | Solution: Implement review and editing features for generated content 186 | 187 | 4. Challenge: Scalability of the system 188 | Solution: Design with scalability in mind, consider serverless architecture for AI processing 189 | 190 | ## Future Expansion Possibilities 191 | 192 | 1. Direct integration with social media platforms for posting 193 | 2. Support for additional content types (e.g., audio, images) 194 | 3. Advanced analytics and performance tracking for generated content 195 | 4. Collaborative features for team-based content creation 196 | 5. Custom AI model fine-tuning for improved summarization and content generation 197 | --------------------------------------------------------------------------------