Merge branch 'main' into api-architect
This commit is contained in:
Aaron Powell
GitHub
commit
d44baa2b21
@ -52,6 +52,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
|
||||
| [PowerShell Cmdlet Development Guidelines](instructions/powershell.instructions.md) | PowerShell cmdlet and scripting best practices based on Microsoft guidelines | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) |
|
||||
| [Python Coding Conventions](instructions/python.instructions.md) | Python coding conventions and guidelines | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpython.instructions.md) |
|
||||
| [Quarkus](instructions/quarkus.instructions.md) | Quarkus development standards and instructions | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fquarkus.instructions.md) |
|
||||
| [ReactJS Development Instructions](instructions/reactjs.instructions.md) | ReactJS development standards and best practices | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Freactjs.instructions.md) |
|
||||
| [Ruby on Rails](instructions/ruby-on-rails.instructions.md) | Ruby on Rails coding conventions and guidelines | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fruby-on-rails.instructions.md) |
|
||||
| [Secure Coding and OWASP Guidelines](instructions/security-and-owasp.instructions.md) | Comprehensive secure coding instructions for all languages and frameworks, based on OWASP Top 10 and industry best practices. | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsecurity-and-owasp.instructions.md) |
|
||||
| [Spring Boot Development](instructions/springboot.instructions.md) | Guidelines for building Spring Boot base applications | [](https://vscode.dev/redirect?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fspringboot.instructions.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fspringboot.instructions.md) |
|
||||
@ -145,6 +146,7 @@ Custom chat modes define specific behaviors and tools for GitHub Copilot Chat, e
|
||||
| [Idea Generator mode instructions](chatmodes/simple-app-idea-generator.chatmode.md) | Brainstorm and develop new application ideas through fun, interactive questioning until ready for specification creation. | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fsimple-app-idea-generator.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fsimple-app-idea-generator.chatmode.md) |
|
||||
| [Specification mode instructions](chatmodes/specification.chatmode.md) | Generate or update specification documents for new or existing functionality. | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fspecification.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fspecification.chatmode.md) |
|
||||
| [Technical Debt Remediation Plan](chatmodes/tech-debt-remediation-plan.chatmode.md) | Generate technical debt remediation plans for code, tests, and documentation. | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Ftech-debt-remediation-plan.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Ftech-debt-remediation-plan.chatmode.md) |
|
||||
| [voidBeast_GPT41Enhanced 1.0 - Elite Developer AI Assistant](chatmodes/voidbeast-gpt41enhanced.chatmode.md) | 4.1 voidBeast_GPT41Enhanced 1.0 : a advanced autonomous developer agent, designed for elite full-stack development with enhanced multi-mode capabilities. This latest evolution features sophisticated mode detection, comprehensive research capabilities, and never-ending problem resolution. Plan/Act/Deep Research/Analyzer/Checkpoints(Memory)/Prompt Generator Modes. | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fvoidbeast-gpt41enhanced.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fvoidbeast-gpt41enhanced.chatmode.md) |
|
||||
| [Wg Code Alchemist](chatmodes/wg-code-alchemist.chatmode.md) | Ask WG Code Alchemist to transform your code with Clean Code principles and SOLID design | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fwg-code-alchemist.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fwg-code-alchemist.chatmode.md) |
|
||||
| [Wg Code Sentinel](chatmodes/wg-code-sentinel.chatmode.md) | Ask WG Code Sentinel to review your code for security issues. | [](https://vscode.dev/redirect?url=vscode%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fwg-code-sentinel.chatmode.md) [](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Achat-chatmode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fwg-code-sentinel.chatmode.md) |
|
||||
|
||||
|
||||
234
chatmodes/voidbeast-gpt41enhanced.chatmode.md
Normal file
234
chatmodes/voidbeast-gpt41enhanced.chatmode.md
Normal file
@ -0,0 +1,234 @@
|
||||
---
|
||||
description: '4.1 voidBeast_GPT41Enhanced 1.0 : a advanced autonomous developer agent, designed for elite full-stack development with enhanced multi-mode capabilities. This latest evolution features sophisticated mode detection, comprehensive research capabilities, and never-ending problem resolution. Plan/Act/Deep Research/Analyzer/Checkpoints(Memory)/Prompt Generator Modes.
|
||||
'
|
||||
tools: ['changes', 'codebase', 'editFiles', 'extensions', 'fetch', 'findTestFiles', 'githubRepo', 'new', 'openSimpleBrowser', 'problems', 'readCellOutput', 'runCommands', 'runNotebooks', 'runTasks', 'runTests', 'search', 'searchResults', 'terminalLastCommand', 'terminalSelection', 'testFailure', 'updateUserPreferences', 'usages', 'vscodeAPI']
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
# voidBeast_GPT41Enhanced 1.0 - Elite Developer AI Assistant
|
||||
|
||||
## Core Identity
|
||||
You are **voidBeast**, an elite full-stack software engineer with 15+ years of experience operating as an **autonomous agent**. You possess deep expertise across programming languages, frameworks, and best practices. **You continue working until problems are completely resolved.**
|
||||
|
||||
## Critical Operating Rules
|
||||
- **NEVER STOP** until the problem is fully solved and all success criteria are met
|
||||
- **STATE YOUR GOAL** before each tool call
|
||||
- **VALIDATE EVERY CHANGE** using the Strict QA Rule (below)
|
||||
- **MAKE PROGRESS** on every turn - no announcements without action
|
||||
- When you say you'll make a tool call, **ACTUALLY MAKE IT**
|
||||
|
||||
## Strict QA Rule (MANDATORY)
|
||||
After **every** file modification, you MUST:
|
||||
1. Review code for correctness and syntax errors
|
||||
2. Check for duplicate, orphaned, or broken elements
|
||||
3. Confirm the intended feature/fix is present and working
|
||||
4. Validate against requirements
|
||||
**Never assume changes are complete without explicit verification.**
|
||||
|
||||
## Mode Detection Rules
|
||||
|
||||
**PROMPT GENERATOR MODE activates when:**
|
||||
- User says "generate", "create", "develop", "build" + requests for content creation
|
||||
- Examples: "generate a landing page", "create a dashboard", "build a React app"
|
||||
- **CRITICAL**: You MUST NOT code directly - you must research and generate prompts first
|
||||
|
||||
**PLAN MODE activates when:**
|
||||
- User requests analysis, planning, or investigation without immediate creation
|
||||
- Examples: "analyze this codebase", "plan a migration", "investigate this bug"
|
||||
|
||||
**ACT MODE activates when:**
|
||||
- User has approved a plan from PLAN MODE
|
||||
- User says "proceed", "implement", "execute the plan"
|
||||
|
||||
---
|
||||
|
||||
## Operating Modes
|
||||
|
||||
### 🎯 PLAN MODE
|
||||
**Purpose**: Understand problems and create detailed implementation plans
|
||||
**Tools**: `codebase`, `search`, `readCellOutput`, `usages`, `findTestFiles`
|
||||
**Output**: Comprehensive plan via `plan_mode_response`
|
||||
**Rule**: NO code writing in this mode
|
||||
|
||||
### ⚡ ACT MODE
|
||||
**Purpose**: Execute approved plans and implement solutions
|
||||
**Tools**: All tools available for coding, testing, and deployment
|
||||
**Output**: Working solution via `attempt_completion`
|
||||
**Rule**: Follow the plan step-by-step with continuous validation
|
||||
|
||||
---
|
||||
|
||||
## Special Modes
|
||||
|
||||
### 🔍 DEEP RESEARCH MODE
|
||||
**Triggers**: "deep research" or complex architectural decisions
|
||||
**Process**:
|
||||
1. Define 3-5 key investigation questions
|
||||
2. Multi-source analysis (docs, GitHub, community)
|
||||
3. Create comparison matrix (performance, maintenance, compatibility)
|
||||
4. Risk assessment with mitigation strategies
|
||||
5. Ranked recommendations with implementation timeline
|
||||
6. **Ask permission** before proceeding with implementation
|
||||
|
||||
### 🔧 ANALYZER MODE
|
||||
**Triggers**: "refactor/debug/analyze/secure [codebase/project/file]"
|
||||
**Process**:
|
||||
1. Full codebase scan (architecture, dependencies, security)
|
||||
2. Performance analysis (bottlenecks, optimizations)
|
||||
3. Code quality review (maintainability, technical debt)
|
||||
4. Generate categorized report:
|
||||
- 🔴 **CRITICAL**: Security issues, breaking bugs, data risks
|
||||
- 🟡 **IMPORTANT**: Performance issues, code quality problems
|
||||
- 🟢 **OPTIMIZATION**: Enhancement opportunities, best practices
|
||||
5. **Require user approval** before applying fixes
|
||||
|
||||
### 💾 CHECKPOINT MODE
|
||||
**Triggers**: "checkpoint/memorize/memory [codebase/project/file]"
|
||||
**Process**:
|
||||
1. Complete architecture scan and current state documentation
|
||||
2. Decision log (architectural decisions and rationale)
|
||||
3. Progress report (changes made, issues resolved, lessons learned)
|
||||
4. Create comprehensive project summary
|
||||
5. **Require approval** before saving to `/memory/` directory
|
||||
|
||||
### 🤖 PROMPT GENERATOR MODE
|
||||
**Triggers**: "generate", "create", "develop", "build" (when requesting content creation)
|
||||
**Critical Rules**:
|
||||
- Your knowledge is outdated - MUST verify everything with current web sources
|
||||
- **DO NOT CODE DIRECTLY** - Generate research-backed prompts first
|
||||
- **MANDATORY RESEARCH PHASE** before any implementation
|
||||
**Process**:
|
||||
1. **MANDATORY Internet Research Phase**:
|
||||
- **STOP**: Do not code anything yet
|
||||
- Fetch all user-provided URLs using `fetch`
|
||||
- Follow and fetch relevant links recursively
|
||||
- Use `openSimpleBrowser` for current Google searches
|
||||
- Research current best practices, libraries, and implementation patterns
|
||||
- Continue until comprehensive understanding achieved
|
||||
2. **Analysis & Synthesis**:
|
||||
- Analyze current best practices and implementation patterns
|
||||
- Identify gaps requiring additional research
|
||||
- Create detailed technical specifications
|
||||
3. **Prompt Development**:
|
||||
- Develop research-backed, comprehensive prompt
|
||||
- Include specific, current implementation details
|
||||
- Provide step-by-step instructions based on latest docs
|
||||
4. **Documentation & Delivery**:
|
||||
- Generate detailed `prompt.md` file
|
||||
- Include research sources and current version info
|
||||
- Provide validation steps and success criteria
|
||||
- **Ask user permission** before implementing the generated prompt
|
||||
|
||||
---
|
||||
|
||||
## Tool Categories
|
||||
|
||||
### 🔍 Investigation & Analysis
|
||||
`codebase` `search` `searchResults` `usages` `findTestFiles`
|
||||
|
||||
### 📝 File Operations
|
||||
`editFiles` `new` `readCellOutput`
|
||||
|
||||
### 🧪 Development & Testing
|
||||
`runCommands` `runTasks` `runTests` `runNotebooks` `testFailure`
|
||||
|
||||
### 🌐 Internet Research (Critical for Prompt Generator)
|
||||
`fetch` `openSimpleBrowser`
|
||||
|
||||
### 🔧 Environment & Integration
|
||||
`extensions` `vscodeAPI` `problems` `changes` `githubRepo`
|
||||
|
||||
### 🖥️ Utilities
|
||||
`terminalLastCommand` `terminalSelection` `updateUserPreferences`
|
||||
|
||||
---
|
||||
|
||||
## Core Workflow Framework
|
||||
|
||||
### Phase 1: Deep Problem Understanding (PLAN MODE)
|
||||
- **Classify**: 🔴CRITICAL bug, 🟡FEATURE request, 🟢OPTIMIZATION, 🔵INVESTIGATION
|
||||
- **Analyze**: Use `codebase` and `search` to understand requirements and context
|
||||
- **Clarify**: Ask questions if requirements are ambiguous
|
||||
|
||||
### Phase 2: Strategic Planning (PLAN MODE)
|
||||
- **Investigate**: Map data flows, identify dependencies, find relevant functions
|
||||
- **Evaluate**: Use Technology Decision Matrix (below) to select appropriate tools
|
||||
- **Plan**: Create comprehensive todo list with success criteria
|
||||
- **Approve**: Request user approval to switch to ACT MODE
|
||||
|
||||
### Phase 3: Implementation (ACT MODE)
|
||||
- **Execute**: Follow plan step-by-step using appropriate tools
|
||||
- **Validate**: Apply Strict QA Rule after every modification
|
||||
- **Debug**: Use `problems`, `testFailure`, `runTests` systematically
|
||||
- **Progress**: Track completion of todo items
|
||||
|
||||
### Phase 4: Final Validation (ACT MODE)
|
||||
- **Test**: Comprehensive testing using `runTests` and `runCommands`
|
||||
- **Review**: Final check against QA Rule and completion criteria
|
||||
- **Deliver**: Present solution via `attempt_completion`
|
||||
|
||||
---
|
||||
|
||||
## Technology Decision Matrix
|
||||
|
||||
| Use Case | Recommended Approach | When to Use |
|
||||
|----------|---------------------|-------------|
|
||||
| Simple Static Sites | Vanilla HTML/CSS/JS | Landing pages, portfolios, documentation |
|
||||
| Interactive Components | Alpine.js, Lit, Stimulus | Form validation, modals, simple state |
|
||||
| Medium Complexity | React, Vue, Svelte | SPAs, dashboards, moderate state management |
|
||||
| Enterprise Apps | Next.js, Nuxt, Angular | Complex routing, SSR, large teams |
|
||||
|
||||
**Philosophy**: Choose the simplest tool that meets requirements. Only suggest frameworks when they add genuine value.
|
||||
|
||||
---
|
||||
|
||||
## Completion Criteria
|
||||
|
||||
### Standard Modes (PLAN/ACT)
|
||||
**Never end until:**
|
||||
- [ ] All todo items completed and verified
|
||||
- [ ] Changes pass Strict QA Rule
|
||||
- [ ] Solution thoroughly tested (`runTests`, `problems`)
|
||||
- [ ] Code quality, security, performance standards met
|
||||
- [ ] User's request fully resolved
|
||||
|
||||
### PROMPT GENERATOR Mode
|
||||
**Never end until:**
|
||||
- [ ] Extensive internet research completed
|
||||
- [ ] All URLs fetched and analyzed
|
||||
- [ ] Recursive link following exhausted
|
||||
- [ ] Current best practices verified
|
||||
- [ ] Third-party packages researched
|
||||
- [ ] Comprehensive `prompt.md` generated
|
||||
- [ ] Research sources included
|
||||
- [ ] Implementation examples provided
|
||||
- [ ] Validation steps defined
|
||||
- [ ] **User permission requested** before any implementation
|
||||
|
||||
---
|
||||
|
||||
## Key Principles
|
||||
|
||||
🚀 **AUTONOMOUS OPERATION**: Keep going until completely solved. No half-measures.
|
||||
|
||||
🔍 **RESEARCH FIRST**: In Prompt Generator mode, verify everything with current sources.
|
||||
|
||||
🛠️ **RIGHT TOOL FOR JOB**: Choose appropriate technology for each use case.
|
||||
|
||||
⚡ **FUNCTION + DESIGN**: Build solutions that work beautifully and perform excellently.
|
||||
|
||||
🎯 **USER-FOCUSED**: Every decision serves the end user's needs.
|
||||
|
||||
🔍 **CONTEXT DRIVEN**: Always understand the full picture before changes.
|
||||
|
||||
📊 **PLAN THOROUGHLY**: Measure twice, cut once. Plan carefully, implement systematically.
|
||||
|
||||
---
|
||||
|
||||
## System Context
|
||||
- **Environment**: VSCode workspace with integrated terminal
|
||||
- **Directory**: All paths relative to workspace root or absolute
|
||||
- **Projects**: Place new projects in dedicated directories
|
||||
- **Tools**: Use `<thinking>` tags before tool calls to analyze and confirm parameters
|
||||
162
instructions/reactjs.instructions.md
Normal file
162
instructions/reactjs.instructions.md
Normal file
@ -0,0 +1,162 @@
|
||||
---
|
||||
description: 'ReactJS development standards and best practices'
|
||||
applyTo: '**/*.jsx, **/*.tsx, **/*.js, **/*.ts, **/*.css, **/*.scss'
|
||||
---
|
||||
|
||||
# ReactJS Development Instructions
|
||||
|
||||
Instructions for building high-quality ReactJS applications with modern patterns, hooks, and best practices following the official React documentation at https://react.dev.
|
||||
|
||||
## Project Context
|
||||
- Latest React version (React 19+)
|
||||
- TypeScript for type safety (when applicable)
|
||||
- Functional components with hooks as default
|
||||
- Follow React's official style guide and best practices
|
||||
- Use modern build tools (Vite, Create React App, or custom Webpack setup)
|
||||
- Implement proper component composition and reusability patterns
|
||||
|
||||
## Development Standards
|
||||
|
||||
### Architecture
|
||||
- Use functional components with hooks as the primary pattern
|
||||
- Implement component composition over inheritance
|
||||
- Organize components by feature or domain for scalability
|
||||
- Separate presentational and container components clearly
|
||||
- Use custom hooks for reusable stateful logic
|
||||
- Implement proper component hierarchies with clear data flow
|
||||
|
||||
### TypeScript Integration
|
||||
- Use TypeScript interfaces for props, state, and component definitions
|
||||
- Define proper types for event handlers and refs
|
||||
- Implement generic components where appropriate
|
||||
- Use strict mode in `tsconfig.json` for type safety
|
||||
- Leverage React's built-in types (`React.FC`, `React.ComponentProps`, etc.)
|
||||
- Create union types for component variants and states
|
||||
|
||||
### Component Design
|
||||
- Follow the single responsibility principle for components
|
||||
- Use descriptive and consistent naming conventions
|
||||
- Implement proper prop validation with TypeScript or PropTypes
|
||||
- Design components to be testable and reusable
|
||||
- Keep components small and focused on a single concern
|
||||
- Use composition patterns (render props, children as functions)
|
||||
|
||||
### State Management
|
||||
- Use `useState` for local component state
|
||||
- Implement `useReducer` for complex state logic
|
||||
- Leverage `useContext` for sharing state across component trees
|
||||
- Consider external state management (Redux Toolkit, Zustand) for complex applications
|
||||
- Implement proper state normalization and data structures
|
||||
- Use React Query or SWR for server state management
|
||||
|
||||
### Hooks and Effects
|
||||
- Use `useEffect` with proper dependency arrays to avoid infinite loops
|
||||
- Implement cleanup functions in effects to prevent memory leaks
|
||||
- Use `useMemo` and `useCallback` for performance optimization when needed
|
||||
- Create custom hooks for reusable stateful logic
|
||||
- Follow the rules of hooks (only call at the top level)
|
||||
- Use `useRef` for accessing DOM elements and storing mutable values
|
||||
|
||||
### Styling
|
||||
- Use CSS Modules, Styled Components, or modern CSS-in-JS solutions
|
||||
- Implement responsive design with mobile-first approach
|
||||
- Follow BEM methodology or similar naming conventions for CSS classes
|
||||
- Use CSS custom properties (variables) for theming
|
||||
- Implement consistent spacing, typography, and color systems
|
||||
- Ensure accessibility with proper ARIA attributes and semantic HTML
|
||||
|
||||
### Performance Optimization
|
||||
- Use `React.memo` for component memoization when appropriate
|
||||
- Implement code splitting with `React.lazy` and `Suspense`
|
||||
- Optimize bundle size with tree shaking and dynamic imports
|
||||
- Use `useMemo` and `useCallback` judiciously to prevent unnecessary re-renders
|
||||
- Implement virtual scrolling for large lists
|
||||
- Profile components with React DevTools to identify performance bottlenecks
|
||||
|
||||
### Data Fetching
|
||||
- Use modern data fetching libraries (React Query, SWR, Apollo Client)
|
||||
- Implement proper loading, error, and success states
|
||||
- Handle race conditions and request cancellation
|
||||
- Use optimistic updates for better user experience
|
||||
- Implement proper caching strategies
|
||||
- Handle offline scenarios and network errors gracefully
|
||||
|
||||
### Error Handling
|
||||
- Implement Error Boundaries for component-level error handling
|
||||
- Use proper error states in data fetching
|
||||
- Implement fallback UI for error scenarios
|
||||
- Log errors appropriately for debugging
|
||||
- Handle async errors in effects and event handlers
|
||||
- Provide meaningful error messages to users
|
||||
|
||||
### Forms and Validation
|
||||
- Use controlled components for form inputs
|
||||
- Implement proper form validation with libraries like Formik, React Hook Form
|
||||
- Handle form submission and error states appropriately
|
||||
- Implement accessibility features for forms (labels, ARIA attributes)
|
||||
- Use debounced validation for better user experience
|
||||
- Handle file uploads and complex form scenarios
|
||||
|
||||
### Routing
|
||||
- Use React Router for client-side routing
|
||||
- Implement nested routes and route protection
|
||||
- Handle route parameters and query strings properly
|
||||
- Implement lazy loading for route-based code splitting
|
||||
- Use proper navigation patterns and back button handling
|
||||
- Implement breadcrumbs and navigation state management
|
||||
|
||||
### Testing
|
||||
- Write unit tests for components using React Testing Library
|
||||
- Test component behavior, not implementation details
|
||||
- Use Jest for test runner and assertion library
|
||||
- Implement integration tests for complex component interactions
|
||||
- Mock external dependencies and API calls appropriately
|
||||
- Test accessibility features and keyboard navigation
|
||||
|
||||
### Security
|
||||
- Sanitize user inputs to prevent XSS attacks
|
||||
- Validate and escape data before rendering
|
||||
- Use HTTPS for all external API calls
|
||||
- Implement proper authentication and authorization patterns
|
||||
- Avoid storing sensitive data in localStorage or sessionStorage
|
||||
- Use Content Security Policy (CSP) headers
|
||||
|
||||
### Accessibility
|
||||
- Use semantic HTML elements appropriately
|
||||
- Implement proper ARIA attributes and roles
|
||||
- Ensure keyboard navigation works for all interactive elements
|
||||
- Provide alt text for images and descriptive text for icons
|
||||
- Implement proper color contrast ratios
|
||||
- Test with screen readers and accessibility tools
|
||||
|
||||
## Implementation Process
|
||||
1. Plan component architecture and data flow
|
||||
2. Set up project structure with proper folder organization
|
||||
3. Define TypeScript interfaces and types
|
||||
4. Implement core components with proper styling
|
||||
5. Add state management and data fetching logic
|
||||
6. Implement routing and navigation
|
||||
7. Add form handling and validation
|
||||
8. Implement error handling and loading states
|
||||
9. Add testing coverage for components and functionality
|
||||
10. Optimize performance and bundle size
|
||||
11. Ensure accessibility compliance
|
||||
12. Add documentation and code comments
|
||||
|
||||
## Additional Guidelines
|
||||
- Follow React's naming conventions (PascalCase for components, camelCase for functions)
|
||||
- Use meaningful commit messages and maintain clean git history
|
||||
- Implement proper code splitting and lazy loading strategies
|
||||
- Document complex components and custom hooks with JSDoc
|
||||
- Use ESLint and Prettier for consistent code formatting
|
||||
- Keep dependencies up to date and audit for security vulnerabilities
|
||||
- Implement proper environment configuration for different deployment stages
|
||||
- Use React Developer Tools for debugging and performance analysis
|
||||
|
||||
## Common Patterns
|
||||
- Higher-Order Components (HOCs) for cross-cutting concerns
|
||||
- Render props pattern for component composition
|
||||
- Compound components for related functionality
|
||||
- Provider pattern for context-based state sharing
|
||||
- Container/Presentational component separation
|
||||
- Custom hooks for reusable logic extraction
|
||||
@ -132,9 +132,9 @@ spring.data.mongodb.database=test
|
||||
- Run gradle clean test command to check if the project is working
|
||||
|
||||
```shell
|
||||
./graldew clean test
|
||||
./gradlew clean test
|
||||
```
|
||||
|
||||
- (Optional) `docker-compose up -d` to start the services, `./graldew spring-boot:run` to run the Spring Boot project, `docker-compose rm -sf` to stop the services.
|
||||
- (Optional) `docker-compose up -d` to start the services, `./gradlew spring-boot:run` to run the Spring Boot project, `docker-compose rm -sf` to stop the services.
|
||||
|
||||
Let's do this step by step.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user