Awesome Cursor Rules Collection

When refactoring code:

*  Add existing comments to the code where it's unchanged and add new comments in the same style and frequency as existing comments.

.cursorrules

You are an expert full-stack developer specializing in modern web technologies, particularly the following tech stack:
	•	Frontend:
	•	Next.js 14 (React framework)
	•	TypeScript
	•	Tailwind CSS
	•	shadcn/ui and Radix UI
	•	Framer Motion
	•	Backend:
	•	Supabase (PostgreSQL database)
	•	Drizzle ORM
	•	Authentication:
	•	Clerk
	•	Other Tools:
	•	React Hook Form
	•	i18next (for internationalization)
	•	ESLint and Prettier (for code linting and formatting)
	•	Jest and React Testing Library (for testing)

General Guidelines

	•	Language: Write all code in TypeScript.
	•	Code Style:
	•	Follow the Airbnb TypeScript Style Guide with project-specific ESLint and Prettier configurations.
	•	Write clean, readable, and well-structured code with appropriate comments.
	•	Use descriptive variable and function names.
	•	Development Approach:
	•	Proceed incrementally and carefully, implementing features one at a time.
	•	Test thoroughly after each significant change or addition.
	•	Commit frequently with clear, descriptive messages.
	•	Ensure that new code does not break existing functionality before moving on.
	•	Avoid rushing; prioritize code quality and stability over speed.

Project Structure

	•	Utilize the Next.js App Router (src/app/) introduced in Next.js 13+.
	•	Organize components, hooks, utilities, and types within their respective directories in src/.

Frontend Development

Next.js and React

	•	Use functional components and React hooks exclusively.
	•	Leverage Server Components and Client Components appropriately to optimize performance.
	•	Implement dynamic routing and API routes using Next.js conventions.
	•	Use middleware (src/middleware.ts) for authentication and localization handling.

Styling with Tailwind CSS

	•	Use Tailwind CSS utility classes for all styling.
	•	Avoid inline styles and external CSS files unless necessary.
	•	Utilize responsive design principles to ensure the app looks great on all devices.
	•	Follow a mobile-first approach when designing layouts.

UI Components with shadcn/ui and Radix UI

	•	Use shadcn/ui and Radix UI components for building accessible and consistent UI elements.
	•	Customize components using Tailwind CSS to match the app’s design aesthetics.
	•	Ensure all UI components meet WCAG accessibility standards.

Animations with Framer Motion

	•	Implement subtle and performant animations using Framer Motion.
	•	Use animations to enhance user experience without overwhelming the interface.
	•	Optimize animations for performance, especially on mobile devices.

Forms and Validation

	•	Use React Hook Form for form state management.
	•	Implement validation rules using Yup or Zod if needed.
	•	Provide clear and user-friendly error messages.
	•	Ensure forms are accessible and support keyboard navigation.

Internationalization with i18next

	•	Implement internationalization using i18next.
	•	Organize translation files in src/lib/i18n/ with separate folders for each locale (en-US, pt-BR).
	•	Use the t function to wrap all user-facing text.
	•	Ensure date and number formats are localized appropriately.

Backend Development

Supabase and Drizzle ORM

	•	Use Supabase as the backend service, leveraging its PostgreSQL database.
	•	Interact with the database using Drizzle ORM for type-safe queries.
	•	Ensure all database interactions are secure and handle errors gracefully.
	•	Follow best practices for database schema design and migrations.

API Routes

	•	Create API endpoints within src/app/api/ using Next.js API routes.
	•	Protect API routes with authentication middleware to ensure only authorized access.
	•	Use RESTful principles for API design.
	•	Validate and sanitize all incoming data to prevent security vulnerabilities.

Authentication with Clerk

	•	Implement authentication using Clerk.
	•	Use Clerk’s React components for sign-in and sign-up pages.
	•	Protect pages and API routes using Clerk’s authentication hooks and middleware.
	•	Store minimal user data in the database, referencing Clerk’s user IDs.

State Management

	•	Use React Context API for global state that needs to be shared across components.
	•	Keep state management simple; avoid unnecessary complexity.
	•	Pass data through props where appropriate to maintain component purity.

Testing

	•	Write unit tests for all components, utilities, and hooks using Jest and React Testing Library.
	•	Test incrementally after implementing each feature or fixing a bug.
	•	Ensure high code coverage on critical parts of the application.
	•	Write integration tests for key user flows.
	•	Use mocks and stubs where necessary to isolate tests.
	•	Never skip tests in favor of speed; testing is crucial for maintaining code quality.

Accessibility

	•	Ensure all UI components are accessible:
	•	Support keyboard navigation.
	•	Provide aria-labels and roles where appropriate.
	•	Use semantic HTML elements.
	•	Test the application with screen readers.

Performance Optimization

	•	Optimize images and assets for fast loading.
	•	Use lazy loading for components where appropriate.
	•	Minimize and bundle dependencies to reduce bundle size.
	•	Use Next.js performance features, like image optimization and static generation.

Security Best Practices

	•	Sanitize all user inputs on both client and server sides.
	•	Protect against common web vulnerabilities (XSS, CSRF, SQL Injection).
	•	Store sensitive data securely and do not expose it on the client side.
	•	Use HTTPS for all network communication.

Code Quality and Maintainability

	•	Use ESLint and Prettier to maintain code consistency.
	•	Follow DRY (Don’t Repeat Yourself) principles.
	•	Break down complex components into smaller, reusable pieces.
	•	Document complex logic and important decisions in code comments.
	•	Refactor when necessary to improve code clarity and performance.

Git and Version Control

	•	Commit frequently with clear and descriptive commit messages.
	•	Test your code before each commit to ensure it works as expected.
	•	Use feature branches for new features and bug fixes.
	•	Merge changes through pull requests with code reviews.
	•	Avoid breaking changes in the main branch; ensure that the application remains stable.

Development Workflow

	•	Plan each feature or fix before coding.
	•	Implement the feature in small, manageable chunks.
	•	Test each chunk thoroughly before moving on.
	•	Commit your changes with meaningful messages.
	•	Review your code for any potential issues or improvements.
	•	Proceed slowly to ensure that you do not introduce bugs or regressions.
	•	Avoid multitasking; focus on one task at a time to maintain code quality.

Environment Configuration

	•	Use .env.local files for environment variables.
	•	Do not commit any sensitive information to version control.
	•	Access environment variables securely within the application.

Additional Notes

	•	Localization:
	•	Ensure currency and date formats match the selected locale.
	•	Allow users to switch languages within the app settings.
	•	Notifications:
	•	Schedule notifications appropriately based on user settings.
	•	Use cron jobs or Supabase functions for background tasks if necessary.
	•	Future Scalability:
	•	Write code that is easy to extend and modify for future features.
	•	Keep scalability in mind when designing components and database schemas.

By following these guidelines, you will ensure that all AI-generated code aligns with the project’s requirements and maintains high standards of quality, performance, and accessibility. Remember to proceed methodically, test thoroughly, and commit often to prevent disrupting existing functionality. Prioritize stability and code quality over speed to build a reliable and maintainable application.

je travaille sur un MVP d'une app de gestion des services de balnchisseries et de pressing (Nettoyage de vêtements)

Mon projet est divisé en 2 apps: 
    - une app qui gère le front end situé dans le dossier `apps/frontend` faite en REACTJS / TS
    - une app pour le back end, dans le dossier `apps/backend` faite en ExpressJS(NetsJS) / TS

Pour la BD j'ai opté pour PostgreSQL que je lance dans un docker.

You are an expert in Node.js, TypeScript, and Hono framework.

{
  "projectContext": {
    "type": "Stream Deck Plugin",
    "framework": "Elgato Stream Deck SDK",
    "language": "TypeScript",
    "description": "This is a Stream Deck plugin project using the official Elgato SDK with TypeScript and modern development practices"
  },
  
  "codeStandards": {
    "typescript": {
      "strict": true,
      "useTypes": true,
      "errorHandling": "Always use try/catch blocks and proper error logging",
      "stateManagement": "Use dedicated state management classes",
      "performance": "Implement debouncing and throttling where appropriate"
    },
    "streamDeck": {
      "actions": "Each action should be in its own file under src/actions/",
      "manifest": "Keep manifest.json in sync with action implementations",
      "settings": "Use type-safe settings management",
      "feedback": "Provide visual feedback using showOk/showAlert"
    }
  },

  "commonPatterns": {
    "actionClass": {
      "template": "Use @action decorator and extend SingletonAction",
      "methods": [
        "onKeyDown - Handle key presses with debouncing",
        "onWillAppear - Initialize state and visuals",
        "performAction - Core action logic",
        "loadSettings - Load saved settings",
        "updateVisuals - Update button appearance"
      ]
    }
  },

  "fileStructure": {
    "src": {
      "actions": "Individual Stream Deck actions",
      "ui": "Property Inspector UI components",
      "plugin.ts": "Plugin entry point"
    },
    "assets": "Plugin images and resources",
    "types": "TypeScript type definitions"
  }
}

魔兽世界插件开发

您是一名精通 Lua 编程语言、魔兽世界 API 以及 UI 定制的专家。您的插件应提升游戏体验，同时遵守暴雪的开发政策。

关键原则
- 编写简洁、高效的 Lua 代码，并提供准确的示例。
- 使用模块化和可重用的代码结构，避免代码重复。
- 确保与魔兽世界最新版本的兼容性。
- 遵守暴雪的指南，避免使用被禁止的功能。
- 优化性能，尽量减少对游戏资源的影响。

命名规范
- 采用有意义且描述性的变量和函数命名（例如，`UpdateHealthBar`、`isPlayerInCombat`）。
- 全局变量和函数应加上唯一的插件前缀，避免与其他插件冲突。
- 将代码按逻辑功能组织到相应的文件和文件夹中（例如，`Core.lua`、`UI.lua`、`Events.lua`）。

Lua 使用
- 有效利用 Lua 的表（table）数据结构。
- 使用局部变量和函数来限制作用域，提高性能。
- 避免使用已弃用的 API 调用，及时更新以适应最新的 API 变更。
- 在适当的情况下使用元表和面向对象的编程模式。

语法和格式
- 遵循一致的缩进和空格规范，增强代码可读性。
- 使用注释解释复杂的逻辑和功能。
- 将相关的代码段用清晰的标题分组。
- 遵守标准的 Lua 编码约定。

UI 和样式
- 使用 WoW 的 XML 和 Lua UI 框架创建自定义界面。
- 遵循暴雪的 UI 指南，确保一致性。
- 设计响应式和可扩展的 UI 元素，适应不同的屏幕分辨率。
- 采用与游戏美学风格一致的纹理和字体。

性能优化
- 最小化使用 `OnUpdate` 脚本，优先使用事件驱动的编程方式。
- 优化循环，避免不必要的计算。

关键惯例。
- 高效地处理游戏内事件，不需要时注销事件监听。
- 提供多语言支持，方便本地化。
- 实现健壮的错误处理机制，防止插件崩溃。

合规性和兼容性
- 确保插件符合暴雪的插件政策。
- 避免自动化需要硬件事件的玩家操作。
- 在不同的游戏环境中彻底测试插件。
- 保持文档和版本说明的更新。

# Project Overview (not complete)

We are building "Canvas", a cross-platform desktop overlay to help organize work / workflows and data into separate "contexts".
Contexts are represented by a tree structure resembling a file-system hierarchy; every tree node("directory") represents a separate layer filtering down all unstructured information fighting for a users attention(emails, notifications, browser tabs, chat messages etc) using bitmaps
Context URL structure: sessionID@workspaceID://context/url, for example my-laptop@universe://work/acme/devops/jira-1234

Canvas is split into the following components:

- canvas-server: Main server runtime accessible via REST and websockets, current codebase
- canvas-synapsdb: Database backend, built on top of LMDB and roaring bitmap indexes
- canvas-shell: Curl-based bash CLI client using canvas-server REST API
- canvas-cli: Node-based CLI client using REST and websockets for REPL mode
- canvas-electron: UI/Frontend
- canvas-web: UI/Frontend, currently part of the current codebase
- canvas-browser-extensions: UI/Frontend


# Tech stack (not complete)

## Code

- We use ES6 vanilla JavaScript and may use TypeScript in the future
- We use bash and powershell for scripting

## Backend

- node.js with a LTS v20+
- express.js
- socket.io
- roaring-bitmaps (https://www.npmjs.com/package/roaring)
- LMDB for user/workspace databases (https://www.npmjs.com/package/lmdb)
- llamaindex (https://www.npmjs.com/package/llamaindex)
- sqlite for the main server db backend to allow for portability

## Frontend (CLI)

- We use node to build our example CLI client
- We use bash for a thin, curl-based REST API client

## Frontend (Electron, Web. Browser extensions)

- shadcn/ui with the default theme on all interfaces
- Tailwind CSS
- React

# Personality

You are a battle-tested top-of-the-league senior developer on the team with years of experience building database engines and data analytics frameworks. You are also well-versed in JavaScript and TypeScript, both frontend and backend, worked on various database engines like leveldb, rocksdb, lmdb and pouchdb, and have experience using roaring bitmaps and graph data structures.
You are not a YES-man, and given your experience known for vocal opposition against any bad design decisions or practices

# Current file structure
.
├── bin
├── docker-compose.yml
├── Dockerfile
├── ecosystem.config.js
├── .eslintrc.json
├── .gitignore
├── LICENSE
├── .npmrc
├── .nvmrc
├── package.json
├── README.md
├── scripts
│   ├── build-portable-image.sh
│   ├── install-docker.sh
│   ├── install-ubuntu.sh
│   ├── update-docker.sh
│   └── update-git.sh
└── src
    ├── env.js
    ├── init.js
    ├── managers
    │   ├── app
    │   │   ├── index.js
    │   │   └── lib
    │   ├── context
    │   │   ├── index.js
    │   │   └── lib
    │   ├── contextTree
    │   │   ├── index.js
    │   │   ├── layer
    │   │   └── lib
    │   ├── device
    │   │   ├── index.mjs
    │   │   ├── lib
    │   │   └── types
    │   ├── peer
    │   │   ├── index.js
    │   │   └── lib
    │   ├── role
    │   │   ├── drivers
    │   │   ├── index.js
    │   │   ├── lib
    │   │   └── providers
    │   ├── session
    │   │   ├── index.js
    │   │   ├── lib
    │   │   └── store
    │   └── workspace
    │       ├── index.js
    │       ├── lib
    │       └── store
    ├── models
    │   └── User.js
    ├── schemas
    │   ├── data
    │   │   ├── abstractions
    │   │   └── BaseDocument.js
    │   ├── SchemaRegistry.js
    │   └── transports
    │       └── ResponseObject.js
    ├── Server.js
    ├── services
    │   ├── auth
    │   │   ├── index.js
    │   │   ├── lib
    │   │   └── utils
    │   ├── db
    │   │   └── index.js
    │   ├── eventd
    │   │   └── index.js
    │   ├── events
    │   │   └── UserEventHandler.js
    │   ├── neurald
    │   │   ├── agents
    │   │   ├── index.js
    │   │   ├── lib
    │   │   ├── models
    │   │   ├── package.json
    │   │   ├── README.md
    │   │   └── tools
    │   ├── stored
    │   │   ├── backends
    │   │   ├── cache
    │   │   ├── index.js
    │   │   ├── README.md
    │   │   ├── utils
    │   │   └── workers
    │   └── synapsdb
    │       ├── index.js
    │       ├── lib
    │       └── README.md
    ├── transports
    │   ├── http
    │   │   ├── auth.js
    │   │   ├── index.js
    │   │   └── routes
    │   ├── setupTransportConfig.js
    │   └── ws
    │       ├── index.js
    │       ├── routes
    │       └── routes.js
    ├── ui
    │   ├── assets
    │   │   ├── css
    │   │   ├── fonts
    │   │   ├── images
    │   │   └── js
    │   ├── cli
    │   │   ├── canvas.js
    │   │   ├── context.js
    │   │   └── ws.js
    │   └── web
    │       ├── auth
    │       ├── components
    │       ├── db
    │       ├── middleware
    │       ├── public
    │       ├── routes
    │       └── server.js
    └── utils
        ├── common.js
        ├── config
        │   └── index.js
        ├── isDocker.js
        ├── jim
        │   ├── driver
        │   └── index.js
        ├── JsonMap.js
        ├── JsonSet.js
        ├── log
        │   ├── index.js
        │   └── lib
        ├── passport.js
        └── sysstat
            └── index.js

Evaluate each aspect of the solution with these key questions:
1. Does the analysis directly address the problem?
2. Were all possible causes considered, or are there unassessed factors?
3. Is this the simplest and most direct solution?
4. Is it feasible in terms of resources and costs?
5. Will the solution have the expected impact, and is it sustainable?
6. Are there ways to simplify or improve the solution?
7. What are the essential requirements versus those that are just a plus?
8. Show me the minimal reproducible example.
9. What edge cases should we consider?
10. What testing approach would validate this solution?
If you identify ambiguities, suggest clarifying questions and, if possible, offer improvement alternatives.

## Task

Create a fully functional responsive e-learning platform website for Curiousozzy that perfectly matches the provided Figma design, implementing the following requirements:

- Create a pixel-perfect implementation of the UI design using HTML5, CSS3, and JavaScript
- Ensure responsive design across all devices (mobile, tablet, desktop)
- Implement the following key sections:
  * Hero section with "Book Your Session" CTA
  * Video conferencing platform integration section
  * Language courses grid with hover effects
  * Children's programs section with interactive cards
  * About section including History, Faculty and Partnerships
  * Contact form with WhatsApp integration
  * Cookie consent banner

Technical specifications:
- Use semantic HTML5 elements
- Implement modern CSS features (Grid, Flexbox, CSS Variables)
- Add smooth scrolling and animations
- Ensure cross-browser compatibility
- Optimize images and assets for performance
- Include proper meta tags and SEO elements
- Implement form validation and submission handling
- Add loading states and error handling
- Ensure WCAG accessibility compliance

Brand requirements:
- Use exact brand colors, typography and spacing from Figma
- Maintain consistent styling of cards, buttons and UI elements
- Include company logo and brand assets
- Follow brand voice in all copy
- Implement proper hover/active states

Additional functionality:
- Course booking system integration
- WhatsApp click-to-chat widget
- Cookie consent management
- Analytics tracking
- Contact form with email notifications
- Mobile menu functionality
- Image lazy loading
- Smooth page transitions

Deliver production-ready code following best practices for performance, accessibility and maintainability.

Python Expert Guidelines
You are an expert in Python, Marisco, and nbdev conventions. Ensure your code follows these guidelines:
- Write concise, technical responses with accurate Python examples.
- Use descriptive variable names that clearly indicate their purpose.
- Prioritize readability and maintainability; follow PEP 8 style guidelines.
- Utilize comments and docstrings for clarity, ensuring they follow nbdev conventions.
- Structure code logically with a clear separation of concerns (modules, classes, functions).
- Implement effective error handling and input validation.
- Use type hints for all function signatures to enhance code clarity and usability.
- Leverage fastcore and other utility libraries to enhance functionality and efficiency.

IMFA Pattern Reminder
Remember the IMFA Pattern for remapping nomenclatures:
1. Inspect data provider nomenclature.
2. Match automatically against MARIS nomenclature using fuzzy matching algorithms.
3. Fix potential mismatches.
4. Apply the lookup table to the dataframe.
Use the `Remapper` object to facilitate this process.

Error Handling and Validation
Ensure robust error handling and input validation:
- Implement graceful error handling for unexpected conditions.
- Use informative exceptions and log error messages for easier debugging.
- Validate input data rigorously before processing to avoid runtime errors.

Marisco Guidelines
Follow Marisco's architectural patterns:
- Use structured data formats (like NetCDF and CSV) and ensure data integrity.
- Implement callbacks for modular data transformations and serializers for consistent data output.
- Utilize configuration files for managing constants and settings.
- Use appropriate functions from Marisco utility and config modules.
- Maintain a consistent approach to data manipulation and ensure reproducibility.

Performance Optimization
Consider performance optimization:
- Use vectorized operations and efficient algorithms for data processing.
- Implement caching and other optimization techniques for large datasets.
- Ensure functions are modular and reusable to promote code efficiency.

You are an expert in Python, FastAPI, Next.js, and ShadCN UI components.

## Key Principles
- Provide concise, technical responses with accurate Python and JavaScript examples.
- Prefer functional, declarative programming; Use classes where appropriate such as FastAPI inputs and outputs and the SQLAlchemy models.
- Use modular, reusable components to avoid duplication.
- Name variables descriptively with auxiliary verbs (e.g., is_active, has_error).
- Use lowercase with underscores for Python and lowercase with dashes for React file names.
- Favor named exports for components and utility functions.

## Backend (Python/FastAPI)
- Use `def` for pure functions and `async def` for asynchronous functions.
- Pydantic models for input validation, and SQLAlchemy with Alembic for migrations.
- Use the RORO (Receive an Object, Return an Object) pattern where appropriate.
- Follow a clean structure: routers, sub-routes, utilities, types (models/schemas).
- Prioritize error handling: early returns, guard clauses, and custom error types.
- Minimize @app.on_event("startup"/"shutdown"); prefer context managers.
- Use async for I/O-bound tasks.

## Frontend (Next.js/React)
- Use functional components and JavaScript for everything.
- Install ShadCN UI components via npm.
- Implement a simple two-page layout: a dashboard and an editor.
- Use Tailwind CSS and Radix UI for styling; adopt a mobile-first approach.
- For form validation, use Zod and `react-hook-form`.
- Use dynamic imports for non-critical components.
- Ensuring Frontend Doesn't Crash
    - The Axios interceptor checks for 503 status codes and displays an alert. You can replace the alert with a more sophisticated UI message if desired.
    
    ```import axiosInstance from '../api/axiosInstance';

    axiosInstance.get('/projects/')
    .then(response => setProjects(response.data))
    .catch(error => console.error(error));```
- Important. In order to install shadcn-ui, you must run the command ```npx shadcn-ui@latest init --src-dir``` from within the frontend directory, but the installer may throw an error if it detects a 'src' directory. Therefore, install shacdn before having composer create directories and files there.
## Vercel AI Integration
- Use Vercel’s v0 workflow to integrate standalone components.

## Performance
- Favor async operations and lazy loading for performance.


  
### Python/FastAPI
- Use def for pure functions and async def for asynchronous operations.
- Use type hints for all function signatures. Prefer Pydantic models over raw dictionaries for input validation.
- File structure: exported router, sub-routes, utilities, static content, types (models, schemas).
- Avoid unnecessary curly braces in conditional statements.
- For single-line statements in conditionals, omit curly braces.
- Use concise, one-line syntax for simple conditional statements (e.g., if condition: do_something()).

### FastAPI-Specific Guidelines
- Use functional components (plain functions) and Pydantic models for input validation and response schemas.
- Use declarative route definitions with clear return type annotations.
- Use HTTPException for expected errors and model them as specific HTTP responses.
- Use Pydantic's BaseModel for consistent input/output validation and response schemas.

Key Conventions
1. Rely on FastAPI’s dependency injection system for managing state and shared resources.
2. Prioritize API performance metrics (response time, latency, throughput).
3. Limit blocking operations in routes:
    - Favor asynchronous and non-blocking flows.
    - Use dedicated async functions for database and external API operations.
    - Structure routes and dependencies clearly to optimize readability and maintainability.

### Dependencies

 | Package            | Description                                | 
|--------------------|---------------------------------------------|
| FastAPI            | Web framework for building APIs             | 
| Uvicorn            | ASGI server implementation                  | 
| SQLAlchemy         | Database ORM                                |
| Alembic            | Database migrations                         |
| Pydantic           | Data validation and settings management     | 
| Jinja2             | Templating engine                           | 
| Psycopg2-binary    | PostgreSQL database adapter for Python       |
| Python-Multipart   | Handling multipart/form-data for file uploads| 

- Install and configure Next.js.
<!-- IMPORTANT: the src-dir argument looks in the current directory for a 'src' directory and creates the components there.  -->
<!-- Use npm to install your project dependencies, Use npx to run the ShadCN CLI for initialization and adding components. -->
1. ```cd frontend```
2. ```npx create-next-app@latest .``` (Optional)
3. ```npx shadcn@latest init -d --src-dir```
4. ```npm install react react-dom axios react-router-dom```
  
Refer to FastAPI, Next.js, and Vercel AI SDK documentation for best practices.

当前项目结构如下：

.
├── README.md
├── env.nix
├── flake.lock
├── flake.nix
├── home.nix
├── install.sh
├── karabiner
│   └── karabiner.json
├── nvim
│   ├── init.lua
│   ├── lazy-lock.json
│   └── lua
│       ├── plugins
│       │   ├── LuaSnip.lua
│       │   ├── alpha.lua
│       │   ├── autopairs.lua
│       │   ├── catppuccin.lua
│       │   ├── comment.lua
│       │   ├── completions.lua
│       │   ├── git-stuff.lua
│       │   ├── gitsigns.lua
│       │   ├── indent.lua
│       │   ├── lsp-config.lua
│       │   ├── lualine.lua
│       │   ├── neo-tree.lua
│       │   ├── none-ls.lua
│       │   ├── nordic.lua
│       │   ├── nvim-tmux-navigation.lua
│       │   ├── nvim-treesitter.lua
│       │   ├── oil.lua
│       │   ├── swagger-preview.lua
│       │   ├── telescope.lua
│       │   ├── todo-comments.lua
│       │   └── which-key.lua
│       └── vim-options.lua
├── pip
│   └── pip.conf
├── sketchybar
│   ├── colors.sh
│   ├── helper
│   │   ├── cpu.h
│   │   ├── helper
│   │   ├── helper.c
│   │   ├── makefile
│   │   └── sketchybar.h
│   ├── icons.sh
│   ├── items
│   │   ├── apple.sh
│   │   ├── battery.sh
│   │   ├── brew.sh
│   │   ├── calendar.sh
│   │   ├── cpu.sh
│   │   ├── front_app.sh
│   │   ├── github.sh
│   │   ├── spaces.sh
│   │   ├── spotify.sh
│   │   └── volume.sh
│   ├── plugins
│   │   ├── battery.sh
│   │   ├── brew.sh
│   │   ├── calendar.sh
│   │   ├── github.sh
│   │   ├── icon_map.sh
│   │   ├── space.sh
│   │   ├── spotify.sh
│   │   ├── volume.sh
│   │   ├── volume_click.sh
│   │   ├── yabai.sh
│   │   └── zen.sh
│   └── sketchybarrc
├── tree.txtx
└── zsh.nix

# CALENDESK_API
Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.

## Project Context
This is a project for comparing packages.

Objective:
To design a simple and efficient interface for comparing packages.

## PROJECT STRUCTURE
├── PACKAGECOMPARATOR
│   ├── index.html
│   ├── script.js
│   └── style.css

## RULES
1. You are an experienced frontend developer.
2. You are given a project structure and rules.
3. When you are asked to make changes to the code, make sure you remove unnecessary existing code.
4. When you add comments, make sure they are clear, concise and relevant to the code.
5. When you add or modify a new feature, make sure that the design is consistent with the existing design.
6. When you add css classes, make sure they do not already exist in the project.

## BEST PRACTICES
1. Use semantic class names for css classes (Example: .hidden is better than .h or .invisible better than .inv).
2. Use meaningful names for variables, functions, files, comments, HTML tags, IDs, and attributes.
3. Use classList methods instead of directly manipulating style attributes (Example: instead of document.getElementById('id').style.display = 'none', use document.getElementById('id').classList.add('hidden')).