feat: output explanation

README.md

@@ -2,7 +2,7 @@
 
 A static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects.
 
-## Contributors
+## 👥 Contributors
 
 <table>
   <tr>
@@ -23,7 +23,7 @@ A static code analysis tool for detecting code smells and best practice violatio
   </tr>
 </table>
 
-## Installation
+## ⬇️ Installation
 
 ### As a vscode extension
 
@@ -70,7 +70,7 @@ npx jsr add @rrd/vue-mess-detector --save-dev
 bunx jsr add @rrd/vue-mess-detector --dev
 ```
 
-## Usage
+## ⚙️ Usage
 
 If you want to analyze your full project directory.
 
@@ -102,18 +102,32 @@ If you want to *group* the results by file add the `--group` flag with one of th
 npx vue-mess-detector analyze ./src --group=file
 ```
 
-## Example output
+## 📊 Example output
 
 #### Without `--group` flag (default behavior is to group per rule) ⬇️
 ![Output Image - Group By Rule](./docs/public/results-per-rule.png)
 
 #### With `--group=file` flag ⬇️
 ![Output Image - Group By File](./docs/public/results-per-file.png)
 
-## Documentation
+## ℹ️ Output explanation
+
+Group by Rule: In this view, the first line is highlighted in blue, representing the rule being evaluated. Following this, you'll see blocks of information structured as follows: file path, description, and message.
+
+Group by File: In this view, the first line displays the file path being evaluated. Below this, you'll see blocks of information with the following structure: rule, description, and message.
+
+Rule: The blue line that defines the specific rule being evaluated.
+
+File: Shows the path to the file where the rule is applied.
+
+Description: A concise explanation of the rule, often accompanied by a link to relevant documentation for further details.
+
+Message: Indicates the line of code where the rule was violated. Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected.
+
+## 📚 Documentation
 
 > 👉 For more information, see the [documentation](https://vue-mess-detector.webmania.cc/).
 
-## How to contribute?
+## 🤝 How to contribute?
 
 See [CONTRIBUTING.md](https://github.com/rrd108/vue-mess-detector/blob/main/CONTRIBUTING.md) file.

docs/get-started.md

@@ -98,14 +98,25 @@ If you want to *group* the results by file add the `--group` flag with one of th
 npx vue-mess-detector analyze ./src --group=file
 ```
 
-## Example output
+## 📊 Example output
 
 #### Without `--group` flag (default behavior is to group per rule) ⬇️
 ![Output Image - Group By Rule](./public/results-per-rule.png)
 
 #### With `--group=file` flag ⬇️
 ![Output Image - Group By File](./public/results-per-file.png)
 
+## ℹ️ Output explanation
+
+**Group by Rule:** In this view, the first line is highlighted in blue, representing the rule being evaluated. Following this, you'll see blocks of information structured as follows: file path, description, and message.
+
+**Group by File:** In this view, the first line displays the file path being evaluated. Below this, you'll see blocks of information with the following structure: rule, description, and message.
+
+- Rule: The blue line that defines the specific rule being evaluated.
+- File: Shows the path to the file where the rule is applied.
+- Description: A concise explanation of the rule, often accompanied by a link to relevant documentation for further details.
+- Message: Indicates the line of code where the rule was violated. Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected.
+
 ## 📋 Rulesets
 
 There are five rulesets available in Vue Mess Detector. Each ruleset has a different purpose and level of strictness.