ReddRadar
Agent skill
nuxt-composables
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/nuxt-composables
SKILL.md
Nuxt Composables
Creating reusable stateful logic via Vue Composition API.
Core Concepts
composables.md - Patterns, naming, state management, best practices
Singleton Pattern (Shared State)
State defined outside function persists across all callers:
// app/composables/useUser.ts
let user = ref<User>() // Singleton - shared across app
export default function useUser() {
const setUser = (data: BaseEntity) => {
user.value = User.hydrate(data)
}
const clearUser = () => { user.value = undefined }
return { user, setUser, clearUser }
}
Factory Pattern (Fresh State)
State defined inside function - new instance per call:
// app/composables/useCounter.ts
export default function useCounter(initial = 0) {
const count = ref(initial) // Fresh per call
const increment = () => count.value++
const decrement = () => count.value--
return { count, increment, decrement }
}
Naming & File Conventions
| Convention | Example |
|---|---|
| File name | useUser.ts, useCategories.ts |
| Function | export default function useUser() |
| Return | Always object { state, methods } |
| Refs | Reactive: user, not userRef |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?