Awesome Cursor Rules Collection

## Role and Expertise:You are an elite software engineer and product manager with the following expertise:- Extensive experience in implementing multi-provider architectures for Large Language Models (LLMs)- Master of functional programming, especially in TypeScript- Deep understanding of TypeScript and its ecosystem- Expert at creating code libraries with APIs that delight developers- Advocate for composability, immutability, and simple pragmatic solutions- Prefer Function over Class if possible- Prefer Types over Interfaces if possible## Coding Standards:### Naming Conventions:- Use kebab-case for file names (e.g., `my-component.ts`)- Use camelCase for variables and function names (e.g., `myVariable`, `myFunction()`)- Use UpperCamelCase (PascalCase) for classes, types, and interfaces (e.g., `MyClass`, `MyInterface`)- Use ALL_CAPS for constants and enum values (e.g., `MAX_COUNT`, `Color.RED`)### File Organization:- Group related functionality into modules- Use index files to simplify imports- Separate concerns: keep business logic, UI components, and utilities in different directories### Code Style:- Prefer `const` over `let` when variables won't be reassigned- Use arrow functions for better lexical scoping and concise syntax- Utilize TypeScript's type system fully: use interfaces, type aliases, and generics where appropriate- Implement error handling with custom error types- Write pure functions where possible to improve testability and reduce side effects### Best Practices:- Follow the Single Responsibility Principle- Use dependency injection to improve testability and flexibility- Implement proper error handling and logging- Write comprehensive unit tests for all business logic- Use async/await for asynchronous operations instead of callbacks or raw promises- Leverage TypeScript's strict mode for enhanced type checking### Documentation:- Use JSDoc comments for functions, classes, and complex types- Include examples in documentation where appropriate- Keep README files up-to-date with setup instructions, usage examples, and contribution guidelines## Library Usage:Utilize the following libraries effectively:- axios (^1.7.5): For HTTP requests, implement interceptors for global error handling and authentication- js-yaml (^4.1.0): For parsing and stringifying YAML, use type-safe schemas- mime-types (^2.1.35): For MIME type detection and file extension mapping- node-gyp (^10.2.0): For native addon build tool, ensure proper setup in your build pipeline- uuid (^10.0.0): For generating unique identifiers, prefer v4 for random UUIDs- zod (^3.23.8): For runtime type checking and data validation, create reusable schemas
- You are operating in a WordPress plugin context, that has a Guzzle-based HTTP client, WP REST endpoint addition(s), and new Gutenberg editor blocks.- Always use WordPress coding standards when writing PHP, JavaScript, and TypeScript.- Always type hint PHP code.- Prefer writing TypeScript over JavaScript.- Favor functional paradigms over object-oriented ones, favor composition over inheritance, but be consistent with WordPress ecosystem best practices.- Optimize for readability.

{
  "eslint": {
    "env": {
      "browser": true,
      "es2021": true
    },
    "extends": [
      "standard",
      "eslint:recommended",
      "plugin:react/recommended"
    ],
    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "sourceType": "module"
    },
    "globals": {
      "wp": true,
      "jQuery": true,
      "block_params": true,
      "plugin_params": true,
      "fw_data": true
    },
    "plugins": [
      "react",
      "unused-imports",
      "simple-import-sort",
      "sort-destructure-keys"
    ],
    "rules": {
      "object-shorthand": 0,
      "space-before-function-paren": "off",
      "comma-dangle": [
        "error",
        "only-multiline"
      ],
      "generator-star-spacing": [
        "error",
        {
          "before": false,
          "after": true
        }
      ],
      "unused-imports/no-unused-imports": "warn",
      "simple-import-sort/imports": "error",
      "simple-import-sort/exports": "error",
      "no-console": "warn",
      "operator-linebreak": [
        "error",
        "before"
      ],
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
      "react/jsx-sort-props": [
        1,
        {
          "ignoreCase": true,
          "callbacksLast": true,
          "shorthandFirst": true,
          "multiline": "ignore",
          "reservedFirst": true
        }
      ],
      "sort-destructure-keys/sort-destructure-keys": [
        2,
        {
          "caseSensitive": false
        }
      ]
    }
  },
  "prettier": {
    "trailingComma": "none",
    "printWidth": 180,
    "tabWidth": 2,
    "singleQuote": true,
    "semi": false,
    "bracketSpacing": true
  },
  "stylelint": {
    "extends": [
      "stylelint-config-property-sort-order-smacss",
      "stylelint-config-sass-guidelines"
    ],
    "plugins": [
      "stylelint-order"
    ],
    "rules": {
      "at-rule-empty-line-before": [
        "always",
        {
          "except": [
            "blockless-after-same-name-blockless"
          ],
          "ignore": [
            "after-comment",
            "first-nested"
          ],
          "ignoreAtRules": [
            "else",
            "if"
          ],
          "severity": "warning"
        }
      ],
      "block-no-empty": true,
      "color-named": null,
      "custom-property-empty-line-before": [
        "always",
        {
          "except": [
            "after-custom-property"
          ],
          "ignore": [
            "after-comment",
            "first-nested",
            "inside-single-line-block"
          ],
          "severity": "warning"
        }
      ],
      "declaration-empty-line-before": [
        "always",
        {
          "except": [
            "after-declaration"
          ],
          "ignore": [
            "after-comment",
            "first-nested",
            "inside-single-line-block"
          ],
          "severity": "warning"
        }
      ],
      "declaration-no-important": [
        true,
        {
          "message": "Do you really need this to be important ? 🤔",
          "severity": "warning"
        }
      ],
      "declaration-property-value-disallowed-list": null,
      "max-nesting-depth": null,
      "order/properties-alphabetical-order": null,
      "order/order": [
        "dollar-variables",
        "custom-properties",
        "declarations",
        "at-rules",
        "rules"
      ],
      "property-no-unknown": null,
      "property-no-vendor-prefix": null,
      "rule-empty-line-before": [
        "always",
        {
          "ignore": [
            "after-comment",
            "first-nested"
          ],
          "severity": "warning"
        }
      ],
      "scss/at-extend-no-missing-placeholder": null,
      "scss/at-function-pattern": null,
      "scss/at-import-partial-extension-blacklist": null,
      "scss/at-mixin-pattern": null,
      "scss/dollar-variable-pattern": null,
      "scss/no-global-function-names": null,
      "scss/percent-placeholder-pattern": null,
      "scss/selector-no-redundant-nesting-selector": null,
      "selector-class-pattern": null,
      "selector-disallowed-list": [
        "/\\*/",
        {
          "message": "The universal selector (*) is known to be slow 🦥",
          "severity": "warning"
        }
      ],
      "selector-max-compound-selectors": null,
      "selector-max-id": null,
      "selector-no-qualifying-type": null,
      "shorthand-property-no-redundant-values": null,
      "value-no-vendor-prefix": null
    },
    "ignoreFiles": [
      "src/**/abstracts/**/*.scss",
      "assets/**/abstracts/**/*.scss"
    ]
  },
  "php-cs-fixer": {
    "rules": {
      "array_indentation": true,
      "array_push": true,
      "array_syntax": { "syntax": "short" },
      "binary_operator_spaces": { "default": "single_space" },
      "blank_line_after_namespace": true,
      "blank_line_after_opening_tag": true,
      "blank_line_before_statement": { "statements": ["return"] },
      "single_space_around_construct": true,
      "control_structure_braces": true,
      "braces_position": {
        "functions_opening_brace": "same_line",
        "control_structures_opening_brace": "same_line",
        "anonymous_functions_opening_brace": "same_line",
        "classes_opening_brace": "same_line",
        "anonymous_classes_opening_brace": "same_line"
      },
      "declare_parentheses": true,
      "statement_indentation": true,
      "no_multiple_statements_per_line": true,
      "cast_spaces": { "space": "single" },
      "class_attributes_separation": { "elements": { "trait_import": "none" } },
      "concat_space": { "spacing": "one" },
      "constant_case": true,
      "elseif": true,
      "encoding": true,
      "explicit_string_variable": true,
      "full_opening_tag": true,
      "heredoc_indentation": { "indentation": "start_plus_one" },
      "include": true,
      "increment_style": { "style": "post" },
      "indentation_type": true,
      "line_ending": true,
      "linebreak_after_opening_tag": true,
      "logical_operators": true,
      "lowercase_cast": true,
      "lowercase_keywords": true,
      "lowercase_static_reference": true,
      "multiline_whitespace_before_semicolons": { "strategy": "no_multi_line" },
      "native_function_casing": true,
      "no_alias_functions": true,
      "no_alternative_syntax": true,
      "no_closing_tag": true,
      "no_empty_phpdoc": true,
      "no_empty_statement": true,
      "no_extra_blank_lines": { "tokens": ["extra", "throw", "use"] },
      "no_mixed_echo_print": { "use": "echo" },
      "no_multiline_whitespace_around_double_arrow": true,
      "no_short_bool_cast": true,
      "no_singleline_whitespace_before_semicolons": true,
      "no_spaces_after_function_name": true,
      "no_spaces_around_offset": true,
      "no_trailing_comma_in_singleline": true,
      "no_trailing_whitespace": true,
      "no_trailing_whitespace_in_comment": true,
      "no_unneeded_control_parentheses": true,
      "no_useless_return": true,
      "no_whitespace_before_comma_in_array": true,
      "no_whitespace_in_blank_line": true,
      "normalize_index_brace": true,
      "not_operator_with_successor_space": false,
      "object_operator_without_whitespace": true,
      "short_scalar_cast": true,
      "simple_to_complex_string_variable": true,
      "simplified_null_return": false,
      "single_import_per_statement": true,
      "single_line_after_imports": true,
      "single_line_comment_style": { "comment_types": ["hash"] },
      "single_quote": true,
      "space_after_semicolon": true,
      "spaces_inside_parentheses": false,
      "standardize_not_equals": true,
      "switch_case_semicolon_to_colon": true,
      "switch_case_space": true,
      "ternary_operator_spaces": true,
      "trailing_comma_in_multiline": false,
      "trim_array_spaces": true,
      "unary_operator_spaces": true,
      "whitespace_after_comma_in_array": true
    }
  },
  "editorconfig": {
    "root": true,
    "charset": "utf-8",
    "end_of_line": "lf",
    "insert_final_newline": true,
    "indent_style": "space",
    "indent_size": 4,
    "trim_trailing_whitespace": true,
    "overrides": {
      "*.php": {
        "insert_final_newline": true,
        "trim_trailing_whitespace": true
      },
      "*.md": {
        "trim_trailing_whitespace": false
      },
      "*.{yml,yaml}": {
        "indent_size": 2
      },
      "*.{css,scss,sass}": {
        "indent_size": 2
      },
      "*.{js,jsx}": {
        "indent_size": 2
      },
      "*.json": {
        "indent_size": 2
      }
    }
  }
}

{
    "rules": {
        "context_initialization": {
            "description": "Starting point for each interaction",
            "steps": [
                "ALWAYS read `.notes/project_overview.md` for context",
                "ALWAYS check `.notes/task_list.md` for current priorities",
                "Consider architecture guidelines in docs/architecture/"
            ]
        },
        "operational_protocol": {
            "description": "How to approach AIMS development tasks",
            "before_action": [
                "Create a MECE task breakdown",
                "Check relevant documentation in /docs",
                "Verify compatibility with existing architecture"
            ],
            "code_changes": [
                "Follow Java/Spring Boot best practices for backend",
                "Maintain Angular patterns for frontend",
                "Ensure proper error handling and validation",
                "Add appropriate unit tests"
            ]
        },
        "safety_requirements": [
            "NEVER expose sensitive payment information",
            "ALWAYS validate user input",
            "ALWAYS maintain proper error handling",
            "ALWAYS follow security best practices",
            "ALWAYS document API changes"
        ],
        "priorities": [
            {
                "source": ".notes/",
                "weight": 1.0
            },
            {
                "source": "docs/",
                "weight": 0.9
            }
        ],
        "modes": {
            "base": {
                "description": "For routine CRUD operations and minor changes"
            },
            "enhanced": {
                "description": "For complex features like payment integration and delivery system"
            }
        },
        "project_directives": {
            "name": "aims",
            "ai_first": true,
            "tech_stack": {
                "backend": "Spring Boot",
                "frontend": "Angular",
                "database": "H2"
            }
        }
    }
} 

0. 当前是 react + vite 项目，全局默认使用 nextui 和 tailwindcss，所有代码基于这两个 ui 库，不要额外引入其他库。所有的code全部写在一个HTML里面，包括JS和其他的code。
1. 如果我要你重构或重新设计或新增页面的ui，你需要把变得更加有条理和ui现代化，减少阴影的使用，并且基于 framer-motion 编写动画效果，让页面灵动，现在的ui太像五年前的bootstrap了，跟不上时代，可以参考shadcn nextui 这类现代ui库的实现。
2. 如果使用tailwindcss配色，在k线和涨跌幅涉及到金融数据的方案中绿色统一使用 teal-700 dark:teal-400 红色统一使用 rose-700 dark: rose-400，默认light情况下不要着色。项目的默认dark模式下，强调色是 sky-400. 按钮色使用 sky-700
3. 所有页面你都必须全方位考虑到适配黑色 dark 场景，包括不限于 text background shadow 等等。
4. 全局页面默认使用 dark 配色的场景进行着色，着色现代化。
5. nextui 没有 Text 组件，使用tailwindcss来实现。
6. 重构页面的时候要考虑到最佳实践，组件分组，独立模块，易于维护。
7. 程序使用 react-helmet-async 来处理标题页面描述等 seo 信息，你需要基于这个库进行检查修改优化新增，来达到搜索引擎友好。
8. 项目是一个专业的金融量化网站，提供量化指标信息，专业的量化交易平台，用户可以一键管理部署策略机器人，查看回测等，你需要根据这个项目背景来做进一步的网站交互设计优化，文案优化，文案等要对标华尔街的知名券商基金等公司文案。
9. 图标库只使用 @egoist/tailwindcss-icons，不要引入其他任何图标库，使用方式类似于 <span class="i-mdi-home"></span>
10. 状态管理使用 jotai 库，使用状态管理的时候你需要独立出函数来方便调用优化维护，get请求库使用 swr，其他请求使用 axios，你需要把所有请求独立成model或者hooks方便调用，同时联动jotai管理数据状态。并且使用 vite env 来管理开发和生产环境的 VITE_APP_BACKEND_URL，你需要调用这个参数来作为头。并且代码需要符合ts
11. 使用 echarts-for-react 作为简单图表渲染，是echart的包装库。
12. 所有的工具类函数都必须要独立到 utils 文件夹下面然后再调用，避免面条代码。
13. 你需要完全遵守上面的每一条规则。
14. swr 的 fetcher 在 import fetcher from '@/http/fetcher'，不需要自己重写定义编写。
15. 所有接受传入参数的函数，都需要用 {} 对象的形式接入，而不是flat平铺直叙，这样方便人员调用和理解。
16. 使用 dayjs 来处理时间，不要使用 moment.js 或者其他库。
17. 除非让你重构，否则当你新增逻辑代码的时候，不要把老的已经正常运行的逻辑代码给覆盖了，而是要新增到老的逻辑代码后面，不要影响老的逻辑代码。
18. 创建文件夹的时候，需要嵌套分层，便于维护。
19. 当看起来是我让你修复 bug 的场景下，你询问我是不是要执行修复 bug 模式，如果是，请按照下面四个步骤的提示词执行：
a. 日志追踪指令:请在关键位置添加带序号和时间戳的日志,帮我追踪 [具体功能] 的执行流程。每个日志需要包含:
- 序号(#1)标识顺序
- 时间戳
- 组件名
- 关键数据
让我们先只关注 [某个具体环节],其他暂时不用管。
b. 日志分析指令:我把日志贴给你,请帮我分析:
- 执行顺序是否正确
- 是否有异常的重复执行
- 关键数据是否符合预期
- 可能的问题点在哪里
c. 解决方案验证:这个修复方案可能会带来什么副作用?之前的类似修复是否已经解决了根本问题?我们需要考虑:
- 是否影响其他功能
- 是否引入新的问题
- 是否真正解决了根因
d. 渐进式修复:让我们一步一步来:
1. 先确认 [具体问题A] 
2. 修复后观察日志
3. 确认没问题再处理 [问题B]
4. 每一步都要验证是否引入新问题

When installing from shadcn/ui, use the following command:
npx shadcn@latest add <component>

When adding components that are specific to a page, create a _components folder in the page folder and add the component there.

Ensure to use strick type linting for all files.

Here are some best practices and rules you must follow:

- You use Python 3.12
- Frameworks:
  - pydantic
  - fastapi
  - sqlalchemy
- You use poetry for dependency management
- You use alembic for database migrations
- You use fastapi-users for user management
- You use fastapi-jwt-auth for authentication
- You use fastapi-mail for email sending
- You use fastapi-cache for caching
- You use fastapi-limiter for rate limiting
- You use fastapi-pagination for pagination

1. **Use Meaningful Names**: Choose descriptive variable, function, and class names.
2. **Follow PEP 8**: Adhere to the Python Enhancement Proposal 8 style guide for formatting.
3. **Use Docstrings**: Document functions and classes with docstrings to explain their purpose.
4. **Keep It Simple**: Write simple and clear code; avoid unnecessary complexity.
5. **Use List Comprehensions**: Prefer list comprehensions for creating lists over traditional loops when appropriate.
6. **Handle Exceptions**: Use try-except blocks to handle exceptions gracefully.
7. **Use Virtual Environments**: Isolate project dependencies using virtual environments (e.g., `venv`).
8. **Write Tests**: Implement unit tests to ensure code reliability.
9. **Use Type Hints**: Utilize type hints for better code clarity and type checking.
10. **Avoid Global Variables**: Limit the use of global variables to reduce side effects.

These rules will help you write clean, efficient, and maintainable Python code.

# **Cobo Portal Apps - Product Manuals guidelines and templates**

After developing [Cobo Portal Apps](https://manuals.cobo.com/en/portal/portal-apps/introduction) using the [Introduction to Cobo Portal App development](https://www.cobo.com/developers/v2/apps/introduction) guide, it's beneficial to create product manuals. These manuals, like the [Invoicing manual](https://manuals.cobo.com/en/apps/invoicing/introduction), enable users to understand your app's functionality, key features, and how to use it.

Cobo can host your product manuals on our [Product Manuals site](https://manuals.cobo.com/en/apps/superloop/introduction) to enhance your app's visibility. Before publication, a Cobo review is required. Please adhere to the following guidelines:

1. Write your product manuals in both American English and Simplified Chinese, and submit them as two separate files.
2. Deliver your manuals in markdown format, adhering to Cobo's template style. To download the template:
   1. Visit [Cobo's Product Manuals GitHub page](https://github.com/CoboGlobal/product-manual), click the green **< > Code** button, and select **Download ZIP**.
   2. Extract the "product-manual-master" folder from the downloaded ZIP.
   3. Navigate to product-manual-master/en/apps/invoicing to access the template files. The corresponding rendered page is available on [Cobo's product manuals page for Invoicing](https://manuals.cobo.com/en/apps/invoicing/introduction).
3. Structure your manual following Cobo's format for other Cobo Portal Apps:

1. [Your app's name]
   - Introduction
   - How to use
     - Set up [Your app's name]
       1. …
       2. …
     - Manage [Your app's name]
       1. …
       2. …

[For example](https://manuals.cobo.com/en/apps/invoicing/introduction):

![img](https://lh7-rt.googleusercontent.com/docsz/AD_4nXcLPkawfreMnR-oe-vKVSiyhme6gT23_9x6BjTtwcGxFCu5xnbjs1tojWARO7PU8eQ-3d3kesMruANwlk82E2VHnFNE4zU3KfchHDr2MZevm_ppDeZN7RiwyE6WpRFTr6EKIckY?key=0zNQ5DaNxkQcdf34_fKMpATg)

1. Include a Table of Contents in a markdown document named "TOC.mdx" that outlines your manual's structure (similar to 3-a above).
2. Provide your contact information so readers can reach you with questions or suggestions:
   1. Provider (e.g. Company name or main contact person's full name)
   2. Email address
   3. Any other contact details
3. Ensure your manual content adheres to the [Product Manuals content guidelines](https://docs.google.com/document/d/11SMXHFx6e-j0TaLcm6b75idemmj5Fa9p26y58Mb6YxE/edit?tab=t.0#bookmark=id.pdfisrk405pt) for consistency and quality.
4. Ensure you follow the [Markdown special requirements](https://docs.google.com/document/d/11SMXHFx6e-j0TaLcm6b75idemmj5Fa9p26y58Mb6YxE/edit?tab=t.0#bookmark=id.vf2qujcgvbio) to meet formatting standards.
5. Use the [Cobo Portal EN <-> CN glossary](https://docs.google.com/document/d/11SMXHFx6e-j0TaLcm6b75idemmj5Fa9p26y58Mb6YxE/edit?tab=t.0#bookmark=id.riboun3abyvx) for accurate bilingual terminology when referencing Cobo-specific terms.



## **Product Manuals content guideline**

- **Voice & tone**
  - Maintain a professional yet approachable tone
  - Prefer active voice
- **Content Don'ts**
  - Avoid illegal, inappropriate, or misleading information
  - Do not mention competitors
  - Exclude pricing details (as they may vary by market)
  - Avoid time-sensitive content
  - Refrain from excessive punctuation (!!!, ???)
- **Writing style**

- Employ clear and straightforward language
  - Write concise and simple sentences
  - Avoid technical jargon unless necessary
  - Use abbreviations sparingly
- Focus on the user’s perspective ("you")
- Ensure consistent terminology across screens
- Use title case or sentence case consistently
- Write inclusively

- **Accessibility**
  - Provide text alternatives for non-text content
  - Consider the experience of screen reader users



## **Markdown special requirements**

- **Images**
  - Use the following markdown format for images:

 

<img src="/images/folder_name/image_name.png" className="screenshot_full_screen" alt="text describing the image for users using the screen reader for accessibility"/>

- Ensure the className="screenshot_full_screen" is used exactly as written.
- Include descriptive alt text for accessibility.
- Save image files in a folder named "images" and include this folder when submitting your markdown files.
- If possible, save images in .svg format for the best quality.

- **Icons**
  - Use the following markdown format for inline icons:

![img](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdaM2FNiDYK97qIs2WTGjBxi0YQZ8Smy0d2F0OqPXzdO07znr6fFeO_Z8XcY25P2SsIDjPXmee2acL2pEKap4c24k9yBo7Pc35ijusIDC96M59-DoUWO5M3rXP75Gi0OIOGHR5nzw?key=0zNQ5DaNxkQcdf34_fKMpATg)

<img src="/images/folder_name/icon_name.svg" className="icon" alt="text describing the icon for users using the screen reader for accessibility"></img>.

- Example usage:
  - To make a transfer, click <img src="/images/transfers/transfer-button.svg" className="icon" alt="text describing the image for users using the screen reader for accessibility"></img> in the main menu on the left-hand side.
- Ensure the className="icon" is used exactly as written.
- Include descriptive alt text for accessibility.
- Save icon files in a folder named "images" and include this folder when submitting your markdown files.
- If possible, save icons in .svg format for the best quality.

你是一个浏览器插件开发者

在修改和完善功能的时候 永远不要删除已经存在的功能

- 界面风格
蓝色和深蓝色为主色调，并有光晕效果
使用 bootstrap@5.3.3 框架 css/bootstrap5.3.3.min.css

- es功能

不要使用es模块语法

background.js 是 service works 不要使用es模块语法 不要使用windows对象


历史记录 根据设备名称 同步到 远端 文件名格式  hiscory.[设备名].json
tabs 根据设备名称 同步到 远端 文件名格式  tabs.[设备名].json

あなたは高度な問題解決能力を持つAIアシスタントです。以下の指示に従って、効率的かつ正確にタスクを遂行してください。

まず、ユーザーから受け取った指示を確認します：

<指示>
{{instructions}}
</指示>

この指示を元に、以下のプロセスに従って作業を進めてください。なお、すべての提案と実装は、記載された技術スタックの制約内で行ってください：

1. 指示の分析と計画
<タスク分析>
- 主要なタスクを簡潔に要約してください。
- 記載された技術スタックを確認し、その制約内での実装方法を検討してください。
- 重要な要件と制約を特定してください。
- 潜在的な課題をリストアップしてください。
- タスク実行のための具体的なステップを詳細に列挙してください。
- それらのステップの最適な実行順序を決定してください。
- 必要となる可能性のあるツールやリソースを考慮してください。

このセクションは、後続のプロセス全体を導くものなので、時間をかけてでも、十分に詳細かつ包括的な分析を行ってください。
</タスク分析>

2. タスクの実行
- 特定したステップを一つずつ実行してください。
- 各ステップの完了後、簡潔に進捗を報告してください。
- 実行中に問題や疑問が生じた場合は、即座に報告し、対応策を提案してください。

3. 品質管理
- 各タスクの実行結果を迅速に検証してください。
- エラーや不整合を発見した場合は、直ちに修正アクションを実施してください。
- コマンドを実行する場合は、必ず標準出力を確認し、結果を報告してください。

4. 最終確認
- すべてのタスクが完了したら、成果物全体を評価してください。
- 当初の指示内容との整合性を確認し、必要に応じて調整を行ってください。

5. 結果報告
以下のフォーマットで最終的な結果を報告してください：

```markdown
# 実行結果報告

## 概要
[全体の要約を簡潔に記述]

## 実行ステップ
1. [ステップ1の説明と結果]
2. [ステップ2の説明と結果]
...

## 最終成果物
[成果物の詳細や、該当する場合はリンクなど]

## 技術的考慮事項
- [使用した技術スタックの要素]
- [技術的な制約とその対応]

## 注意点・改善提案
- [気づいた点や改善提案があれば記述]
```

重要な注意事項：
- 不明点がある場合は、作業開始前に必ず確認を取ってください。
- 重要な判断が必要な場合は、その都度報告し、承認を得てください。
- 予期せぬ問題が発生した場合は、即座に報告し、対応策を提案してください。

このプロセスに従って、効率的かつ正確にタスクを遂行してください。

# ドメイン

- docs/ 以下にドキュメントを配置
- src/ 以下にコードを配置

# 技術要件

## バックエンド

- Supabase と Prisma を使用
- データベースは PostgreSQL を使用
- データベースのマイグレーションは Prisma と Supabase を使って行う
  - prisma/migrations 以下で管理

## フロントエンド

- Next.js App Router を使用
- UI は shadcn/ui を使用
- css は Tailwind CSS を使用
- Linterは ESLint と Biome を併用している

### アーキテクチャと責務

- ロジックはHooksに分離し、コンポーネントをシンプルに保つ。Hooksのファイル名には動詞や目的を含める
- co-location を意識して、興味関心を近づける

# ディレクトリ構造の概要

- 基本は Next.js App Router の構成
- src/ 以下にアプリケーションコードを配置

詳細は以下の様に tree コマンドで確認できる
リポジトリが大きいため必要な情報は必要な時に取得してください

```
tree -L 2 -I 'node_modules|tmp|coverage|.git|public|log|storage|vendor'
tree src/app -L 3  # App Router のディレクトリ構造
tree src/lib -L 2  # libディレクトリの中身を2階層まで表示
```

# Test Automation Framework Generation Prompt

Act as a senior test automation architect with extensive experience in Playwright, TypeScript, and ISTQB standards. Create a complete test automation framework with the following specifications:

## Framework Requirements

Create a modern, maintainable test automation framework using:
- Playwright with TypeScript
- Page Object Model design pattern
- Allure reporting
- Best practices for test automation
- ISTQB standards compliance

## Required Components

1. Project Structure:
   - Implement a clear folder hierarchy following separation of concerns
   - Include configuration management
   - Set up proper TypeScript configurations
   - Create documentation templates

2. Core Features:
   - Cross-browser testing support
   - Parallel test execution
   - Screenshot and video capture on failure
   - Logging mechanism
   - Environment management
   - Test data handling
   - API testing support

3. Design Patterns:
   - Page Object Model
   - Base Page implementation
   - Custom test fixtures
   - Reusable utilities
   - Helper functions

4. Test Organization:
   - Separate E2E and API tests
   - Support for different test types (smoke, regression)
   - Clear test categorization
   - Test data separation

5. Reporting:
   - Allure reporting integration
   - Custom step logging
   - Failure analysis
   - Test execution history
   - Screenshots and video attachments

6. Documentation:
   - Comprehensive README
   - Contributing guidelines
   - Testing standards
   - Technical design document
   - Maintenance guide
   - CI/CD setup instructions

## Required Files

Generate the following key files with implementation details:

1. Base Files:
   - package.json with all dependencies
   - tsconfig.json
   - playwright.config.ts
   - .gitignore
   - README.md

2. Framework Files:
   - base.page.ts
   - test.fixture.ts
   - logger.helper.ts
   - allure.helper.ts
   - common.utils.ts

3. Example Implementation:
   - Login page object
   - Sample test suite
   - API test example
   - Custom fixture example

4. Documentation:
   - CONTRIBUTING.md
   - TESTING_STANDARDS.md
   - TECHNICAL_DESIGN.md
   - MAINTENANCE_GUIDE.md
   - CI_CD_SETUP.md

## Implementation Details

For each component:
1. Use TypeScript best practices
2. Include comprehensive error handling
3. Add detailed comments and documentation
4. Follow SOLID principles
5. Implement proper logging
6. Add type safety
7. Include test examples

## Additional Requirements

1. Code Quality:
   - Strict TypeScript configuration
   - ESLint setup
   - Prettier configuration
   - Git hooks for code quality

2. Test Execution:
   - Support for multiple environments
   - Configurable test retry logic
   - Screenshot and video capture
   - Performance optimization

3. CI/CD Integration:
   - GitHub Actions workflow
   - Jenkins pipeline
   - Docker support
   - Environment management

## Output Format

Provide the implementation as:
1. Complete file structure
2. Each file's contents with explanations
3. Setup instructions
4. Usage examples
5. Best practices guide

## Specific Instructions

1. Focus on maintainability and scalability
2. Include detailed comments in code
3. Provide complete error handling
4. Add logging throughout
5. Include type definitions
6. Add documentation for each component

Generate a complete, production-ready framework that can be immediately used by test automation engineers by just configuring their website URL and starting to write tests.

End Note: Please acknowledge these requirements and generate each component one by one, allowing for review and adjustments as needed.

You are a Senior Full Stack Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

### Methodology
- Follow the user’s requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.

### Code Style and Structure
- Use **TypeScript** for all project files for strong typing and IDE benefits.
- Follow **functional programming and declarative programming patterns**:
- Avoid using classes or overly imperative code.
- Utilize pure functions and modern React hooks effectively.
- Always write concise and clean TypeScript code with meaningful and descriptive variable names:
- Example: Use `isLoading`, `hasCompleted`, `fetchHabits` for clear intent.
- Avoid abbreviations or unclear names.
- Use a component-first design:
- Break the UI into small, reusable components.
- Write atomic components first, then combine them into larger molecules.
- Only export what is necessary from a module; avoid default exports.
- Use **consistent file naming conventions**:
- Lowercase with dashes for directories and files (e.g., `components/habit-tracker`).
- CamelCase for component and file exports (e.g., `HabitTracker`).
- Write modular code: avoid repetitive code by abstracting common patterns into reusable helpers or components.

### Directory Structure
Organize the project for clarity and scalability:
```
├── public/                 # Publicly accessible files
├── src/
│   ├── app/                # Next.js App Directory
│   │   ├── (site)/         # Global layout and shared site components
│   │   ├── auth/           # Login, Signup, and Auth flows
│   │   ├── dashboard/
│   │   │   ├── tracker/    # Habit tracking page
│   │   │   ├── stats/      # Habit stats page
│   │   │   └── layout.tsx  # Dashboard-level layout (e.g., sidebar)
│   │   └── layout.tsx      # Root layout (e.g., site-wide navigation)
│   ├── components/         # Reusable functional components
│   │   ├── ui/             # ShadCN and Radix-based UI primitives
│   │   ├── forms/          # Form implementations (inputs, validations)
│   │   └── charts/         # Charts for statistics
│   ├── contexts/           # Global state using React Context
│   ├── hooks/              # Custom React hooks
│   ├── lib/                # Utility functions and libraries
│   │   ├── supabaseClient.ts  # Supabase connection configuration
│   │   ├── dateUtils.ts    # Utilities for handling dates
│   │   └── constants.ts    # Static constants for habits, etc.
│   ├── services/           # Backend interaction functions (e.g., Supabase calls)
│   ├── types/              # TypeScript interfaces and types
│   ├── styles/             # Tailwind global and modular CSS
├── .env                    # Environment variables
├── .eslintrc.js            # ESLint configuration
└── tailwind.config.js      # TailwindCSS configuration
```

### UI and Styling
- Use **TailwindCSS** for all component styling. Avoid inline CSS or traditional global styles except for resets and utility purposes.
- Components should leverage **ShadCN UI** with **Radix Primitives** for interactive and accessible elements (e.g., dialogs, tooltips, dropdowns).
- Styling guidelines:
- Mobile-first approach: prioritize responsive layouts for small screens.
- Use only **@apply** for reusable patterns and avoid defining new utility classes unnecessarily.
- Use consistent design tokens within Tailwind configuration for predictable styling (e.g., colors, spacing, typography).
- Example for a UI Component:
```tsx
import { cn } from "@/lib/utils";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: "primary" | "secondary";
}
export const Button = ({ variant = "primary", ...props }: ButtonProps) => (
<button
className={cn(
"px-4 py-2 font-medium rounded transition",
variant === "primary" ? "bg-blue-500 text-white" : "bg-gray-200 text-black"
)}
{...props}
/>
);
```

### State Management
- Use the **React Context API** for global app state, such as:
- User authentication (`AuthContext`).
- Date or habit tracking filters (`DateContext`).
- Custom hooks should abstract logic (e.g., `useAuth`, `useDatePicker`).
- Avoid third-party state managers (e.g., Redux, MobX) unless scaling demands require it.
- Use **local component state** for ephemeral data (e.g., input field states, modal visibility).

### Routing
- Use the file-based routing system in the `app/` directory.
- Nested routes must have a clear hierarchy with layouts used for shared components:
- Example: `/dashboard/tracker` views extend `/dashboard/layout.tsx`.
- Authenticate protected routes via `_middleware`.

### Supabase Integration
- All database queries or calls should be wrapped into service functions located in `services/`.
- Always use parameterized queries to prevent injection or performance issues.
- **Supabase Client Configuration**:
- Centralized setup in `lib/supabaseClient.ts` to ensure consistency across all calls.
```ts
import { createClient } from "@supabase/supabase-js";
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_KEY!
);
```

### Error Handling and Validation
- Implement proactive early returns for error handling to reduce deeply nested code:
- Validate inputs with **Zod** schemas rather than manual logic.
- Use centralized error handlers to catch all API/service errors.
- Example:
```ts
import * as z from "zod";
const schema = z.object({
email: z.string().email(),
});
try {
schema.parse({ email });
} catch (e) {
console.error(e);
}
```

### Performance and Security
- Use **React Server Components (RSC)** where applicable to reduce client-side complexity.
- Prefer SSR and SSG over CSR where relevant to improve SEO and initial page load times.
- Optimize images using the `next/image` component with lazy loading and `WebP` format.
- Do not expose sensitive Supabase API keys on the client (only use `NEXT_PUBLIC_*` for public configuration).
- Ensure environment variables are documented and loaded securely.

### Testing and Documentation
- Write **unit tests** for components using Jest and React Testing Library.
- Each service function must have integration tests with mock Supabase responses.
- Document:
- Each major component with inline comments describing purpose and props.
- Custom hooks must include example usage at the top of the file.
- Use `README.md` for project-wide documentation.

### Naming Conventions
- **Directories and Files**: Use lowercase with hyphens.
- **Components**: Use PascalCase.
- **Functions and Variables**: Use camelCase.
- **Environment Variables**: Use UPPER_SNAKE_CASE.
```markdown
Example:
src/
components/
habit-tracker/
HabitTracker.tsx
```

### Deployment
- Deploy on **Vercel** with automatic CI/CD for each `main`/`production` branch update.
- Test changes thoroughly in staging environments before promotion to production.

### General Guidelines
- Always refer to the product documentation that is written in markdown documents in the docs/ directory in the project root.

Project context: This is a Laravel 9 JuzaWeb CMS project. i want redesign the complete design not functions and make it more and more better. 


my system theme folder location /themes
my system plugin folder location /plugins
my system modules folder location /modules

also write css in public\jw-styles\base\assets\css\custom.css
# Laravel Development Standards and Best Practices

You are an expert in Laravel, PHP, and related web development technologies.

# This project uses  
Juzaweb CMS is a Content Management System (CMS) developed based on Laravel Framework and web platform whose sole purpose is to make your development workflow simple again. Project develop by Juzaweb @https://github.com/juzaweb/cms

and i want redising using tabler admin dashboard with more best design system. tabler docs @https://tabler.io/docs/getting-started

 ## Core Principles
- Write concise, technical code following SOLID principles
- Design for scalability and maintai{!! bl !!}ility
- Follow PSR-12 coding standards with PHP 8.1+ features
- Use strict typing: declare(strict_types=1)
- Implement proper error handling and logging
- Use Service Classes for business logic with slim controllers

## Code Architecture

### Directory Structure
- Follow Laravel's official directory structure
- Use lowercase with dashes for directories
- Organize routes into feature-speci{!! bl !!} files

### Naming Conventions
- Models: Singular, PascalCase (User.php)
- Controllers: Plural, PascalCase (UsersController.php)
- Methods: camelCase
- Database Columns: snake_case
- Files: Match class names exactly

### Class Design
- Controllers:
  - Must be final classes or anything best prect{!! bl !!}s
  - Read-only (no property mutations)
  - Slim controllers with dependency injection via methods
  - Use Form Requests for validation

- Models:
  - Must be final classes
  - Utilize Eloquent relationships
  - Define proper database indexes
  - Implement robust data validation

### Type System
- Mandatory return type declarations
- Explicit parameter type hints
- Use PHP 8.1+ features (union types, nullable types)
- Maintain strict type consistency throughout

## Database & ORM
- Use Eloquent ORM over raw SQL
- Implement Repository pattern
- Use migrations and seeders
- Implement proper indexing
- Use database transactions for data integrity
- Utilize Laravel's query builder for complex queries

## API Development
- Implement versioning
- Use API Resources for response transformation
- Follow REST principles
- Use Laravel Sanctum for authentication
- Implement proper CSRF protection
- Use Laravel's built-in pagination

{
  "FrameworkSpecific": {
    "Cypress": {
      "structure": ["e2e", "fixtures", "support"]
    }
  },
  "DirectoryStructure": {
    "packages": ["cli", "request"],
    "public": true,
    "src": {
      "assets": true,
      "components": true,
      "composables": true,
      "directives": true,
      "router": true,
      "stores": true,
      "types": true,
      "utils": true,
      "views": true
    }
  },
  "TypeScript": {
    "use": true,
    "extend": true
  },
  "Vue": {
    "version": "3",
    "scriptSetup": true,
    "Pinia": true,
    "Router": true,
    "VueUse": true
  },
  "Lodash": {
    "import": "lodash-es"
  },
  "Vite": {
    "optimizeDeps": {
      "include": ["vue", "vue-router", "pinia", "lodash-es", "unocss", "@vueuse/core"]
    }
  },
  "CSS": {
    "framework": "UnoCSS"
  },
  "eslint": {
    "config": "antfu/eslint-config",
    "use": true
  },
  "Icons": {
    "plugin": "unplugin-icons"
  },
  "Alova": {
    "enabled": true
  },
  "pnpm": {
    "monorepo": true
  }
}