Claude-skill-registry 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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/common-pitfalls" ~/.claude/skills/majiayu000-claude-skill-registry-common-pitfalls && rm -rf "$T"

manifest: skills/data/common-pitfalls/SKILL.md

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()

reactive()

TypeScript

Check
```
src/ct-types.d.ts
```
for 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=None
```
cookies on
```
http://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
}