vite-plugin-ai-annotator 1.1.0 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/annotator-toolbar.js +2 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,6 +76,15 @@ bun dev
|
|
|
76
76
|
|
|
77
77
|
The annotator toolbar will automatically appear in your application.
|
|
78
78
|
|
|
79
|
+
## Usage
|
|
80
|
+
|
|
81
|
+
1. Click the **inspect button** on the toolbar to enter selection mode
|
|
82
|
+
2. Click on any element(s) you want to modify
|
|
83
|
+
3. Ask Claude Code to modify them - it will use `annotator_get_selected_elements` to get the selected elements with their source locations
|
|
84
|
+
4. Claude modifies the source code directly
|
|
85
|
+
|
|
86
|
+
Example prompt: *"Make the selected button larger and change its color to blue"*
|
|
87
|
+
|
|
79
88
|
## Port Configuration
|
|
80
89
|
|
|
81
90
|
Default port is `7318`. You can customize it:
|
|
@@ -7957,8 +7957,9 @@
|
|
|
7957
7957
|
gap: 4px;
|
|
7958
7958
|
padding: 6px;
|
|
7959
7959
|
background: rgba(0, 0, 0, 0.9);
|
|
7960
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
7960
7961
|
border-radius: 10px;
|
|
7961
|
-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
7962
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05);
|
|
7962
7963
|
}
|
|
7963
7964
|
|
|
7964
7965
|
.toolbar-btn {
|
package/package.json
CHANGED