Merge pull request #271 from yamadashy/feat/website-docs-tips

docs(website): Add tips

website/client/.vitepress/config.mts

@@ -33,7 +33,13 @@ export default defineConfig({
             { text: 'Command Line Options', link: '/guide/command-line-options' },
             { text: 'Remote Repository Processing', link: '/guide/remote-repository-processing' },
             { text: 'Configuration', link: '/guide/configuration' },
+            { text: 'Custom Instructions', link: '/guide/custom-instructions' },
+            { text: 'Comment Removal', link: '/guide/comment-removal' },
             { text: 'Security', link: '/guide/security' },
+            {
+              text: 'Tips & Tricks',
+              items: [{ text: 'Best Practices', link: '/guide/tips/best-practices' }],
+            },
             {
               text: 'Development',
               items: [

website/client/guide/comment-removal.md

@@ -0,0 +1,54 @@
+
+# Comment Removal
+
+Repomix can automatically remove comments from your codebase when generating the output file. This can help reduce noise and focus on the actual code.
+
+## Usage
+
+To enable comment removal, set the `removeComments` option to `true` in your `repomix.config.json`:
+
+```json
+{
+  "output": {
+    "removeComments": true
+  }
+}
+```
+
+## Supported Languages
+
+Repomix supports comment removal for a wide range of programming languages, including:
+
+- JavaScript/TypeScript (`//`, `/* */`)
+- Python (`#`, `"""`, `'''`)
+- Java (`//`, `/* */`)
+- C/C++ (`//`, `/* */`)
+- HTML (`<!-- -->`)
+- CSS (`/* */`)
+- And many more...
+
+## Example
+
+Given the following JavaScript code:
+
+```javascript
+// This is a single-line comment
+function test() {
+  /* This is a
+     multi-line comment */
+  return true;
+}
+```
+
+With comment removal enabled, the output will be:
+
+```javascript
+function test() {
+  return true;
+}
+```
+
+## Notes
+
+- Comment removal is performed before other processing steps, such as line number addition.
+- Some comments, such as JSDoc comments, may be preserved depending on the language and context.

website/client/guide/custom-instructions.md

@@ -0,0 +1,44 @@
+# Custom Instructions
+
+Repomix allows you to provide custom instructions that will be included in the output file. This can be useful for adding context or specific guidelines for AI systems processing the repository.
+
+## Usage
+
+To include a custom instruction, create a markdown file (e.g., `repomix-instruction.md`) in the root of your repository. Then, specify the path to this file in your `repomix.config.json`:
+
+```json
+{
+  "output": {
+    "instructionFilePath": "repomix-instruction.md"
+  }
+}
+```
+
+The content of this file will be included in the output under the "Instruction" section.
+
+## Example
+
+```markdown
+# Repository Instructions
+
+This repository contains the source code for the Repomix tool. Please follow these guidelines when analyzing the code:
+
+1. Focus on the core functionality in the `src/core` directory.
+2. Pay special attention to the security checks in `src/core/security`.
+3. Ignore any files in the `tests` directory.
+```
+
+This will result in the following section in the output:
+
+```xml
+<instruction>
+# Repository Instructions
+
+This repository contains the source code for the Repomix tool. Please follow these guidelines when analyzing the code:
+
+1. Focus on the core functionality in the `src/core` directory.
+2. Pay special attention to the security checks in `src/core/security`.
+3. Ignore any files in the `tests` directory.
+</instruction>
+```
+

website/client/guide/tips/best-practices.md

@@ -0,0 +1,75 @@
+# Best Practices for AI-Assisted Development: A Modular Approach
+
+Although I haven’t successfully completed a large-scale development project using AI, I can share my current perspective as a starting point. The key is to begin with core functionality and gradually expand, while maintaining a modular design.
+
+## 1. **Start Small and Focus on Core Functionality**
+
+When working with AI, it’s crucial to start with the core functionality of your project. Trying to tackle too many features or domains at once can lead to unexpected and often incorrect code. AI models, while powerful, can struggle when asked to handle multiple interconnected domains simultaneously.
+
+### Why This Works:
+- **Reduced Complexity**: By focusing on one core feature at a time, you minimize the risk of the AI producing convoluted or incorrect code.
+- **Easier Debugging**: Smaller, focused tasks are easier to debug and refine, both for you and the AI.
+- **Iterative Improvement**: Starting small allows you to iteratively build and improve your project, ensuring each component works as expected before moving on to the next.
+
+## 2. **Adopt a Modular Design**
+
+One of the most effective strategies when working with AI is to adopt a **modular design**. Break your project into smaller, self-contained modules that can be developed and tested independently.
+
+### Benefits of Modular Design:
+- **Clear Boundaries**: Each module has a well-defined purpose and interface, making it easier for the AI to generate correct and relevant code.
+- **Reusability**: Modular components can be reused across different parts of the project, reducing redundancy and improving consistency.
+- **Easier Maintenance**: When issues arise, they can be isolated to specific modules, making debugging and updates more manageable.
+
+### Example:
+Instead of asking the AI to generate an entire web application at once, break it down into modules like:
+- **Authentication Module**
+- **Database Interface Module**
+- **User Interface Components**
+
+## 3. **Avoid Overlapping Domains**
+
+In my experience, when you ask generative AI to handle multiple domains simultaneously (e.g., frontend, backend, and database logic), it often produces unexpected or incorrect code. Correcting these issues through dialogue can be extremely challenging.
+
+### Best Practice:
+- **Separate Concerns**: Clearly separate different domains (e.g., frontend, backend, database) and work on them independently.
+- **Use AI for Specific Tasks**: Instead of asking the AI to handle everything, use it for specific, well-defined tasks within a single domain.
+
+## 4. **Plan First, Code Later**
+
+For slightly larger-scale tasks, it can be effective to first consult with the AI about the overall plan. Have the AI help you compile the specifications and design the architecture before diving into coding.
+
+### Steps:
+1. **Consult with AI**: Discuss the project requirements and goals with the AI to create a high-level plan.
+2. **Generate Specifications**: Use the AI to generate detailed specifications or pseudocode for each module.
+3. **Implement Separately**: Use the specifications to update the project in a separate chat or session. This ensures that the AI focuses on one task at a time.
+
+### Why This Works:
+- **Clear Direction**: Having a well-defined plan reduces the risk of the AI going off-track.
+- **Better Quality**: The AI produces more accurate and relevant code when it has clear instructions.
+- **Easier Adjustments**: If the output isn’t perfect, it’s easier to make adjustments when you have a clear plan to refer to.
+
+## 5. **Human Oversight is Essential**
+
+While AI can significantly speed up development, the quality of its output is typically moderate and requires human adjustment. However, even with these adjustments, using AI is often faster than writing everything from scratch.
+
+### Best Practices for Human Oversight:
+- **Review AI Output**: Always review the code generated by the AI to ensure it meets your standards and requirements.
+- **Refine and Optimize**: Use your expertise to refine and optimize the AI-generated code.
+- **Iterate**: Work in iterations, continuously improving the codebase with each cycle.
+
+## 6. **Leverage AI for Repetitive Tasks**
+
+AI excels at handling repetitive or boilerplate tasks, such as:
+- Generating CRUD (Create, Read, Update, Delete) operations.
+- Writing unit tests.
+- Creating documentation.
+
+By offloading these tasks to the AI, you can focus on more complex and creative aspects of your project.
+
+## Conclusion
+
+AI-assisted development can be a powerful tool, but it requires a thoughtful and structured approach. By starting small, adopting a modular design, and planning ahead, you can maximize the effectiveness of AI while minimizing the risk of errors. Remember, human oversight is essential to ensure the final output meets your standards.
+
+While AI can’t replace human developers, it can significantly accelerate the development process, allowing you to focus on higher-level tasks and creative problem-solving. With these best practices in mind, you’ll be well-equipped to tackle your next project with AI as your assistant.
+
+Happy coding! 🚀