@ytspar/sweetlink 1.15.0 → 1.16.1

package/claude-skills/responsive-screenshots/examples.md

@@ -0,0 +1,441 @@
+# Responsive Screenshots - Examples
+
+Common usage patterns for testing responsive design across breakpoints.
+
+## Example 1: Complete Responsive Test
+
+**User Request:**
+> "Test the new landing page across all breakpoints"
+
+**Skill Action:**
+
+```bash
+# Capture all breakpoints
+pnpm sweetlink screenshot --viewport mobile --output /tmp/screenshots/landing-mobile.png
+pnpm sweetlink screenshot --viewport tablet --output /tmp/screenshots/landing-tablet.png
+pnpm sweetlink screenshot --viewport desktop --output /tmp/screenshots/landing-desktop.png
+```
+
+**Output:**
+
+```text
+✅ Responsive Test: Landing Page
+
+📱 Mobile (375px)
+   Screenshot: /tmp/screenshots/landing-mobile.png
+   ✅ Single column layout
+   ✅ Touch-friendly navigation
+   ✅ Images scale correctly
+   ✅ Text readable at 16px
+
+💻 Tablet (768px)
+   Screenshot: /tmp/screenshots/landing-tablet.png
+   ✅ Two-column grid
+   ✅ Navigation bar expanded
+   ✅ Hero image displays properly
+   ✅ Call-to-action buttons visible
+
+🖥️  Desktop (1440px)
+   Screenshot: /tmp/screenshots/landing-desktop.png
+   ✅ Three-column grid
+   ✅ Full navigation with all items
+   ✅ Hero section uses full width
+   ✅ Professional whitespace
+
+Overall: ✅ PASSED - All breakpoints look great!
+```
+
+---
+
+## Example 2: Component-Specific Testing
+
+**User Request:**
+> "Check how the navigation menu looks on mobile vs desktop"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --selector "nav" --output /tmp/screenshots/nav-mobile.png
+pnpm sweetlink screenshot --viewport desktop --selector "nav" --output /tmp/screenshots/nav-desktop.png
+```
+
+**Output:**
+
+```text
+🔍 Navigation Component Analysis
+
+📱 Mobile (375px)
+   Screenshot: /tmp/screenshots/nav-mobile.png
+   Status: ⚠️  NEEDS WORK
+
+   Issues:
+   - Menu items are cramped (only 8px padding)
+   - Logo is too large for mobile screen
+   - Menu overlaps content slightly
+
+   Recommendations:
+   - Increase padding to 16px
+   - Reduce logo size by 30%
+   - Add z-index to ensure menu is above content
+
+🖥️  Desktop (1440px)
+   Screenshot: /tmp/screenshots/nav-desktop.png
+   Status: ✅ PERFECT
+
+   - Horizontal layout works well
+   - All menu items visible
+   - Logo is appropriately sized
+   - Spacing is professional
+```
+
+---
+
+## Example 3: Before/After Comparison
+
+**User Request:**
+> "I updated the responsive styles, show me the difference"
+
+**Skill Action:**
+
+```bash
+# Before (git stash to revert)
+git stash
+pnpm sweetlink screenshot --viewport mobile --output /tmp/screenshots/before-mobile.png
+git stash pop
+
+# After (with changes)
+pnpm sweetlink screenshot --viewport mobile --output /tmp/screenshots/after-mobile.png
+```
+
+**Output:**
+
+```markdown
+📊 Before/After Comparison (Mobile)
+
+### Before:
+Screenshot: /tmp/screenshots/before-mobile.png
+Issues:
+- Text overflows container
+- Images don't scale
+- Buttons are too small
+
+### After:
+Screenshot: /tmp/screenshots/after-mobile.png
+Improvements:
+✅ Text wraps properly with word-break
+✅ Images use w-full class
+✅ Buttons increased to min-h-12
+
+Result: Significant improvement in mobile usability!
+```
+
+---
+
+## Example 4: Grid Layout Verification
+
+**User Request:**
+> "Verify the card grid works at all breakpoints"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --selector ".card-grid" --output /tmp/screenshots/grid-mobile.png
+pnpm sweetlink screenshot --viewport tablet --selector ".card-grid" --output /tmp/screenshots/grid-tablet.png
+pnpm sweetlink screenshot --viewport desktop --selector ".card-grid" --output /tmp/screenshots/grid-desktop.png
+```
+
+**Output:**
+
+```text
+🎯 Card Grid Responsive Analysis
+
+📱 Mobile (375px)
+   Screenshot: /tmp/screenshots/grid-mobile.png
+   Layout: 1 column
+   Cards: 3 visible (stack vertically)
+   ✅ Works perfectly - easy to scroll through
+
+💻 Tablet (768px)
+   Screenshot: /tmp/screenshots/grid-tablet.png
+   Layout: 2 columns
+   Cards: 6 visible (3 rows × 2 columns)
+   ✅ Good use of space
+
+🖥️  Desktop (1440px)
+   Screenshot: /tmp/screenshots/grid-desktop.png
+   Layout: 3 columns
+   Cards: 9 visible (3 rows × 3 columns)
+   ✅ Excellent grid layout
+
+Responsive Grid: ✅ APPROVED
+Grid scales perfectly from 1 → 2 → 3 columns
+```
+
+---
+
+## Example 5: Detecting Layout Issues
+
+**User Request:**
+> "The page looks weird on tablet, debug it"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport tablet --output /tmp/screenshots/tablet-debug.png
+pnpm sweetlink logs --filter error
+```
+
+**Output:**
+
+```yaml
+🐛 Tablet Layout Debug
+
+Screenshot: /tmp/screenshots/tablet-debug.png
+
+Issues Detected:
+1. ⚠️  Awkward 2-column layout
+   - Sidebar too narrow (only 200px)
+   - Main content area cramped
+
+2. ⚠️  Navigation partially hidden
+   - Menu items cut off at 768px
+   - Dropdown doesn't fit viewport
+
+3. ⚠️  Images not scaling
+   - Fixed width images (500px) overflow
+   - Should use max-w-full
+
+Console Errors:
+[ERROR] Element width exceeds viewport
+
+Root Cause:
+Missing md: breakpoint styles. Layout jumps from mobile
+to desktop without tablet-specific styling.
+
+Fix:
+Add explicit md: classes:
+- md:grid-cols-2
+- md:gap-4
+- md:max-w-full
+```
+
+---
+
+## Example 6: Accessibility Testing
+
+**User Request:**
+> "Check if touch targets are large enough on mobile"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --output /tmp/screenshots/mobile-touch.png
+```
+
+**Output:**
+
+```text
+📱 Mobile Touch Target Analysis
+
+Screenshot: /tmp/screenshots/mobile-touch.png
+
+Touch Target Audit:
+✅ Primary CTA button: 56px height (good)
+✅ Navigation menu items: 48px height (minimum)
+⚠️  Close icon: 32px (too small)
+⚠️  Dropdown arrows: 24px (too small)
+❌ Footer links: 20px (far too small)
+
+Recommendations:
+1. Increase close icon to 48px minimum
+2. Increase dropdown touch area to 44px
+3. Add padding to footer links (min 48px total)
+
+Touch targets below 44px are hard to tap on mobile devices.
+```
+
+---
+
+## Example 7: Typography Scaling
+
+**User Request:**
+> "Check if the heading sizes look good across devices"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --selector "h1" --output /tmp/screenshots/h1-mobile.png
+pnpm sweetlink screenshot --viewport desktop --selector "h1" --output /tmp/screenshots/h1-desktop.png
+```
+
+**Output:**
+
+```text
+📝 Typography Analysis
+
+📱 Mobile H1:
+   Screenshot: /tmp/screenshots/h1-mobile.png
+   Font size: 28px (via computed style)
+   Line height: 1.2
+   ⚠️  Slightly small - recommend 32px minimum
+
+🖥️  Desktop H1:
+   Screenshot: /tmp/screenshots/h1-desktop.png
+   Font size: 48px (via computed style)
+   Line height: 1.2
+   ✅ Perfect size for desktop
+
+Recommendation:
+Update Tailwind classes:
+- Mobile: text-3xl (30px) or text-4xl (36px)
+- Desktop: text-5xl (48px) - current ✓
+```
+
+---
+
+## Example 8: Full Page Responsive Audit
+
+**User Request:**
+> "Do a complete responsive audit of the dashboard"
+
+**Skill Action:**
+
+```bash
+# Capture all viewports
+for viewport in mobile tablet desktop; do
+  pnpm sweetlink screenshot --viewport $viewport --output /tmp/screenshots/dashboard-$viewport.png
+  pnpm sweetlink logs --filter error
+done
+```
+
+**Output:**
+
+```text
+📋 Complete Responsive Audit: Dashboard
+
+### Mobile (375px)
+Screenshot: /tmp/screenshots/dashboard-mobile.png
+✅ Layout: Single column works
+✅ Cards: Stack vertically
+✅ Navigation: Hamburger menu
+⚠️  Issue: Charts are too small to read
+   Fix: Consider horizontal scrolling for charts
+
+### Tablet (768px)
+Screenshot: /tmp/screenshots/dashboard-tablet.png
+✅ Layout: 2-column works well
+✅ Navigation: Expanded header
+✅ Charts: Adequate size
+✅ Sidebar: Collapsible design works
+
+### Desktop (1440px)
+Screenshot: /tmp/screenshots/dashboard-desktop.png
+✅ Layout: 3-column grid optimal
+✅ Navigation: All items visible
+✅ Charts: Full size, very readable
+✅ Sidebar: Persistent and useful
+
+Console Errors: 0 across all viewports ✓
+
+Overall Grade: B+ (Mobile charts need improvement)
+
+Next Steps:
+1. Make charts horizontally scrollable on mobile
+2. Add touch gestures for chart interaction
+3. Consider hiding less critical data on mobile
+```
+
+---
+
+## Example 9: Navigation State Testing
+
+**User Request:**
+> "Test the navigation menu at different breakpoints"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --selector ".nav-menu" --output /tmp/screenshots/nav-mobile.png
+pnpm sweetlink screenshot --viewport tablet --selector ".nav-menu" --output /tmp/screenshots/nav-tablet.png
+pnpm sweetlink screenshot --viewport desktop --selector ".nav-menu" --output /tmp/screenshots/nav-desktop.png
+```
+
+**Output:**
+
+```text
+🧭 Navigation Responsive States
+
+📱 Mobile (375px): Hamburger Menu
+   Screenshot: /tmp/screenshots/nav-mobile.png
+   State: Collapsed by default
+   ✅ Hamburger icon visible (32px)
+   ✅ Menu slides from left
+   ✅ Full screen overlay works
+
+💻 Tablet (768px): Hybrid Layout
+   Screenshot: /tmp/screenshots/nav-tablet.png
+   State: Partial expansion
+   ✅ Logo + key items visible
+   ✅ Overflow items in dropdown
+   ✅ Balanced use of space
+
+🖥️  Desktop (1440px): Full Navigation
+   Screenshot: /tmp/screenshots/nav-desktop.png
+   State: Fully expanded
+   ✅ All menu items visible
+   ✅ Dropdown menus on hover
+   ✅ Professional spacing
+
+Navigation Pattern: ✅ EXCELLENT
+Progressive disclosure works perfectly across devices
+```
+
+---
+
+## Example 10: Image Scaling Test
+
+**User Request:**
+> "Verify the hero image scales properly"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink screenshot --viewport mobile --selector ".hero" --output /tmp/screenshots/hero-mobile.png
+pnpm sweetlink screenshot --viewport desktop --selector ".hero" --output /tmp/screenshots/hero-desktop.png
+```
+
+**Output:**
+
+```text
+🖼️  Hero Image Scaling Analysis
+
+📱 Mobile (375px)
+   Screenshot: /tmp/screenshots/hero-mobile.png
+   Image: 375×250px (aspect ratio 3:2)
+   ✅ Scales to full width
+   ✅ No overflow or distortion
+   ✅ Loading: lazy ✓
+
+🖥️  Desktop (1440px)
+   Screenshot: /tmp/screenshots/hero-desktop.png
+   Image: 1440×600px (aspect ratio 2.4:1)
+   ✅ Uses full container width
+   ✅ High resolution (retina ready)
+   ✅ Object-fit: cover maintains aspect
+
+Image Handling: ✅ PERFECT
+Responsive images working correctly with proper aspect ratios
+```
+
+---
+
+## Best Practices Demonstrated
+
+1. **Test all three breakpoints** - Mobile, tablet, desktop coverage
+2. **Component-specific tests** - Focus on specific areas
+3. **Before/after comparisons** - Verify improvements
+4. **Touch target validation** - Ensure mobile usability
+5. **Typography scaling** - Check readability across sizes
+6. **Layout verification** - Confirm grid behavior
+7. **Console monitoring** - Check for layout errors
+8. **Complete audits** - Systematic full-page reviews

package/claude-skills/screenshot/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "screenshot",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Take a screenshot of the app",
+      "expected_output": "The skill uses Sweetlink to capture a screenshot of the running application",
+      "expectations": [
+        "Uses Sweetlink screenshot command to capture the current page",
+        "Returns or saves the screenshot image",
+        "Does not use Playwright or other browser automation"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "Screenshot the homepage",
+      "expected_output": "The skill captures a screenshot of the specified page (homepage)",
+      "expectations": [
+        "Navigates to or targets the homepage URL/path",
+        "Uses Sweetlink screenshot command",
+        "Returns the captured screenshot for review"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "Take screenshots at mobile, tablet, and desktop breakpoints",
+      "expected_output": "This should NOT trigger the single screenshot skill. Multi-viewport screenshots are handled by responsive-screenshots.",
+      "expectations": [
+        "Does NOT trigger screenshot skill for multi-viewport capture",
+        "Routes to responsive-screenshots instead",
+        "Single screenshot skill handles only one viewport at a time"
+      ]
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ytspar/sweetlink",
-  "version": "1.15.0",
+  "version": "1.16.1",
   "description": "Autonomous development toolkit for AI agents - screenshots, DOM queries, console logs, and JavaScript execution via WebSocket and Chrome DevTools Protocol",
   "keywords": [
     "autonomous-development",
@@ -23,75 +23,93 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./types": {
       "types": "./dist/types.d.ts",
-      "import": "./dist/types.js"
+      "import": "./dist/types.js",
+      "default": "./dist/types.js"
     },
     "./server": {
       "types": "./dist/server.d.ts",
-      "import": "./dist/server.js"
+      "import": "./dist/server.js",
+      "default": "./dist/server.js"
     },
     "./browser": {
       "types": "./dist/browser.d.ts",
-      "import": "./dist/browser.js"
+      "import": "./dist/browser.js",
+      "default": "./dist/browser.js"
     },
     "./browser/commands/schema": {
       "types": "./dist/browser/commands/schema.d.ts",
-      "import": "./dist/browser/commands/schema.js"
+      "import": "./dist/browser/commands/schema.js",
+      "default": "./dist/browser/commands/schema.js"
     },
     "./browser/commands/outline": {
       "types": "./dist/browser/commands/outline.d.ts",
-      "import": "./dist/browser/commands/outline.js"
+      "import": "./dist/browser/commands/outline.js",
+      "default": "./dist/browser/commands/outline.js"
     },
     "./browser/consoleCapture": {
       "types": "./dist/browser/consoleCapture.d.ts",
-      "import": "./dist/browser/consoleCapture.js"
+      "import": "./dist/browser/consoleCapture.js",
+      "default": "./dist/browser/consoleCapture.js"
     },
     "./browser/earlyConsoleCapture": {
       "types": "./dist/browser/earlyConsoleCapture.d.ts",
-      "import": "./dist/browser/earlyConsoleCapture.js"
+      "import": "./dist/browser/earlyConsoleCapture.js",
+      "default": "./dist/browser/earlyConsoleCapture.js"
     },
     "./browser/screenshotUtils": {
       "types": "./dist/browser/screenshotUtils.d.ts",
-      "import": "./dist/browser/screenshotUtils.js"
+      "import": "./dist/browser/screenshotUtils.js",
+      "default": "./dist/browser/screenshotUtils.js"
     },
     "./urlUtils": {
       "types": "./dist/urlUtils.d.ts",
-      "import": "./dist/urlUtils.js"
+      "import": "./dist/urlUtils.js",
+      "default": "./dist/urlUtils.js"
     },
     "./ruler": {
       "types": "./dist/ruler.d.ts",
-      "import": "./dist/ruler.js"
+      "import": "./dist/ruler.js",
+      "default": "./dist/ruler.js"
     },
     "./playwright": {
       "types": "./dist/playwright.d.ts",
-      "import": "./dist/playwright.js"
+      "import": "./dist/playwright.js",
+      "default": "./dist/playwright.js"
     },
     "./cdp": {
       "types": "./dist/cdp.d.ts",
-      "import": "./dist/cdp.js"
+      "import": "./dist/cdp.js",
+      "default": "./dist/cdp.js"
     },
     "./vite": {
       "types": "./dist/vite.d.ts",
-      "import": "./dist/vite.js"
+      "import": "./dist/vite.js",
+      "default": "./dist/vite.js"
     },
     "./auto": {
       "types": "./dist/auto.d.ts",
-      "import": "./dist/auto.js"
+      "import": "./dist/auto.js",
+      "default": "./dist/auto.js"
     },
     "./next": {
       "types": "./dist/next.d.ts",
-      "import": "./dist/next.js"
+      "import": "./dist/next.js",
+      "default": "./dist/next.js"
     },
     "./daemon": {
       "types": "./dist/daemon/types.d.ts",
-      "import": "./dist/daemon/types.js"
+      "import": "./dist/daemon/types.js",
+      "default": "./dist/daemon/types.js"
     },
     "./daemon/client": {
       "types": "./dist/daemon/client.d.ts",
-      "import": "./dist/daemon/client.js"
+      "import": "./dist/daemon/client.js",
+      "default": "./dist/daemon/client.js"
     }
   },
   "bin": {
@@ -103,6 +121,8 @@
     "dist",
     "scripts",
     "claude-skills",
+    "claude-agents",
+    "claude-context",
     "README.md",
     "LICENSE"
   ],
@@ -113,6 +133,14 @@
     "node": ">=20.0.0"
   },
   "private": false,
+  "scripts": {
+    "prepublishOnly": "node ../../scripts/check-release-notes.mjs && rm -rf dist && tsc",
+    "build": "rm -rf dist && tsc",
+    "test": "vitest run",
+    "dev": "node dist/cli/sweetlink-dev.js",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist claude-context"
+  },
   "peerDependencies": {
     "axe-core": "^4.0.0",
     "html2canvas-pro": "^2.0.0",
@@ -159,12 +187,5 @@
   "bugs": {
     "url": "https://github.com/ytspar/devbar/issues"
   },
-  "homepage": "https://github.com/ytspar/devbar/tree/main/packages/sweetlink#readme",
-  "scripts": {
-    "build": "rm -rf dist && tsc",
-    "test": "vitest run",
-    "dev": "node dist/cli/sweetlink-dev.js",
-    "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist claude-context"
-  }
-}
+  "homepage": "https://github.com/ytspar/devbar/tree/main/packages/sweetlink#readme"
+}