Claude-skill-registry api-pattern

Provides Vue component structure templates for Composition API and Options API. Used when generating .vue components and views to match user's selected API pattern preference.

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/api-pattern" ~/.claude/skills/majiayu000-claude-skill-registry-api-pattern && rm -rf "$T"

manifest: skills/data/api-pattern/SKILL.md

source content

API Pattern Skill

Purpose

Provides Vue component structure templates and patterns for both Composition API and Options API styles.

User Choice

The user selects their preferred Vue API pattern:

```
composition-api
```
: Modern functional approach (recommended for Vue 3)
```
options-api
```
: Traditional object-based approach (familiar from Vue 2)

When to Use

Use this skill when generating:

Vue components (
```
src/components/**/*.vue
```
)
View components (
```
src/views/**/*.vue
```
)
Root App component (
```
src/App.vue
```
)
Any
```
.vue
```
single-file component

Pattern Selection Logic

Composition API should be used when:

User explicitly selects
```
composition-api
```
Building new Vue 3 applications (recommended default)
Need better TypeScript integration
Want improved code reusability via composables
Working with complex component logic

Options API should be used when:

User explicitly selects
```
options-api
```
Migrating from Vue 2 applications
Team preference for object-based structure
Developer familiarity with Vue 2 patterns

Templates

See

examples.md

for complete component templates including:

Basic component structure
Component with props and emits
Component with lifecycle hooks
Component with computed properties
Component with watchers
Component with composables/mixins
View component examples
Store integration examples

Key Differences Summary

Composition API

Uses
```
<script setup lang="ts">
```
Reactivity via
```
ref()
```
,
```
reactive()
```
,
```
computed()
```
Lifecycle hooks as functions (
```
onMounted
```
,
```
onUpdated
```
, etc.)
Code organized by logical concern
Better tree-shaking and TypeScript inference

Options API

Uses
```
defineComponent()
```
Reactivity via
```
data()
```
return object
Lifecycle hooks as methods (
```
mounted()
```
,
```
updated()
```
, etc.)
Code organized by option type
Familiar structure for Vue 2 developers

Notes

Always use TypeScript (
```
lang="ts"
```
)
Always use scoped styles (
```
<style scoped lang="scss">
```
)
Import theme variables:
```
@use '@/theme/' as *;
```
Follow naming conventions: PascalCase for component names
Include proper type definitions for props and emits