@ytspar/sweetlink 1.24.0-canary.73a52fd → 1.24.0

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/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