When to use this skill

To write internal communications, use this skill for:

• 3P updates (Progress, Plans, Problems)
• Company newsletters
• FAQ responses
• Status reports
• Leadership updates
• Project updates
• Incident reports

How to use this skill

To write any internal communication:

1. Identify the communication type from the request
2. Load the appropriate guideline file from the examples/ directory:
   • examples/3p-updates.md - For Progress/Plans/Problems team updates
   • examples/company-newsletter.md - For company-wide newsletters
   • examples/faq-answers.md - For answering frequently asked questions
   • examples/general-comms.md - For anything else that doesn't explicitly match one of the above
3. Follow the specific instructions in that file for formatting, tone, and content gathering

If the communication type doesn't match any existing guideline, ask for clarification or more context about the desired format.

Keywords

3P updates, company newsletter, company comms, weekly update, faqs, common questions, updates, internal comms

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

Features

Quick Reference

Component Template

<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

// 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'