@ytspar/sweetlink 1.15.0 → 1.16.1

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

@@ -0,0 +1,366 @@
+---
+name: responsive-screenshots
+description: "Capture screenshots at mobile/tablet/desktop breakpoints via Sweetlink. Triggers on: \"responsive screenshots\", \"test breakpoints\", \"check mobile/tablet/desktop\", \"viewport screenshots\". NOT for single screenshots (use screenshot) or Playwright-based design review (use design-review agent)."
+allowed-tools: Bash
+---
+
+# Responsive Screenshots Skill
+
+Capture screenshots at standard responsive breakpoints to verify designs work across all device sizes.
+
+## Purpose
+
+This skill automates responsive design testing by capturing screenshots at common viewport sizes. It ensures layouts adapt correctly and maintains visual quality across mobile, tablet, and desktop devices.
+
+## When to Use
+
+**Automatically use this skill when:**
+
+- Implementing responsive layouts or components
+- After making CSS/styling changes
+- During design reviews and QA
+- User asks to "test responsive design"
+- Verifying Tailwind breakpoint behavior
+- Before marking UI tasks as complete
+- Testing navigation, grids, or complex layouts
+
+## How It Works
+
+The skill captures screenshots at three standard breakpoints:
+
+1. **Mobile**: 375px width (iPhone SE, common mobile)
+2. **Tablet**: 768px width (iPad, tablet devices)
+3. **Desktop**: 1440px width (standard desktop/laptop)
+
+Screenshots are saved to `.tmp/screenshots/` with descriptive names.
+
+## Commands
+
+### Capture All Breakpoints
+
+```bash
+# Mobile (375px)
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/mobile.png
+
+# Tablet (768px)
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/tablet.png
+
+# Desktop (1440px)
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/desktop.png
+```
+
+### Capture Specific Component
+
+```bash
+# Mobile view of header
+pnpm sweetlink screenshot --viewport mobile --selector "header" --output .tmp/screenshots/header-mobile.png
+
+# Tablet view of card grid
+pnpm sweetlink screenshot --viewport tablet --selector ".card-grid" --output .tmp/screenshots/cards-tablet.png
+
+# Desktop view of dashboard
+pnpm sweetlink screenshot --viewport desktop --selector "main" --output .tmp/screenshots/dashboard-desktop.png
+```
+
+## Standard Breakpoints
+
+### Mobile (375px)
+
+- **Devices**: iPhone SE, small phones
+- **Tailwind**: Default styles, before `sm:` breakpoint
+- **Use case**: Verify mobile-first design works on smallest screens
+- **Common issues**: Text overflow, cramped layouts, touch targets too small
+
+### Tablet (768px)
+
+- **Devices**: iPad, tablets, small laptops
+- **Tailwind**: `md:` breakpoint
+- **Use case**: Verify intermediate layouts between mobile and desktop
+- **Common issues**: Awkward grid columns, navbar behavior
+
+### Desktop (1440px)
+
+- **Devices**: Laptops, desktop monitors
+- **Tailwind**: `lg:` and `xl:` breakpoints
+- **Use case**: Verify full desktop experience with all features visible
+- **Common issues**: Too much whitespace, misaligned grids
+
+## Output Format
+
+### Success
+
+```text
+✅ Responsive Screenshots Captured
+
+📱 Mobile (375px): .tmp/screenshots/mobile.png
+💻 Tablet (768px): .tmp/screenshots/tablet.png
+🖥️  Desktop (1440px): .tmp/screenshots/desktop.png
+
+All viewports captured successfully.
+Review screenshots for responsive behavior.
+```
+
+### With Analysis
+
+```text
+📸 Responsive Design Review
+
+### Mobile (375px)
+Screenshot: .tmp/screenshots/mobile.png
+✅ Layout: Adapts correctly
+✅ Text: Readable, no overflow
+✅ Touch targets: Adequate size (48px min)
+⚠️  Issue: Navigation menu slightly cramped
+
+### Tablet (768px)
+Screenshot: .tmp/screenshots/tablet.png
+✅ Layout: Two-column grid works well
+✅ Navigation: Expanded header looks good
+✅ Images: Scaled appropriately
+
+### Desktop (1440px)
+Screenshot: .tmp/screenshots/desktop.png
+✅ Layout: Three-column grid displays properly
+✅ Whitespace: Professional spacing
+✅ Typography: Excellent hierarchy
+
+### Overall Assessment:
+✅ Responsive design PASSED
+Minor fix needed: Mobile navigation spacing
+
+Recommendation: Increase padding on mobile nav items
+```
+
+## Best Practices
+
+### Complete Responsive Check
+
+```bash
+# 1. Capture all breakpoints
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/mobile.png
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/tablet.png
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/desktop.png
+
+# 2. Read screenshots back to analyze
+# (Use Read tool to view each screenshot)
+
+# 3. Compare against design requirements
+
+# 4. Document any issues found
+```
+
+### Component-Specific Testing
+
+```bash
+# Test specific component across breakpoints
+pnpm sweetlink screenshot --viewport mobile --selector ".hero" --output .tmp/screenshots/hero-mobile.png
+pnpm sweetlink screenshot --viewport tablet --selector ".hero" --output .tmp/screenshots/hero-tablet.png
+pnpm sweetlink screenshot --viewport desktop --selector ".hero" --output .tmp/screenshots/hero-desktop.png
+```
+
+### Before/After Comparison
+
+```bash
+# Before changes
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/before-mobile.png
+
+# Make CSS changes
+
+# After changes
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/after-mobile.png
+
+# Compare to verify improvement
+```
+
+## Common Responsive Issues
+
+### Issue 1: Text Overflow on Mobile
+
+**Symptom:** Text gets cut off or wraps awkwardly
+**Check:** Mobile screenshot shows truncated content
+**Fix:** Reduce font size or adjust container width
+
+### Issue 2: Awkward Tablet Layout
+
+**Symptom:** Layout looks worse on tablet than mobile or desktop
+**Check:** Tablet screenshot shows misaligned elements
+**Fix:** Add explicit `md:` breakpoint styles
+
+### Issue 3: Too Much Whitespace on Desktop
+
+**Symptom:** Content looks lost on large screens
+**Check:** Desktop screenshot shows excessive margins
+**Fix:** Add max-width container or adjust grid columns
+
+### Issue 4: Navigation Breaks on Mobile
+
+**Symptom:** Menu items overlap or are inaccessible
+**Check:** Mobile screenshot shows broken navigation
+**Fix:** Implement hamburger menu or vertical layout
+
+### Issue 5: Images Don't Scale
+
+**Symptom:** Images overflow or are too small
+**Check:** Screenshots show images breaking layout
+**Fix:** Add responsive image classes (w-full, max-w-*)
+
+## Tailwind Breakpoint Mapping
+
+```typescript
+// Tailwind default breakpoints
+const breakpoints = {
+  sm: '640px',   // Small devices
+  md: '768px',   // Medium devices (tablet)
+  lg: '1024px',  // Large devices
+  xl: '1280px',  // Extra large
+  '2xl': '1536px' // 2X extra large
+};
+
+// Our test viewports
+const testViewports = {
+  mobile: '375px',   // Below 'sm' - tests default mobile styles
+  tablet: '768px',   // 'md' breakpoint - tests tablet layout
+  desktop: '1440px'  // Between 'xl' and '2xl' - tests desktop layout
+};
+```
+
+## Integration with Development Workflow
+
+### During Implementation
+
+```bash
+# After writing responsive CSS
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/check-mobile.png
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/check-tablet.png
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/check-desktop.png
+
+# Review and iterate until perfect
+```
+
+### During Code Review
+
+```bash
+# Capture PR changes across breakpoints
+git checkout feature-branch
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/pr-mobile.png
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/pr-tablet.png
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/pr-desktop.png
+
+# Verify responsive behavior before approving
+```
+
+### Before Deployment
+
+```bash
+# Final responsive verification
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/deploy-mobile.png
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/deploy-tablet.png
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/deploy-desktop.png
+
+# Confirm all viewports look good
+```
+
+## Quality Checklist
+
+Use this checklist when reviewing responsive screenshots:
+
+### Mobile (375px)
+
+- [ ] Text is readable (minimum 14px)
+- [ ] No horizontal scrolling
+- [ ] Touch targets are 48px minimum
+- [ ] Navigation is accessible
+- [ ] Images scale properly
+- [ ] Forms are usable
+- [ ] Layout is single column or appropriate grid
+
+### Tablet (768px)
+
+- [ ] Layout adapts from mobile (not just scaled)
+- [ ] Navigation shows appropriate state
+- [ ] Grid uses 2-3 columns effectively
+- [ ] Images are properly sized
+- [ ] Whitespace is balanced
+- [ ] Interactive elements are appropriately sized
+
+### Desktop (1440px)
+
+- [ ] Full desktop layout is shown
+- [ ] Content uses available space well
+- [ ] Grid/columns display correctly (3-4 columns)
+- [ ] Navigation is fully expanded
+- [ ] Typography scales appropriately
+- [ ] Images are high quality and properly sized
+- [ ] Whitespace creates professional appearance
+
+## Advanced Usage
+
+### Custom Viewport Sizes
+
+```bash
+# Test at specific width (requires CDP)
+pnpm sweetlink screenshot --viewport-width 320 --output .tmp/screenshots/small.png
+pnpm sweetlink screenshot --viewport-width 1920 --output .tmp/screenshots/xl.png
+```
+
+### Landscape Orientation
+
+```bash
+# Tablet landscape (1024x768)
+pnpm sweetlink screenshot --viewport-width 1024 --viewport-height 768 --output .tmp/screenshots/tablet-landscape.png
+```
+
+### High-DPI Devices
+
+```bash
+# Capture at 2x resolution for retina displays
+pnpm sweetlink screenshot --viewport mobile --device-scale-factor 2 --output .tmp/screenshots/mobile-retina.png
+```
+
+## Troubleshooting
+
+### Screenshots Look Blurry
+
+**Cause:** Default image optimization
+**Solution:** Screenshots are optimized to ~250KB. For pixel-perfect reviews, use CDP mode with `--force-cdp`
+
+### Layout Doesn't Change
+
+**Cause:** CSS breakpoints not configured correctly
+**Solution:** Verify Tailwind classes like `md:` and `lg:` are applied
+
+### Mobile Screenshot Shows Desktop
+
+**Cause:** Viewport emulation not working
+**Solution:** Use `--force-cdp` flag or check Sweetlink connection
+
+## Integration with Other Skills
+
+**Works well with:**
+
+- `console-check-sweetlink` - Check for layout errors at each breakpoint
+- `quick-typecheck` - Ensure responsive code is type-safe
+- `screenshot` - Extended from base screenshot skill
+
+**Complete responsive workflow:**
+
+```bash
+# 1. Implement responsive design
+# 2. Check types
+pnpm run typecheck
+
+# 3. Capture responsive screenshots
+pnpm sweetlink screenshot --viewport mobile --output .tmp/screenshots/mobile.png
+pnpm sweetlink screenshot --viewport tablet --output .tmp/screenshots/tablet.png
+pnpm sweetlink screenshot --viewport desktop --output .tmp/screenshots/desktop.png
+
+# 4. Check console for errors
+pnpm sweetlink logs --filter error
+
+# 5. Review all screenshots for quality
+# 6. Iterate until all viewports are perfect
+```
+
+## Examples
+
+See `examples.md` for detailed responsive testing scenarios.

package/claude-skills/responsive-screenshots/evals/evals.json

@@ -0,0 +1,23 @@
+{
+  "skill_name": "responsive-screenshots",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Capture responsive screenshots at mobile, tablet, and desktop to verify the new hero section",
+      "expected_output": "Triggers responsive-screenshots skill to capture at 375px, 768px, and 1440px viewports via Sweetlink",
+      "expectations": ["Should trigger responsive-screenshots skill", "Should capture at all three standard breakpoints (375, 768, 1440)", "Should save to .tmp/screenshots/ and review for responsive issues"]
+    },
+    {
+      "id": 2,
+      "prompt": "Test the breakpoints on the pricing page -- I want to see how it looks on mobile vs desktop",
+      "expected_output": "Triggers responsive-screenshots skill to capture the pricing page across viewports",
+      "expectations": ["Should trigger responsive-screenshots skill", "Should use pnpm sweetlink screenshot with --viewport flags", "Should analyze screenshots against the quality checklist"]
+    },
+    {
+      "id": 3,
+      "prompt": "Take a quick screenshot of the current page to verify my CSS change",
+      "expected_output": "Should NOT trigger responsive-screenshots - this is a single screenshot, not multi-viewport testing",
+      "expectations": ["Should NOT trigger responsive-screenshots - use screenshot skill for single screenshots"]
+    }
+  ]
+}