common-pitfalls
Apply when debugging errors, reviewing code for issues, or encountering unexpected behavior. Contains known mistakes with ChurchTools API, Vue components, TypeScript, Safari cookies, and form handling.
When & Why to Use This Skill
This Claude skill serves as a specialized debugging and code review companion designed to identify and resolve frequent development errors. It focuses on eliminating common pitfalls in ChurchTools API integrations, Vue.js component reactivity, TypeScript type safety, and browser-specific issues like Safari's strict cookie policies, ensuring a more robust and efficient development workflow.
Use Cases
- Case 1: Troubleshooting ChurchTools API calls to fix incorrect parameter nesting or identifying the correct 'deleteApi' method usage.
- Case 2: Reviewing Vue.js components to prevent accidental form submissions and page reloads by ensuring buttons are correctly typed.
- Case 3: Resolving authentication or session persistence issues in Safari caused by third-party cookie blocking or localhost restrictions.
- Case 4: Enhancing code quality during reviews by identifying missing TypeScript interfaces for API responses and ensuring strict typing.
- Case 5: Implementing standardized error handling patterns with loading states to improve application stability and user feedback.
| name | common-pitfalls |
|---|---|
| description | Apply when debugging errors, reviewing code for issues, or encountering unexpected behavior. Contains known mistakes with ChurchTools API, Vue components, TypeScript, Safari cookies, and form handling. |
Common Pitfalls
ChurchTools API
| Pitfall | Wrong | Correct |
|---|---|---|
| Nested params | { params: { key: 'val' } } |
{ key: 'val' } |
| Delete method | churchtoolsClient.delete() |
churchtoolsClient.deleteApi() |
| Tags response | response.data |
response (direct array) |
| Tag domains | 'appointment' |
'person' | 'song' | 'group' |
Vue Components
| Pitfall | Wrong | Correct |
|---|---|---|
| Button type | <button> |
<button type="button"> |
| BaseCard import | Absolute path | Relative: ../common/BaseCard.vue |
| Reactivity | Plain objects | ref() or reactive() |
TypeScript
- Check
src/ct-types.d.tsfor ChurchTools types - Always define interfaces for API responses
- Use strict typing for all data
Build Issues
- Verify import paths after moving components
- Check for missing dependencies in package.json
- Ensure all required fields in API requests
Safari-specific
- Blocks
Secure; SameSite=Nonecookies onhttp://localhost - Blocks third-party cookies from different domains
- Solution: Use Vite proxy + HTTPS
Form Submission
Buttons without type="button" will submit forms and cause page reloads:
<!-- Wrong - triggers form submission -->
<button @click="handleClick">Click</button>
<!-- Correct -->
<button type="button" @click="handleClick">Click</button>
API Error Handling
Always wrap API calls in try-catch with loading states:
try {
loading.value = true
// API call
} catch (err) {
error.value = 'User-friendly message'
console.error('Debug info:', err)
} finally {
loading.value = false
}