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-testing-best-practices/reference/async-component-testing.md

@@ -21,69 +21,63 @@ tags: [vue3, testing, async, defineAsyncComponent, flushPromises, vitest]
 **Incorrect:**
 
 ```javascript
-import { mount } from '@vue/test-utils'
-import { defineAsyncComponent } from 'vue'
+import { mount } from '@vue/test-utils';
+import { defineAsyncComponent } from 'vue';
 
-const AsyncWidget = defineAsyncComponent(() =>
-  import('./Widget.vue')
-)
+const AsyncWidget = defineAsyncComponent(() => import('./Widget.vue'));
 
 test('renders async component', () => {
-  const wrapper = mount(AsyncWidget)
+  const wrapper = mount(AsyncWidget);
 
   // FAILS: Component hasn't loaded yet
-  expect(wrapper.text()).toContain('Widget Content')
-})
+  expect(wrapper.text()).toContain('Widget Content');
+});
 ```
 
 **Correct:**
 
 ```javascript
-import { mount, flushPromises } from '@vue/test-utils'
-import { defineAsyncComponent, nextTick } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils';
+import { defineAsyncComponent, nextTick } from 'vue';
 
-const AsyncWidget = defineAsyncComponent(() =>
-  import('./Widget.vue')
-)
+const AsyncWidget = defineAsyncComponent(() => import('./Widget.vue'));
 
 test('renders async component', async () => {
-  const wrapper = mount(AsyncWidget)
+  const wrapper = mount(AsyncWidget);
 
   // Wait for async component to load
-  await flushPromises()
+  await flushPromises();
 
-  expect(wrapper.text()).toContain('Widget Content')
-})
+  expect(wrapper.text()).toContain('Widget Content');
+});
 
 test('shows loading state initially', async () => {
   const AsyncWithLoading = defineAsyncComponent({
     loader: () => import('./Widget.vue'),
     loadingComponent: { template: '<div>Loading...</div>' },
-    delay: 0
-  })
+    delay: 0,
+  });
 
-  const wrapper = mount(AsyncWithLoading)
+  const wrapper = mount(AsyncWithLoading);
 
   // Check loading state immediately
-  expect(wrapper.text()).toContain('Loading...')
+  expect(wrapper.text()).toContain('Loading...');
 
   // Wait for component to load
-  await flushPromises()
+  await flushPromises();
 
   // Check final state
-  expect(wrapper.text()).toContain('Widget Content')
-})
+  expect(wrapper.text()).toContain('Widget Content');
+});
 ```
 
 ## Testing with Suspense
 
 ```javascript
-import { mount, flushPromises } from '@vue/test-utils'
-import { Suspense, defineAsyncComponent, h } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils';
+import { Suspense, defineAsyncComponent, h } from 'vue';
 
-const AsyncWidget = defineAsyncComponent(() =>
-  import('./Widget.vue')
-)
+const AsyncWidget = defineAsyncComponent(() => import('./Widget.vue'));
 
 test('renders async component with Suspense', async () => {
   const wrapper = mount({
@@ -95,47 +89,47 @@ test('renders async component with Suspense', async () => {
           <div>Loading...</div>
         </template>
       </Suspense>
-    `
-  })
+    `,
+  });
 
   // Initially shows fallback
-  expect(wrapper.text()).toContain('Loading...')
+  expect(wrapper.text()).toContain('Loading...');
 
   // Wait for async resolution
-  await flushPromises()
+  await flushPromises();
 
   // Now shows actual content
-  expect(wrapper.text()).toContain('Widget Content')
-})
+  expect(wrapper.text()).toContain('Widget Content');
+});
 ```
 
 ## Testing Error States
 
 ```javascript
-import { mount, flushPromises } from '@vue/test-utils'
-import { defineAsyncComponent } from 'vue'
+import { mount, flushPromises } from '@vue/test-utils';
+import { defineAsyncComponent } from 'vue';
 
 test('shows error component on load failure', async () => {
   const AsyncWithError = defineAsyncComponent({
     loader: () => Promise.reject(new Error('Failed to load')),
-    errorComponent: { template: '<div>Error loading component</div>' }
-  })
+    errorComponent: { template: '<div>Error loading component</div>' },
+  });
 
-  const wrapper = mount(AsyncWithError)
+  const wrapper = mount(AsyncWithError);
 
-  await flushPromises()
+  await flushPromises();
 
-  expect(wrapper.text()).toContain('Error loading component')
-})
+  expect(wrapper.text()).toContain('Error loading component');
+});
 ```
 
 ## Utilities Reference
 
-| Utility | Purpose |
-|---------|---------|
-| `await flushPromises()` | Resolves all pending promises |
-| `await nextTick()` | Waits for Vue's next DOM update cycle |
-| `await wrapper.trigger('click')` | Triggers event and waits for update |
+| Utility                          | Purpose                               |
+| -------------------------------- | ------------------------------------- |
+| `await flushPromises()`          | Resolves all pending promises         |
+| `await nextTick()`               | Waits for Vue's next DOM update cycle |
+| `await wrapper.trigger('click')` | Triggers event and waits for update   |
 
 ## Dynamic Import Handling
 
@@ -149,12 +143,12 @@ test('shows error component on load failure', async () => {
 ```javascript
 // If flushPromises() isn't sufficient, mock the import
 vi.mock('./Widget.vue', () => ({
-  default: { template: '<div>Widget Content</div>' }
-}))
+  default: { template: '<div>Widget Content</div>' },
+}));
 
 // Or use multiple flush calls for nested async operations
-await flushPromises()
-await flushPromises()
+await flushPromises();
+await flushPromises();
 ```
 
 ## References