## Build & Development Commands
- Use ES6 syntax and features to ensure modern JavaScript practices.
- Use dotenv environment variables to securely manage configuration settings.
- Leverage Vite for fast development and build processes.
- Optimize asset loading and code splitting using Vite's built-in features.
- Utilize Axe Linter to check for accessibility issues and ensure compliance with WCAG guidelines.

## Testing Guidelines
- Every piece of the site needs to be as accessible as possible
- Write unit tests using Vitest for all JavaScript functions and React components.
- Implement end-to-end testing with Playwright to validate application behavior in real-world scenarios.

## Code Style & Guidelines 
- Develop React components using functional components and hooks (e.g., useState, useEffect).
- Adhere to style guidelines enforced by ESLint and Prettier for code consistency.
- Manage global state with Zustand for efficient state management.
- Use a command queue pattern to manage and execute tasks sequentially.
- Ensure commands are idempotent and can be retried in case of failure.
- Use the strategy pattern to define a family of algorithms and make them interchangeable.
- Apply the adapter pattern to make incompatible interfaces work together.
- Use a plugin system to allow for extensible and modular code.


## Documentation Guidelines 
- Develop and document UI components in isolation using Storybook.
- Use comments and docstrings to explain complex logic and algorithms.
- Generate project documentation with Docusaurus.
- Keep documentation up-to-date with the latest code changes and features.

- Follow ES6+ conventions
- Avoid using 'var' keyword

# JavaScript AI Assistant Ruleset

## Technical Requirements
1. Write modern JavaScript code (ES6+) that follows current best practices.
2. Always implement proper error handling with try/catch blocks when appropriate.
3. Include comments for complex logic, function parameters, and return values.
4. Optimize solutions for performance regarding CPU usage, memory consumption, and execution time.
5. Follow security best practices to prevent XSS, injection attacks, prototype pollution, and other common vulnerabilities.

## Communication Guidelines
6. Explain complex code when requested, providing line-by-line breakdowns.
7. Ask clarifying questions when requirements are ambiguous instead of making assumptions.
8. Adapt explanations and solutions based on the user's demonstrated skill level.
9. Suggest alternative approaches for complex problems, explaining tradeoffs.
10. Provide complete solutions including necessary imports, function definitions, and usage examples.

## Framework and Ecosystem Awareness
11. Respect the user's chosen framework or library; don't suggest React solutions for Angular projects.
12. Maintain current knowledge of major frameworks, libraries, tools, and their best practices.
13. Note version compatibility issues when solutions require specific Node.js/npm versions.
14. Consider full-stack implications when JavaScript solutions interact with backend services.

## Educational Support
15. Explain reasoning behind architectural and implementation decisions, not just how to code them.
16. Reference official documentation when appropriate.
17. Suggest testing strategies for implementations, especially complex ones.
18. Highlight potential pitfalls, edge cases, and limitations in suggested implementations.
19. Promote maintainable, readable code and good development practices.

## Code Quality Standards
20. Follow consistent indentation, naming conventions, and code organization.
21. Prioritize readability over clever or overly concise code.
22. Suggest proper error messages that are informative and actionable.
23. Recommend appropriate logging for debugging and monitoring.
24. Favor immutability and pure functions when appropriate.

## Development Guidelines
- Wrap everything in a single named export default function (e.g., export default function MyPage() { ... }).
- Include mock or placeholder data if the backend is not specified.
- If fetching data, simulate using useEffect with setTimeout or fetch() with sample endpoints.
- Always handle loading and error states if data is involved and provide a human-readable console.log with a description of errors.
- Avoid global state unless specified — stick with useState or useReducer.
- Prefer composition over repetition — break large components into reusable ones if logic is repeated.
- For interactive UI, use react-bootstrap and for styling use Tailwind CSS
- Use clean, readable layouts: flexbox or grid where needed.
- Use accessible HTML semantics (<section>, <header>, <nav>, <main>, <footer>, etc.).
- Make it responsive by default (e.g., max-w, px-4, sm: prefixes).
- The result should be self-contained and easy to copy-paste into a file like MyPage.jsx.
- No unnecessary imports, only include what’s used.
- Add a brief comment block at the top describing what the page does (optional).
- Use arrow functions for helpers inside the component (const handleClick = () => {}).
- Use descriptive variable and function names (no foo, bar, etc.).
- Use JSX fragments (<>...</>) where needed instead of wrapping everything in a div.