@designcrowd/fe-shared-lib 1.6.10-voiceText → 1.6.10-voiceText-2

package/.playwright-cli/page-2026-04-15T02-26-54-483Z.yml

@@ -0,0 +1,68 @@
+- generic [ref=e3]:
+  - navigation "Global" [ref=e6]:
+    - generic [ref=e10]:
+      - generic [ref=e11]:
+        - link "Skip to canvas" [ref=e12] [cursor=pointer]:
+          - /url: "#storybook-preview-wrapper"
+        - link "Storybook" [ref=e14] [cursor=pointer]:
+          - /url: ./
+          - img "Storybook" [ref=e15]
+        - button "Shortcuts" [ref=e21] [cursor=pointer]:
+          - img [ref=e22]
+      - generic [ref=e25]: Search for components
+      - combobox "Search for components" [ref=e27]:
+        - generic:
+          - img
+        - searchbox "Search for components" [ref=e28]
+        - code: ⌃ K
+  - main [ref=e52]:
+    - generic [ref=e54]:
+      - generic [ref=e55]:
+        - button "Remount component" [ref=e56] [cursor=pointer]:
+          - img [ref=e57]
+        - button "Zoom in" [ref=e59] [cursor=pointer]:
+          - img [ref=e60]
+        - button "Zoom out" [ref=e63] [cursor=pointer]:
+          - img [ref=e64]
+        - button "Reset zoom" [ref=e67] [cursor=pointer]:
+          - img [ref=e68]
+        - button "Enable measure" [ref=e71] [cursor=pointer]:
+          - img [ref=e72]
+        - button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
+          - img [ref=e76]
+        - button "Change the size of the preview" [ref=e79] [cursor=pointer]:
+          - img [ref=e80]
+        - button "Vision simulator" [ref=e85] [cursor=pointer]:
+          - img [ref=e86]
+        - generic:
+          - img
+      - generic [ref=e90]:
+        - button "Go full screen" [ref=e91] [cursor=pointer]:
+          - img [ref=e92]
+        - link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
+          - /url: iframe.html?id=components-voicetotextbutton--side-by-side
+          - img [ref=e95]
+        - button "Copy canvas link" [ref=e98] [cursor=pointer]:
+          - img [ref=e99]
+    - generic [ref=e103]:
+      - progressbar "Content is loading..." [ref=e105]
+      - generic [ref=e106]:
+        - link "Skip to sidebar" [ref=e107] [cursor=pointer]:
+          - /url: "#components-voicetotextbutton--side-by-side"
+        - iframe [ref=e108]:
+          
+  - generic [ref=e113]:
+    - tablist [ref=e115]:
+      - tab "Controls" [ref=e116] [cursor=pointer]:
+        - generic [ref=e118]: Controls
+      - tab "Actions" [ref=e119] [cursor=pointer]:
+        - generic [ref=e121]: Actions
+      - tab "Interactions" [ref=e122] [cursor=pointer]:
+        - generic [ref=e124]: Interactions
+      - tab "Accessibility" [ref=e125] [cursor=pointer]:
+        - generic [ref=e127]: Accessibility
+    - generic [ref=e130]:
+      - button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
+        - img [ref=e132]
+      - button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
+        - img [ref=e136]

package/.playwright-cli/page-2026-04-15T02-39-01-736Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-39-10-233Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-39-43-909Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-40-54-188Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-40-59-031Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-10-941Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-17-020Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [active] [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-51-42-403Z.yml

@@ -0,0 +1,2 @@
+- generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+  - img [ref=e3]

package/.playwright-cli/page-2026-04-15T02-51-53-552Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e7]:
+  - generic [ref=e9]:
+    - heading "Dark Variant - All States" [level=3] [ref=e10]
+    - generic [ref=e11]:
+      - generic [ref=e12]:
+        - button "Start voice input" [ref=e14] [cursor=pointer]:
+          - img [ref=e16]
+        - paragraph [ref=e18]: Small
+      - generic [ref=e19]:
+        - button "Start voice input" [ref=e21] [cursor=pointer]:
+          - img [ref=e23]
+        - paragraph [ref=e25]: Medium (default)
+      - generic [ref=e26]:
+        - button "Start voice input" [ref=e28] [cursor=pointer]:
+          - img [ref=e30]
+        - paragraph [ref=e32]: Large
+      - generic [ref=e33]:
+        - button "Start voice input" [disabled] [ref=e35] [cursor=pointer]:
+          - img [ref=e37]
+        - paragraph [ref=e39]: Disabled
+    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e1]:
+    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+      - img [ref=e3]
+    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
+      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-51-54-631Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e7]:
+  - generic [ref=e9]:
+    - heading "Dark Variant - All States" [level=3] [ref=e10]
+    - generic [ref=e11]:
+      - generic [ref=e12]:
+        - button "Stop voice input" [active] [ref=e47] [cursor=pointer]:
+          - img [ref=e16]
+        - paragraph [ref=e18]: Small
+      - generic [ref=e19]:
+        - button "Stop voice input" [ref=e48] [cursor=pointer]:
+          - img [ref=e23]
+        - paragraph [ref=e25]: Medium (default)
+      - generic [ref=e26]:
+        - button "Stop voice input" [ref=e49] [cursor=pointer]:
+          - img [ref=e30]
+        - paragraph [ref=e32]: Large
+      - generic [ref=e33]:
+        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
+          - img [ref=e37]
+        - paragraph [ref=e39]: Disabled
+    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e1]:
+    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+      - img [ref=e3]
+    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
+      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-16-170Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e7]:
+  - generic [ref=e9]:
+    - heading "Dark Variant - All States" [level=3] [ref=e10]
+    - generic [ref=e11]:
+      - generic [ref=e12]:
+        - button "Stop voice input" [active] [ref=e47] [cursor=pointer]:
+          - img [ref=e16]
+        - paragraph [ref=e18]: Small
+      - generic [ref=e19]:
+        - button "Stop voice input" [ref=e48] [cursor=pointer]:
+          - img [ref=e23]
+        - paragraph [ref=e25]: Medium (default)
+      - generic [ref=e26]:
+        - button "Stop voice input" [ref=e49] [cursor=pointer]:
+          - img [ref=e30]
+        - paragraph [ref=e32]: Large
+      - generic [ref=e33]:
+        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
+          - img [ref=e37]
+        - paragraph [ref=e39]: Disabled
+    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e1]:
+    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+      - img [ref=e3]
+    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
+      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-17-246Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e7]:
+  - generic [ref=e9]:
+    - heading "Dark Variant - All States" [level=3] [ref=e10]
+    - generic [ref=e11]:
+      - generic [ref=e12]:
+        - button "Stop voice input" [ref=e47] [cursor=pointer]:
+          - img [ref=e16]
+        - paragraph [ref=e18]: Small
+      - generic [ref=e19]:
+        - button "Stop voice input" [ref=e48] [cursor=pointer]:
+          - img [ref=e23]
+        - paragraph [ref=e25]: Medium (default)
+      - generic [ref=e26]:
+        - button "Stop voice input" [ref=e49] [cursor=pointer]:
+          - img [ref=e30]
+        - paragraph [ref=e32]: Large
+      - generic [ref=e33]:
+        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
+          - img [ref=e37]
+        - paragraph [ref=e39]: Disabled
+    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e1]:
+    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+      - img [ref=e3]
+    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
+      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-52-28-472Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e7]:
+  - generic [ref=e9]:
+    - heading "Dark Variant - All States" [level=3] [ref=e10]
+    - generic [ref=e11]:
+      - generic [ref=e12]:
+        - button "Stop voice input" [ref=e47] [cursor=pointer]:
+          - img [ref=e16]
+        - paragraph [ref=e18]: Small
+      - generic [ref=e19]:
+        - button "Stop voice input" [ref=e48] [cursor=pointer]:
+          - img [ref=e23]
+        - paragraph [ref=e25]: Medium (default)
+      - generic [ref=e26]:
+        - button "Stop voice input" [ref=e49] [cursor=pointer]:
+          - img [ref=e30]
+        - paragraph [ref=e32]: Large
+      - generic [ref=e33]:
+        - button "Stop voice input" [disabled] [ref=e50] [cursor=pointer]:
+          - img [ref=e37]
+        - paragraph [ref=e39]: Disabled
+    - paragraph [ref=e40]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e1]:
+    - generic "Toggle devtools panel" [ref=e2] [cursor=pointer]:
+      - img [ref=e3]
+    - generic "Toggle Component Inspector" [ref=e42] [cursor=pointer]:
+      - img [ref=e43]

package/.playwright-cli/page-2026-04-15T02-53-16-554Z.yml

@@ -0,0 +1,26 @@
+- generic [active] [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e10] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [ref=e17] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e24] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e31] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-53-22-178Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Stop voice input" [ref=e49] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Stop voice input" [active] [ref=e50] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Stop voice input" [ref=e51] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Stop voice input" [disabled] [ref=e52] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/.playwright-cli/page-2026-04-15T02-53-34-973Z.yml

@@ -0,0 +1,26 @@
+- generic [ref=e3]:
+  - generic [ref=e5]:
+    - heading "Dark Variant - All States" [level=3] [ref=e6]
+    - generic [ref=e7]:
+      - generic [ref=e8]:
+        - button "Start voice input" [ref=e53] [cursor=pointer]:
+          - img [ref=e12]
+        - paragraph [ref=e14]: Small
+      - generic [ref=e15]:
+        - button "Start voice input" [active] [ref=e54] [cursor=pointer]:
+          - img [ref=e19]
+        - paragraph [ref=e21]: Medium (default)
+      - generic [ref=e22]:
+        - button "Start voice input" [ref=e55] [cursor=pointer]:
+          - img [ref=e26]
+        - paragraph [ref=e28]: Large
+      - generic [ref=e29]:
+        - button "Start voice input" [disabled] [ref=e56] [cursor=pointer]:
+          - img [ref=e33]
+        - paragraph [ref=e35]: Disabled
+    - paragraph [ref=e36]: Click any button to see the recording state with grey circle indicator
+  - generic [ref=e37]:
+    - generic "Toggle devtools panel" [ref=e38] [cursor=pointer]:
+      - img [ref=e39]
+    - generic "Toggle Component Inspector" [ref=e44] [cursor=pointer]:
+      - img [ref=e45]

package/CLAUDE.md

@@ -78,6 +78,41 @@ Themes are compiled into separate CSS files via `tailwind.build.js` → `dist/cs
 - Stories pattern: `src/**/components/**/*.stories.@(js|jsx|ts|tsx)`
 - Supports theme switching (5 brands) and locale switching (8 languages)
 
+## Verifying UI Changes
+
+After modifying Vue components or Storybook stories, verify changes visually using playwright-cli.
+
+### Workflow
+
+1. **Start Storybook** (runs in background):
+   ```bash
+   npm start
+   ```
+
+2. **Wait for availability** - Storybook runs on http://localhost:6006. Check with:
+   ```bash
+   curl -s -o /dev/null -w "%{http_code}" http://localhost:6006
+   ```
+
+3. **Navigate and screenshot** using playwright-cli:
+   ```bash
+   playwright-cli open "http://localhost:6006/?path=/story/components-buttonname--default"
+   playwright-cli snapshot  # See page structure
+   playwright-cli screenshot f1e4 --filename=component.png  # Screenshot specific element
+   playwright-cli close
+   ```
+
+### Story URL Pattern
+
+Stories are accessed via: `http://localhost:6006/?path=/story/{title-path}--{story-name}`
+- Title path: lowercase, hyphens instead of spaces/slashes (e.g., `Components/VoiceToTextButton` becomes `components-voicetotextbutton`)
+- Story name: lowercase export name (e.g., `Default` becomes `default`)
+
+### Common Issues
+
+- **package.json parse errors**: Ensure valid JSON (watch for missing commas after version changes)
+- **React dependency errors**: Storybook 9 requires `react` and `react-dom` as devDependencies
+
 ## Local Development
 
 Use `npm link` for local development with consumer projects: