@ytspar/sweetlink 1.23.0 → 1.24.0-canary.180c708

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

@@ -1,441 +0,0 @@
-# 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