@ytspar/sweetlink 1.15.0 → 1.16.1

package/claude-skills/console-check-sweetlink/examples.md

@@ -0,0 +1,394 @@
+# Console Check Sweetlink - Examples
+
+Common usage patterns for checking console errors during development.
+
+## Example 1: Clean Console (Zero Errors)
+
+**User Request:**
+> "Check the console for errors"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink logs --filter error
+```
+
+**Output:**
+
+```text
+✅ Console Check: CLEAN
+
+Errors: 0
+Warnings: 0
+Last checked: 14:30:45
+
+Application is running without console errors.
+Zero-error policy maintained ✓
+```
+
+---
+
+## Example 2: Errors Found After Changes
+
+**User Request:**
+> "I added a new feature, check for errors"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink logs --filter error
+```
+
+**Output:**
+
+```typescript
+❌ Console Check: 3 ERRORS FOUND
+
+### Error 1:
+[ERROR] TypeError: Cannot read property 'data' of undefined
+File: src/components/Card.tsx:45
+Time: 14:28:12.234
+Stack: at Card.render (Card.tsx:45)
+
+### Error 2:
+[ERROR] Failed to fetch: NetworkError
+File: src/api/client.ts:89
+Time: 14:28:13.891
+Message: Network request failed
+
+### Error 3:
+[ERROR] Hydration failed
+File: src/pages/index.tsx:12
+Time: 14:28:14.023
+Details: Server: "Loading..." Client: "Data loaded"
+
+### Next Steps:
+1. Fix null check in Card.tsx (add optional chaining)
+2. Add error handling to API fetch
+3. Fix hydration by using useEffect for dynamic content
+```
+
+---
+
+## Example 3: Before Committing
+
+**User Request:**
+> "I'm ready to commit, make sure there are no console errors"
+
+**Skill Action:**
+
+```bash
+# Check console
+pnpm sweetlink logs --filter error
+```
+
+**Output (Clean):**
+
+```text
+✅ Console Check: CLEAN
+
+Pre-commit verification:
+- Console errors: 0 ✓
+- Warnings: 0 ✓
+- Application state: Healthy ✓
+
+Safe to commit!
+```
+
+**Output (With Errors):**
+
+```text
+❌ Console Check: BLOCKED
+
+Cannot commit - 2 console errors found:
+
+1. [ERROR] TypeError in Card component
+2. [ERROR] API fetch failed
+
+Fix these errors before committing to maintain zero-error policy.
+```
+
+---
+
+## Example 4: Debugging Workflow
+
+**User Request:**
+> "The page isn't loading correctly, debug it"
+
+**Skill Action:**
+
+```bash
+# Step 1: Check console
+pnpm sweetlink logs --filter error
+
+# Step 2: Get all logs for context
+pnpm sweetlink logs
+```
+
+**Output:**
+
+```text
+🔍 Debugging Console Analysis
+
+### Errors (2):
+1. [ERROR] Failed to fetch /api/data
+   Time: 14:25:10
+
+2. [ERROR] Cannot render: data is undefined
+   Time: 14:25:11
+
+### Recent Logs (context):
+[INFO] Fetching data from API... (14:25:09)
+[ERROR] Failed to fetch /api/data (14:25:10)
+[WARN] Using fallback data (14:25:10)
+[ERROR] Cannot render: data is undefined (14:25:11)
+
+### Root Cause Identified:
+API fetch is failing → fallback data is undefined → render fails
+
+### Fix:
+Add proper fallback data or loading state
+```
+
+---
+
+## Example 5: After HMR Reload
+
+**User Request:**
+> "I just saved my changes, check the console"
+
+**Skill Action:**
+
+```bash
+# Wait 2 seconds for HMR
+sleep 2
+
+# Check console
+pnpm sweetlink logs --filter error
+```
+
+**Output:**
+
+```text
+✅ HMR Reload: Clean
+
+Changes detected at 14:32:15
+HMR completed at 14:32:17
+Console errors: 0 ✓
+
+Your changes loaded successfully with no errors!
+```
+
+---
+
+## Example 6: Hydration Error Detection
+
+**User Request:**
+> "There's a hydration warning, what's causing it?"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink logs --filter hydration
+```
+
+**Output:**
+
+```typescript
+⚠️  Hydration Issues Found
+
+1. [ERROR] Hydration failed because the initial UI does not match
+   Component: src/pages/dashboard.tsx:23
+   Time: 14:20:15.123
+
+   Server HTML: <div>Loading...</div>
+   Client HTML: <div>December 24, 2025</div>
+
+   Cause: Date() called during SSR creates different output on client
+
+   Fix: Use useEffect for client-only dynamic content
+   ```tsx
+   const [date, setDate] = useState('');
+   useEffect(() => {
+     setDate(new Date().toLocaleDateString());
+   }, []);
+   ```
+
+```yaml
+
+---
+
+## Example 7: Warning Triage
+
+**User Request:**
+> "Check for warnings too"
+
+**Skill Action:**
+```bash
+pnpm sweetlink logs --filter warning
+```
+
+**Output:**
+
+```text
+⚠️  Console Warnings: 5 found
+
+High Priority:
+1. [WARN] Each child in list should have unique key prop
+   File: src/components/List.tsx:34
+   Impact: Can cause rendering bugs
+
+Medium Priority:
+2. [WARN] React does not recognize `customProp` on DOM element
+   File: src/components/Button.tsx:12
+   Impact: Console clutter
+
+3. [WARN] componentWillReceiveProps has been renamed
+   File: src/legacy/OldComponent.tsx:45
+   Impact: Deprecated API
+
+Low Priority:
+4. [WARN] Missing alt attribute on img
+   File: src/components/Card.tsx:67
+   Impact: Accessibility
+
+5. [WARN] Unrecognized CSS property
+   File: src/styles/custom.css:23
+   Impact: Style won't apply
+
+Recommendation: Fix high priority warnings before merge
+```
+
+---
+
+## Example 8: API Error Detection
+
+**User Request:**
+> "The data isn't loading, check console"
+
+**Skill Action:**
+
+```bash
+pnpm sweetlink logs --filter "fetch"
+```
+
+**Output:**
+
+```markdown
+🌐 Network/Fetch Analysis
+
+### Fetch Errors (3):
+
+1. [ERROR] Failed to fetch: /api/users
+   Time: 14:15:22.123
+   Status: 500 Internal Server Error
+   Message: Database connection failed
+
+2. [ERROR] Failed to fetch: /api/posts
+   Time: 14:15:23.456
+   Status: 404 Not Found
+   Message: Endpoint does not exist
+
+3. [ERROR] Failed to fetch: /api/settings
+   Time: 14:15:24.789
+   Status: 401 Unauthorized
+   Message: Missing authentication token
+
+### Root Causes:
+- Backend server error (500)
+- Invalid API endpoint (404)
+- Missing auth token (401)
+
+### Next Steps:
+1. Check backend logs for database issue
+2. Verify API route exists
+3. Add authentication token to request
+```
+
+---
+
+## Example 9: Zero-Error Enforcement
+
+**Task Completion Check:**
+
+```bash
+# Before marking task complete, enforce zero errors
+pnpm sweetlink logs --filter error
+```
+
+**Output (Passed):**
+
+```text
+✅ Task Completion: APPROVED
+
+Console Check: PASSED ✓
+- Errors: 0
+- Warnings: 0
+- Application: Stable
+
+Task can be marked as complete.
+Zero-error policy maintained.
+```
+
+**Output (Failed):**
+
+```text
+❌ Task Completion: BLOCKED
+
+Console Check: FAILED ✗
+- Errors: 2
+- Warnings: 1
+
+Cannot mark task as complete until console is clean.
+Fix errors and re-check.
+```
+
+---
+
+## Example 10: Integration with Complete Quality Check
+
+**User Request:**
+> "Run a complete quality check before deploying"
+
+**Skill Action:**
+
+```bash
+# 1. TypeScript check
+pnpm run typecheck
+
+# 2. Console errors check
+pnpm sweetlink logs --filter error
+
+# 3. Build check
+pnpm run build
+```
+
+**Output:**
+
+```markdown
+🎯 Complete Quality Check
+
+1. TypeScript Check: ✅ PASSED (0 errors)
+2. Console Check: ✅ PASSED (0 errors)
+3. Build Check: ✅ PASSED (built successfully)
+
+### Summary:
+All quality gates passed ✓
+- Type safety: Maintained
+- Runtime errors: Zero
+- Build: Successful
+
+✅ APPROVED FOR DEPLOYMENT
+```
+
+---
+
+## Best Practices Demonstrated
+
+1. **Check after every change** - Catch errors immediately
+2. **Use filters** - Focus on errors first, then warnings
+3. **Zero-error policy** - Don't accumulate technical debt
+4. **Integrated checks** - Combine with typecheck and builds
+5. **Root cause analysis** - Understand error context
+6. **Fix before commit** - Maintain code quality
+7. **HMR awareness** - Wait for reload before checking

package/claude-skills/resize-for-claude/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: resize-for-claude
+description: Resize images for optimal Claude vision consumption. Scales images so the longest side is ≤1568px. Splits very tall images (3:1+ ratio) into overlapping tiles. Use when preparing screenshots, mockups, or design files for Claude analysis.
+allowed-tools: Bash, Read
+---
+
+# Resize for Claude Skill
+
+Resize images to optimal dimensions for Claude's vision capabilities. Claude processes images best when the longest side is ≤1568px. This skill handles both standard images and very tall images (full-page mockups, long screenshots) by splitting them into readable tiles.
+
+## When to Use
+
+- Preparing large screenshots or mockups for Claude to analyze
+- Resizing Figma exports before feeding them to Claude
+- Processing any image that's too large for efficient Claude vision consumption
+- User asks to "resize for Claude" or "optimize image for Claude"
+
+## How It Works
+
+The script at `scripts/resize-for-claude` (in the tools repo):
+
+1. Reads the image dimensions
+2. If the image aspect ratio is < 3:1, resizes proportionally so the longest side = 1568px
+3. If the image is very tall (≥ 3:1 height:width), splits into overlapping tiles before resizing each
+4. Outputs to a `<filename>-claude/` directory next to the original
+
+### Claude Vision Limits
+
+| Property | Optimal | Maximum |
+|----------|---------|---------|
+| Longest side | ≤1568px | 8000px |
+| File size | <1MB | 20MB |
+| Aspect ratio | ≤2:1 | - |
+
+Images exceeding these dimensions get downscaled by Claude anyway, wasting tokens on pixels that are thrown away.
+
+## Usage
+
+```bash
+# Find the script (works from any project linked to tools)
+TOOLS_ROOT="$(readlink -f .claude/skills/../../)"
+
+# Basic usage — resize to 1568px longest side
+"$TOOLS_ROOT/scripts/resize-for-claude" ~/Downloads/mockup.jpg
+
+# Custom max side
+"$TOOLS_ROOT/scripts/resize-for-claude" ~/Downloads/mockup.png 1200
+```
+
+### Direct invocation (if you know the tools path)
+
+```bash
+$TOOLS_ROOT/scripts/resize-for-claude ~/Downloads/image.jpg
+```
+
+## Output
+
+**Standard image (< 3:1 ratio):**
+
+```text
+Input:  ~/Downloads/mockup.jpg
+Size:   5120x11732 (2881KB)
+
+Output: ~/Downloads/mockup-claude/mockup.jpg
+Size:   684x1568 (84KB)
+```
+
+**Very tall image (≥ 3:1 ratio):**
+
+```text
+Input:  ~/Downloads/full-page.png
+Size:   1440x8640 (4200KB)
+
+Image is very tall (6:1 ratio). Splitting into tiles...
+  Part 1: 1440x1568 (180KB) -> ~/Downloads/full-page-claude/full-page-part1.png
+  Part 2: 1440x1568 (165KB) -> ~/Downloads/full-page-claude/full-page-part2.png
+  Part 3: 1440x1568 (172KB) -> ~/Downloads/full-page-claude/full-page-part3.png
+
+Output: ~/Downloads/full-page-claude/ (3 parts)
+```
+
+## Requirements
+
+- macOS (uses `sips` — the built-in macOS image processing tool)
+
+## After Resizing
+
+Use the Read tool to view the resized image(s):
+
+```bash
+# Single image
+Read ~/Downloads/mockup-claude/mockup.jpg
+
+# Tiled parts — read each sequentially
+Read ~/Downloads/full-page-claude/full-page-part1.png
+Read ~/Downloads/full-page-claude/full-page-part2.png
+```

package/claude-skills/resize-for-claude/evals/evals.json

@@ -0,0 +1,23 @@
+{
+  "skill_name": "resize-for-claude",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "This Figma export is 5120x11732 pixels, resize it so Claude can analyze it properly",
+      "expected_output": "Triggers resize-for-claude skill to scale the image down so the longest side is 1568px",
+      "expectations": ["Should trigger resize-for-claude skill", "Should run the resize-for-claude script", "Should detect tall aspect ratio and split into overlapping tiles if >= 3:1"]
+    },
+    {
+      "id": 2,
+      "prompt": "Optimize this full-page screenshot for Claude vision before I ask it to review the design",
+      "expected_output": "Triggers resize-for-claude skill to resize and potentially tile a tall screenshot",
+      "expectations": ["Should trigger resize-for-claude skill", "Should output to a -claude/ directory next to the original", "Should produce images with longest side <= 1568px"]
+    },
+    {
+      "id": 3,
+      "prompt": "Take a screenshot of the homepage at mobile, tablet, and desktop viewports",
+      "expected_output": "Should NOT trigger resize-for-claude - this is about capturing responsive screenshots, not resizing existing images",
+      "expectations": ["Should NOT trigger resize-for-claude - use responsive-screenshots for capturing at multiple viewports"]
+    }
+  ]
+}