feat: Complete fleet — 94 skills across 10+ domains
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
84
skills/vue/SKILL.md
Normal file
84
skills/vue/SKILL.md
Normal file
@@ -0,0 +1,84 @@
|
||||
---
|
||||
name: vue
|
||||
description: Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel, watchers, or using Transition/Teleport/Suspense/KeepAlive.
|
||||
metadata:
|
||||
author: Anthony Fu
|
||||
version: "2026.1.31"
|
||||
source: Generated from https://github.com/vuejs/docs, scripts at https://github.com/antfu/skills
|
||||
---
|
||||
|
||||
# Vue
|
||||
|
||||
> Based on Vue 3.5. Always use Composition API with `<script setup lang="ts">`.
|
||||
|
||||
## Preferences
|
||||
|
||||
- Prefer TypeScript over JavaScript
|
||||
- Prefer `<script setup lang="ts">` over `<script>`
|
||||
- For performance, prefer `shallowRef` over `ref` if deep reactivity is not needed
|
||||
- Always use Composition API over Options API
|
||||
- Discourage using Reactive Props Destructure
|
||||
|
||||
## Core
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Script Setup & Macros | `<script setup>`, defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots, generics | [script-setup-macros](references/script-setup-macros.md) |
|
||||
| Reactivity & Lifecycle | ref, shallowRef, computed, watch, watchEffect, effectScope, lifecycle hooks, composables | [core-new-apis](references/core-new-apis.md) |
|
||||
|
||||
## Features
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Built-in Components & Directives | Transition, Teleport, Suspense, KeepAlive, v-memo, custom directives | [advanced-patterns](references/advanced-patterns.md) |
|
||||
|
||||
## Quick Reference
|
||||
|
||||
### Component Template
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
count?: number
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
update: [value: string]
|
||||
}>()
|
||||
|
||||
const model = defineModel<string>()
|
||||
|
||||
const doubled = computed(() => (props.count ?? 0) * 2)
|
||||
|
||||
watch(() => props.title, (newVal) => {
|
||||
console.log('Title changed:', newVal)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
console.log('Component mounted')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>{{ title }} - {{ doubled }}</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Key Imports
|
||||
|
||||
```ts
|
||||
// Reactivity
|
||||
import { ref, shallowRef, computed, reactive, readonly, toRef, toRefs, toValue } from 'vue'
|
||||
|
||||
// Watchers
|
||||
import { watch, watchEffect, watchPostEffect, onWatcherCleanup } from 'vue'
|
||||
|
||||
// Lifecycle
|
||||
import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, onBeforeUnmount } from 'vue'
|
||||
|
||||
// Utilities
|
||||
import { nextTick, defineComponent, defineAsyncComponent } from 'vue'
|
||||
```
|
||||
Reference in New Issue
Block a user