@ytspar/sweetlink 1.15.0 → 1.16.1

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

@@ -0,0 +1,330 @@
+---
+name: console-check-sweetlink
+description: "Check browser console for errors/warnings via Sweetlink WebSocket. Triggers on: \"console errors\", \"browser errors\", \"console check\", \"zero errors\". NOT for TypeScript/compile errors (use quick-typecheck) or server-side errors (use debugging agent)."
+allowed-tools: Bash
+---
+
+# Console Check Sweetlink Skill
+
+Quickly check browser console for errors and warnings using Sweetlink's real-time log monitoring.
+
+## Purpose
+
+This skill provides a fast way to verify there are no console errors in the running application. It's essential for maintaining code quality and catching runtime issues immediately after making changes.
+
+## When to Use
+
+**Automatically use this skill when:**
+
+- After making ANY code changes (catch errors immediately)
+- Before marking a task as complete (zero errors policy)
+- User reports unexpected behavior or bugs
+- During debugging workflows
+- After deploying new features
+- User asks to "check console" or "check for errors"
+- Before committing code
+- During code reviews
+
+## How It Works
+
+Sweetlink maintains a real-time connection to the browser and captures all console messages. This skill:
+
+1. Queries Sweetlink for recent console logs
+2. Filters for errors (and optionally warnings)
+3. Returns a summary with error details
+4. Helps identify the root cause quickly
+
+## Commands
+
+### Check for Errors Only
+
+```bash
+pnpm sweetlink logs --filter error
+```
+
+### Check for Errors and Warnings
+
+```bash
+pnpm sweetlink logs --filter error && pnpm sweetlink logs --filter warning
+```
+
+### Get All Console Logs
+
+```bash
+pnpm sweetlink logs
+```
+
+### Filter by Specific Term
+
+```bash
+pnpm sweetlink logs --filter "API"
+pnpm sweetlink logs --filter "Failed to"
+pnpm sweetlink logs --filter "undefined"
+```
+
+## Understanding Console Errors
+
+### Common Error Types
+
+**1. TypeError - Type-related errors**
+
+```text
+TypeError: Cannot read property 'data' of undefined
+TypeError: undefined is not a function
+```
+
+**2. ReferenceError - Variable not defined**
+
+```text
+ReferenceError: myVariable is not defined
+```
+
+**3. Hydration Errors (React/SSR)**
+
+```text
+Warning: Text content did not match. Server: "..." Client: "..."
+Error: Hydration failed because the initial UI does not match...
+```
+
+**4. Network Errors**
+
+```text
+Failed to fetch
+NetworkError when attempting to fetch resource
+```
+
+**5. React Errors**
+
+```text
+Warning: Each child in a list should have a unique "key" prop
+Error: Maximum update depth exceeded
+```
+
+## Output Format
+
+### Zero Errors (Success)
+
+```text
+✅ Console Check: CLEAN
+
+Errors: 0
+Warnings: 0
+Status: Ready for commit ✓
+
+The application has no console errors. Zero-error policy maintained.
+```
+
+### Errors Found
+
+```markdown
+❌ Console Check: ERRORS FOUND
+
+Errors: 3
+Warnings: 1
+
+### Errors:
+
+1. [ERROR] TypeError: Cannot read property 'data' of undefined
+   Location: Card.tsx:45
+   Timestamp: 14:23:15.234
+
+2. [ERROR] Failed to fetch data from API
+   Location: api.ts:89
+   Timestamp: 14:23:16.891
+
+3. [ERROR] Hydration failed: content mismatch
+   Location: page.tsx:12
+   Timestamp: 14:23:17.023
+
+### Warnings:
+
+1. [WARN] Missing key prop in list rendering
+   Location: List.tsx:34
+   Timestamp: 14:23:15.456
+
+### Recommendations:
+- Fix null safety in Card.tsx (add null check for data)
+- Add error handling to API fetch in api.ts
+- Fix hydration by ensuring SSR/client consistency in page.tsx
+- Add unique keys to list items in List.tsx
+```
+
+## Best Practices
+
+### Development Workflow
+
+```bash
+# 1. Check baseline (before making changes)
+pnpm sweetlink logs --filter error
+# Should show 0 errors
+
+# 2. Make code changes
+
+# 3. Wait for HMR reload (2-3 seconds)
+
+# 4. Check for new errors immediately
+pnpm sweetlink logs --filter error
+
+# 5. If errors found, fix immediately
+# 6. Repeat until 0 errors
+```
+
+### Before Committing
+
+```bash
+# Always check console before commit
+pnpm sweetlink logs --filter error
+
+# Only commit if 0 errors
+git commit -m "Add feature (0 console errors)"
+```
+
+### During Code Review
+
+```bash
+# Check PR branch for console errors
+git checkout pr-branch
+pnpm sweetlink logs --filter error
+```
+
+## Integration with Other Skills
+
+**Works well with:**
+
+- `quick-typecheck` - Check both compile-time and runtime errors
+- `screenshot` - Visual verification + console check
+- `responsive-screenshots` - Check errors across viewports
+
+**Complete quality check:**
+
+```bash
+# 1. Type errors (compile-time)
+pnpm run typecheck
+
+# 2. Console errors (runtime)
+pnpm sweetlink logs --filter error
+
+# 3. Visual verification
+pnpm sweetlink screenshot --output .tmp/screenshots/verify.png
+
+# If all pass: ✅ Ready to commit
+```
+
+## Common Error Patterns
+
+### Pattern 1: Null/Undefined Access
+
+```javascript
+// Error: Cannot read property 'name' of undefined
+const name = user.name;
+
+// Fix: Add null check
+const name = user?.name;
+```
+
+### Pattern 2: Hydration Mismatch
+
+```javascript
+// Error: Hydration failed
+<div>{new Date().toString()}</div>
+
+// Fix: Use useEffect for client-only values
+const [time, setTime] = useState('');
+useEffect(() => setTime(new Date().toString()), []);
+```
+
+### Pattern 3: Missing Error Handling
+
+```javascript
+// Error: Unhandled promise rejection
+fetch('/api/data');
+
+// Fix: Add error handling
+fetch('/api/data').catch(err => console.error(err));
+```
+
+## Troubleshooting
+
+### "No browser client connected"
+
+**Solution:**
+
+```bash
+# 1. Start dev server
+pnpm run dev
+
+# 2. Open browser at http://localhost:3000
+# 3. Look for Sweetlink connection indicator (bottom-right)
+```
+
+### Old Errors Showing
+
+**Solution:**
+
+```bash
+# Hard refresh browser to clear cache
+# Mac: Cmd + Shift + R
+# Windows/Linux: Ctrl + Shift + R
+```
+
+### Too Many Logs
+
+**Solution:**
+
+```bash
+# Filter to focus on errors only
+pnpm sweetlink logs --filter error
+
+# Or search for specific term
+pnpm sweetlink logs --filter "MyComponent"
+```
+
+## Zero-Error Policy
+
+This skill enforces the zero-error policy:
+
+**Before marking ANY task complete:**
+
+1. Run console check
+2. Ensure 0 errors
+3. If errors found, fix them
+4. Re-check until clean
+5. Only then mark task as complete
+
+**Why this matters:**
+
+- Prevents bugs from accumulating
+- Catches issues immediately
+- Maintains code quality
+- Improves user experience
+- Reduces debugging time later
+
+## Quick Reference
+
+### Fast Error Check
+
+```bash
+pnpm sweetlink logs --filter error
+```
+
+### Full Console Analysis
+
+```bash
+pnpm sweetlink logs
+```
+
+### Search Specific Issue
+
+```bash
+pnpm sweetlink logs --filter "hydration"
+```
+
+### Check Warnings Too
+
+```bash
+pnpm sweetlink logs --filter warning
+```
+
+## Examples
+
+See `examples.md` for detailed usage scenarios.

package/claude-skills/console-check-sweetlink/evals/evals.json

@@ -0,0 +1,35 @@
+{
+  "skill_name": "console-check-sweetlink",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "Check the browser console for errors",
+      "expected_output": "The skill uses Sweetlink to connect to the browser and retrieve console logs",
+      "expectations": [
+        "Uses Sweetlink WebSocket or logs command to read browser console",
+        "Filters for errors and warnings",
+        "Reports any console errors found or confirms zero errors"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "Any console errors after my changes?",
+      "expected_output": "The skill checks the browser console for new errors via Sweetlink",
+      "expectations": [
+        "Triggers the console check flow via Sweetlink",
+        "Reports errors, warnings, or confirms clean console",
+        "Does not run TypeScript or lint checks"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "Check for TypeScript errors",
+      "expected_output": "This should NOT trigger console-check-sweetlink. TypeScript errors are handled by quick-typecheck.",
+      "expectations": [
+        "Does NOT trigger console-check-sweetlink skill",
+        "Routes to quick-typecheck instead",
+        "No Sweetlink or browser commands are executed"
+      ]
+    }
+  ]
+}