LLM Code Generating Prompts by Parker Rex

gistfile1.txt

## For Generating Pixel Perfect Clones
Create an exact, pixel-perfect replication of this user interface in code. Your task is to deliver a 100% accurate copy, down to the last pixel, with no omissions, missing styles, or overlooked details. Every element—spacing, alignment, colors, and typography—must match perfectly. The final output will be compared side-by-side with the provided card to evaluate the accuracy. Use tailwindcss, typescript, framer motion, and shadcn. 

Think systematically. First, restate the task in your own words to confirm understanding. Then, proceed step by step through the implementation, ensuring that no feature or styling is left out. Do not add placeholders, stubs, or assumptions—this must be a fully complete solution. The expectation is that there will be zero adjustments required.

You will be graded strictly on pixel-perfect fidelity, and this performance will determine your eligibility for a $1000 bonus if achieved on the first try. Now, restate the problem and begin your implementation.



## Analysis with Mermaid
As a senior React/TypeScript/Next.js App Router/Supabase engineer, please analyze the following files:

1. @CalendarContext.tsx 
2. @CalendarGrid.tsx 
3. @mutations 
4. @queries 

Based on these files, please create the following analysis inside a new file in our docs folder.

1. A detailed mermaid sequence diagram showing all processes, connections, and dependencies for each file. Include user interactions, server actions, database operations, API calls, and any other relevant operations. Use appropriate symbols to represent different types of operations and connections.

2. A numbered list explaining each component and connection in the flow diagram, including:
   - What happens in each file
   - How data is transformed or passed between components
   - Any external dependencies or services used
   - Key functions or methods and their purposes
   - Data flow and state management strategies employed

3. Identify at least 3 areas for improvement in the code, providing specific recommendations for each. Consider aspects such as:
   - Code organization and modularity
   - Error handling and edge cases
   - Performance optimizations
   - Type safety and TypeScript best practices
   - React and Next.js patterns and best practices
   - Data flow and state management
   - API integration and data fetching strategies
   - Scalability and maintainability
   - Security considerations
   - Testing strategies

For each recommendation, please provide:
   a) The specific file and area of code that could be improved
   b) A detailed explanation of the issue and why it's problematic
   c) A code snippet or pseudocode demonstrating the recommended improvement
   d) The benefits of implementing this change

Please ensure your analysis is thorough and your recommendations are specific and actionable, reflecting the expertise of a senior engineer in this tech stack.

## Analyze and Refactor
Analyze this React component and refactor it to follow best practices with proper separation of concerns. Your task is to: 
1. ANALYZE: - First analyze where logic could be separated - Explain your refactoring plan - List all new files that will be created - Think step-by-step about dependencies between the pieces 2. CREATE NEW FILES: For each piece of separated logic, create complete files for: 
A. UI COMPONENTS - Break large components into smaller, focused ones - Extract reusable UI elements - Keep components focused on presentation - Follow atomic design principles - Put in src/components/{feature}/ 
B. CUSTOM HOOKS - Extract complex state management - Group related state/effects - Move API/data fetching logic - Create hooks for reusable behaviors - Put in src/hooks/{feature}/ 
C. UTILITIES - Move pure functions to utils - Extract complex calculations - Create formatting helpers - Separate business logic - Put in src/utils/{feature}/ 
D. SERVER ACTIONS - Move API/DB operations - Separate mutations/queries - Handle data transformation - Keep consistent error handling - Put in src/actions/{feature}/ 
E. TYPES - Extract shared interfaces - Create prop types - Define state types - Put in src/types/{feature}/ 
3. SHOW REFACTORED COMPONENT: 
- Show the cleaned up original component 
- Demonstrate how it uses the new pieces - Keep it focused on UI/presentation 
- Show proper imports 
4. FOLLOW PROJECT PATTERNS: 
- Use existing hooks like useCalendar 
- Follow established naming 
- Match file organization 
- Use cn() for classNames 
- Use existing types/utils 
- Match error handling 
- Match loading states 
- Match data fetching 


The final result should have: 
- Pure components (minimal side effects) 
- Focused logic (single responsibility) 
- Reusable abstractions 
- Clear separation of concerns 
- Type safety 
- Integration with existing patterns 
- Maintainable organization 

Show the complete code for every new file and the refactored component. Explain any new patterns applied. Ensure the refactored code integrates seamlessly with the existing codebase while improving its organization and maintainability. 

Here's the code to refactor:


## Architect Generating Tickets

You are an expert architect engineer tasked with providing direction to an editor engineer for implementing new features. Your goal is to create a detailed plan and break down the work into manageable tickets. Follow these steps:

1. Review the change request:
<change_request>
{{CHANGE_REQUEST}}
</change_request>

2. Study the current code structure:
<current_code>
{{CURRENT_CODE}}
</current_code>

3. Familiarize yourself with the database types and domain-specific types:
<database_types>
{{DATABASE_TYPES}}
</database_types>

<calendar_types>
{{CALENDAR_TYPES}}
</calendar_types>

4. Create a list of tickets for the work, breaking down the change request into smaller, manageable tasks. Each ticket should be concise yet descriptive, following this format:
<ticket>
- Title: [Brief description of the task]
- Description: [Detailed explanation of what needs to be done]
- Estimated complexity: [Low/Medium/High]
</ticket>

5. For each ticket, provide architectural direction and implementation guidelines. Be clear, unambiguous, and complete in your instructions. Include:
   a. Which files need to be modified
   b. What changes need to be made
   c. Any new functions, classes, or components that need to be created
   d. How the changes integrate with the existing codebase

6. If database changes are required, create a separate ticket for writing a migration script using PostgreSQL. Do not modify the existing database types.

7. When describing code changes:
   a. Explain the modifications clearly and completely, but concisely
   b. Show only the changes needed, not the entire updated function or file
   c. Use code snippets when necessary, enclosed in <code> tags

8. Provide your response in the same language as the change request.

9. After creating all tickets and providing implementation guidelines, summarize the overall approach and any important considerations for the editor engineer.

Present your complete response within <architect_plan> tags, structuring it as follows:
<architect_plan>
<summary>
[Overall summary of the approach and important considerations]
</summary>

<tickets>
[List all tickets here, following the format specified in step 4]
</tickets>

<implementation_guidelines>
[Provide detailed implementation guidelines for each ticket, following the instructions in steps 5-7]
</implementation_guidelines>
</architect_plan>

## Extraction Reusable Components

You are tasked with extracting components from a TypeScript/React/Next.js app router / Supabase code snippet. Your goal is to improve the code structure by separating it into reusable components while maintaining functionality. Follow these instructions carefully:

1. Analyze the following code:

<code>
{{CODE}}
</code>

2. Extract components from the code above by following these steps:
   a. Identify logical sections of the code that can be separated into components.
   b. Create new functional components for these sections.
   c. Ensure that props are properly passed to the new components.
   d. Update the main component to use the newly created components.

3. Apply DRY (Don't Repeat Yourself) principles:
   a. Identify any repeated code patterns.
   b. Create reusable functions or components for these patterns.
   c. Replace the repeated code with calls to the new functions or components.

4. Follow the single responsibility pattern:
   a. Ensure each component or function has a clear, single purpose.
   b. If a component is doing too much, consider breaking it down further.

5. Present your extracted components in the following format:
   a. Start each component with a comment describing its purpose.
   b. Use consistent naming conventions for components and functions.
   c. Order the components logically, with more general components first.

6. After presenting the extracted components, provide a brief explanation of the changes you made and how they improve the code structure.

Please begin by analyzing the code and extracting components as instructed. Present your solution within <extracted_components> tags, followed by your explanation within <explanation> tags

## For Analyzing a Directory and Fixing Linting Errors
You are tasked with documenting a folder of files and identifying necessary changes based on linting errors. Your goal is to create comprehensive documentation that explains what each type/function does, provides examples where helpful, explains the "why" behind design decisions, and makes it easier for new team members to understand the code. You should follow Google's jsdoc documentation style for consistency.

First, you will be provided with the content of the code folder:

<code_folder>
{{CODE_FOLDER}}
</code_folder>

Next, you will be given the linting errors:

<linting_errors>
{{LINTING_ERRORS}}
</linting_errors>

Please follow these steps to complete the task:

1. Analyze the code and linting errors:
   - Read through all the files in the code folder.
   - Review the linting errors and understand which parts of the code they refer to.

2. Document each file:
   - For each file, create a documentation section.
   - Explain the purpose of the file and its role in the overall project.
   - Document each type, class, and function within the file.
   - Use clear and concise language to describe what each element does.

3. Explain design decisions:
   - For important or complex parts of the code, explain the reasoning behind the design choices.
   - Discuss any patterns or architectural decisions that are crucial for understanding the codebase.

4. Provide examples:
   - Where appropriate, include code examples to illustrate how to use specific functions or classes.
   - Ensure that the examples are clear, concise, and demonstrate typical use cases.

5. Follow Google's jsdoc documentation style:
   - Use appropriate jsdoc tags for documenting parameters, return values, types, etc.
   - Maintain consistency in formatting and style throughout the documentation.

6. Identify necessary changes:
   - Based on the linting errors, identify the changes that need to be made to improve the code.
   - Explain why each change is necessary and how it will improve the code quality or functionality.

7. Format your output:
   - Present your documentation and suggested changes in a clear, organized manner.
   - Use appropriate headings and subheadings to structure the information.

Please provide your complete documentation and analysis within <documentation> tags. Include a separate section for suggested changes based on linting errors within <suggested_changes> tags.

Remember to focus on making the documentation helpful for new team members to understand the code quickly and easily. Your goal is to create clear, comprehensive, and consistent documentation that follows best practices and improves the overall quality of the codebase.


## For Explaining a File

You are an experienced software engineer tasked with explaining a code file to a fellow engineer over the phone. Your goal is to provide a clear, casual, yet technically accurate breakdown of the file's purpose, functionality, and potential improvements.

Here's the content of the code file you need to analyze:

<code_file>
{{CODE_FILE}}
</code_file>

Carefully examine the code above and prepare an explanation that covers the following aspects:

1. Context: Describe what the file does and how it's currently used within the project. If it interacts with other parts of the system, make sure to highlight that.

2. Potential Use Cases: Discuss how this file or its functionality could be expanded or repurposed in the future. Think creatively about ways it might add more value to the project.

3. Improvements: Identify any weaknesses, potential optimizations, or cleaner ways to implement the logic. Suggest any refactoring or restructuring that might be worth considering.

4. Responsibilities: Explain the primary job of this file in the larger codebase. Determine if it serves a single purpose or if it's handling multiple tasks.

When crafting your explanation, follow these guidelines:

- Keep the tone casual and conversational, as if you're chatting with a friend who's also a skilled engineer.
- Use technical language appropriate for an experienced developer, but don't hesitate to include analogies or references if they help clarify complex concepts.
- Be concise while ensuring all important points are covered.
- Feel free to use humor or informal expressions where appropriate, but maintain a professional undertone.

Structure your response using the following XML tags:

<context>Explain the file's purpose and current usage</context>

<use_cases>Discuss potential future applications or expansions</use_cases>

<improvements>Suggest optimizations or refactoring opportunities</improvements>

<responsibilities>Clarify the file's primary role in the codebase</responsibilities>

Begin your explanation with a brief introduction, then proceed with the structured breakdown. Remember to maintain a conversational tone throughout, as if you're speaking to your engineer buddy over the phone.

## For Generating TSDocs

You are an AI assistant tasked with adding TSdocs (@tsDocs ) comments to a piece of code to make it more understandable for AI systems or human developers. Your goal is to analyze the code and add appropriate comments that explain its functionality, structure, and important considerations.  
  
Here is the code you need to comment:  
  
<code>  
@hooks  
</code>  
  
To complete this task, follow these steps:  
  
1. Carefully analyze the code to understand its structure and functionality.  
2. Identify key components such as functions, classes, loops, conditionals, and any complex logic.  
3. Add comments that explain:  
- The purpose of functions, classes, or code blocks  
- How complex algorithms or logic work  
- Any assumptions or limitations in the code  
- The meaning of important variables or data structures  
- Any potential edge cases or error handling  
  
When adding comments, adhere to these guidelines:  
  
- Use clear and concise language  
- Avoid stating the obvious (e.g., don't just restate what the code does)  
- Focus on the "why" and "how" rather than just the "what"  
- Use TSDoc style comments for functions, classes, and modules  
- Use single-line comments (//) for brief in-line explanations  
- Use multi-line comments (/* */) for longer explanations that don't fit TSDoc style  
  
Your output should be the original code with your added comments. Make sure to preserve the original code's formatting and structure. Present your commented code inside <commented_code> tags.  
  
Remember, the goal is to make the code more understandable without changing its functionality. Your comments should provide insight into the code's purpose, logic, and any important considerations for future developers or AI systems working with this code.