format: apply repo prettier (3.8.1) to the folded skills tree

963 markdown files reformatted with the repository's pinned prettier so
pnpm format:check covers the folded tree like every other repo file.

The formatter's embedded-language pass also normalized code fences
(TS semicolons, closed HTML tags in examples, lowercased CSS hex colors,
one renumbered list that skipped an index). Alphanumeric token deltas vs
the fold commit were audited file-by-file; all are formatter-equivalent
markup normalizations plus the four sanitized skills.

packages/mosaic/framework/skills/vue/references/script-setup-macros.md

@@ -12,11 +12,11 @@ description: Vue 3 script setup syntax and compiler macros for defining props, e
 ```vue
 <script setup lang="ts">
 // Top-level bindings are exposed to template
-import { ref } from 'vue'
-import MyComponent from './MyComponent.vue'
+import { ref } from 'vue';
+import MyComponent from './MyComponent.vue';
 
-const count = ref(0)
-const increment = () => count.value++
+const count = ref(0);
+const increment = () => count.value++;
 </script>
 
 <template>
@@ -32,24 +32,27 @@ Declare component props with full TypeScript support.
 ```ts
 // Type-based declaration (recommended)
 const props = defineProps<{
-  title: string
-  count?: number
-  items: string[]
-}>()
+  title: string;
+  count?: number;
+  items: string[];
+}>();
 
 // With defaults (Vue 3.5+)
 const { title, count = 0 } = defineProps<{
-  title: string
-  count?: number
-}>()
+  title: string;
+  count?: number;
+}>();
 
 // With defaults (Vue 3.4 and below)
-const props = withDefaults(defineProps<{
-  title: string
-  items?: string[]
-}>(), {
-  items: () => []  // Use factory for arrays/objects
-})
+const props = withDefaults(
+  defineProps<{
+    title: string;
+    items?: string[];
+  }>(),
+  {
+    items: () => [], // Use factory for arrays/objects
+  },
+);
 ```
 
 ## defineEmits
@@ -59,14 +62,14 @@ Declare emitted events with typed payloads.
 ```ts
 // Named tuple syntax (recommended)
 const emit = defineEmits<{
-  update: [value: string]
-  change: [id: number, name: string]
-  close: []
-}>()
+  update: [value: string];
+  change: [id: number, name: string];
+  close: [];
+}>();
 
-emit('update', 'new value')
-emit('change', 1, 'name')
-emit('close')
+emit('update', 'new value');
+emit('change', 1, 'name');
+emit('close');
 ```
 
 ## defineModel
@@ -75,26 +78,31 @@ Two-way binding prop consumed via `v-model`. Available in Vue 3.4+.
 
 ```ts
 // Basic usage - creates "modelValue" prop
-const model = defineModel<string>()
-model.value = 'hello'  // Emits "update:modelValue"
+const model = defineModel<string>();
+model.value = 'hello'; // Emits "update:modelValue"
 
 // Named model - consumed via v-model:name
-const count = defineModel<number>('count', { default: 0 })
+const count = defineModel<number>('count', { default: 0 });
 
 // With modifiers
-const [value, modifiers] = defineModel<string>()
+const [value, modifiers] = defineModel<string>();
 if (modifiers.trim) {
   // Handle trim modifier
 }
 
 // With transformers
 const [value, modifiers] = defineModel({
-  get(val) { return val?.toLowerCase() },
-  set(val) { return modifiers.trim ? val?.trim() : val }
-})
+  get(val) {
+    return val?.toLowerCase();
+  },
+  set(val) {
+    return modifiers.trim ? val?.trim() : val;
+  },
+});
 ```
 
 Parent usage:
+
 ```vue
 <Child v-model="name" />
 <Child v-model:count="total" />
@@ -106,21 +114,24 @@ Parent usage:
 Explicitly expose properties to parent via template refs. Components are closed by default.
 
 ```ts
-import { ref } from 'vue'
+import { ref } from 'vue';
 
-const count = ref(0)
-const reset = () => { count.value = 0 }
+const count = ref(0);
+const reset = () => {
+  count.value = 0;
+};
 
 defineExpose({
   count,
-  reset
-})
+  reset,
+});
 ```
 
 Parent access:
+
 ```ts
-const childRef = ref<{ count: number; reset: () => void }>()
-childRef.value?.reset()
+const childRef = ref<{ count: number; reset: () => void }>();
+childRef.value?.reset();
 ```
 
 ## defineOptions
@@ -130,8 +141,8 @@ Declare component options without a separate `<script>` block. Available in Vue
 ```ts
 defineOptions({
   inheritAttrs: false,
-  name: 'CustomName'
-})
+  name: 'CustomName',
+});
 ```
 
 ## defineSlots
@@ -140,9 +151,9 @@ Provide type hints for slot props. Available in Vue 3.3+.
 
 ```ts
 const slots = defineSlots<{
-  default(props: { item: string; index: number }): any
-  header(props: { title: string }): any
-}>()
+  default(props: { item: string; index: number }): any;
+  header(props: { title: string }): any;
+}>();
 ```
 
 ## Generic Components
@@ -152,20 +163,21 @@ Declare generic type parameters using the `generic` attribute.
 ```vue
 <script setup lang="ts" generic="T extends string | number">
 defineProps<{
-  items: T[]
-  selected: T
-}>()
+  items: T[];
+  selected: T;
+}>();
 </script>
 ```
 
 Multiple generics with constraints:
+
 ```vue
 <script setup lang="ts" generic="T, U extends Record<string, T>">
-import type { Item } from './types'
+import type { Item } from './types';
 defineProps<{
-  data: U
-  key: keyof U
-}>()
+  data: U;
+  key: keyof U;
+}>();
 </script>
 ```
 
@@ -175,11 +187,11 @@ Use `vNameOfDirective` naming convention.
 
 ```ts
 const vFocus = {
-  mounted: (el: HTMLElement) => el.focus()
-}
+  mounted: (el: HTMLElement) => el.focus(),
+};
 
 // Or import and rename
-import { myDirective as vMyDirective } from './directives'
+import { myDirective as vMyDirective } from './directives';
 ```
 
 ```vue
@@ -194,7 +206,7 @@ Use `await` directly in `<script setup>`. The component becomes async and must b
 
 ```vue
 <script setup lang="ts">
-const data = await fetch('/api/data').then(r => r.json())
+const data = await fetch('/api/data').then((r) => r.json());
 </script>
 ```