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>

skills/vue-best-practices/reference/sfc-scoped-css-dynamic-content.md

@@ -0,0 +1,193 @@
+---
+title: Scoped CSS Does Not Apply to Dynamically Added Content
+impact: HIGH
+impactDescription: Programmatically inserted DOM elements won't receive scoped style data attributes, causing styles to fail silently
+type: gotcha
+tags: [vue3, sfc, scoped-css, dynamic-content, v-html]
+---
+
+# Scoped CSS Does Not Apply to Dynamically Added Content
+
+**Impact: HIGH** - Vue's scoped CSS works by adding data attributes to elements at compile time. Content added dynamically at runtime (via `v-html`, JavaScript DOM manipulation, or third-party libraries) won't have these attributes, so scoped styles won't apply.
+
+## Task Checklist
+
+- [ ] For `v-html` content, use `:deep()` selectors or unscoped styles
+- [ ] Avoid programmatic DOM manipulation; prefer Vue's reactive template system
+- [ ] When DOM manipulation is unavoidable, use global styles with unique class prefixes
+- [ ] Consider CSS modules for content that mixes static and dynamic elements
+
+**Problematic Code:**
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const htmlContent = ref('<p class="dynamic">This is dynamic content</p>')
+</script>
+
+<template>
+  <div class="container">
+    <div v-html="htmlContent"></div>
+  </div>
+</template>
+
+<style scoped>
+/* BAD: Won't apply to the dynamic <p> element! */
+.dynamic {
+  color: red;
+  font-weight: bold;
+}
+</style>
+```
+
+**Correct Code:**
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const htmlContent = ref('<p class="dynamic">This is dynamic content</p>')
+</script>
+
+<template>
+  <div class="container">
+    <div v-html="htmlContent"></div>
+  </div>
+</template>
+
+<style scoped>
+/* GOOD: Use :deep() for v-html content */
+.container :deep(.dynamic) {
+  color: red;
+  font-weight: bold;
+}
+</style>
+```
+
+## Why This Happens
+
+Vue scoped CSS adds a unique data attribute (e.g., `data-v-7ba5bd90`) to:
+1. All elements in the component's template (at compile time)
+2. All CSS selectors
+
+```html
+<!-- What Vue generates at compile time -->
+<div class="container" data-v-7ba5bd90>
+  <div data-v-7ba5bd90>
+    <!-- v-html content is inserted at runtime WITHOUT the attribute -->
+    <p class="dynamic">This is dynamic content</p>
+  </div>
+</div>
+```
+
+```css
+/* Generated scoped CSS */
+.dynamic[data-v-7ba5bd90] { color: red; }
+/* ^ Won't match because the dynamic <p> doesn't have data-v-7ba5bd90 */
+```
+
+## Alternative: Global Styles with Unique Prefix
+
+```vue
+<script setup>
+import { ref } from 'vue'
+const htmlContent = ref('<p class="my-component-dynamic">Dynamic text</p>')
+</script>
+
+<template>
+  <div class="my-component">
+    <div v-html="htmlContent"></div>
+  </div>
+</template>
+
+<!-- Use unscoped styles with unique prefixes -->
+<style>
+.my-component .my-component-dynamic {
+  color: red;
+}
+</style>
+```
+
+## Programmatic DOM Manipulation
+
+When using third-party libraries that manipulate the DOM:
+
+```vue
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const editorRef = ref(null)
+
+onMounted(() => {
+  // Third-party editor that injects its own DOM elements
+  initRichEditor(editorRef.value)
+})
+</script>
+
+<template>
+  <div class="editor-wrapper">
+    <div ref="editorRef"></div>
+  </div>
+</template>
+
+<style scoped>
+/* BAD: Won't reach injected editor elements */
+.editor-toolbar { ... }
+.editor-content { ... }
+</style>
+
+<style>
+/* GOOD: Global styles scoped by parent class */
+.editor-wrapper .editor-toolbar {
+  background: #f5f5f5;
+}
+.editor-wrapper .editor-content {
+  padding: 1rem;
+}
+</style>
+```
+
+## Best Practice: Prefer Reactive Templates
+
+Instead of dynamic HTML, use Vue's reactive system when possible:
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+// BAD: Dynamic HTML that needs special style handling
+const badHtml = ref('<span class="highlight">text</span>')
+
+// GOOD: Reactive data that templates handle
+const items = ref([
+  { text: 'Item 1', isHighlighted: true },
+  { text: 'Item 2', isHighlighted: false }
+])
+</script>
+
+<template>
+  <!-- BAD -->
+  <div v-html="badHtml"></div>
+
+  <!-- GOOD: Scoped styles work normally -->
+  <ul>
+    <li
+      v-for="item in items"
+      :key="item.text"
+      :class="{ highlight: item.isHighlighted }"
+    >
+      {{ item.text }}
+    </li>
+  </ul>
+</template>
+
+<style scoped>
+/* Works perfectly with reactive template */
+.highlight {
+  background: yellow;
+}
+</style>
+```
+
+## Reference
+- [Vue.js Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css)
+- [GitHub Issue: Scoped CSS not applied for programmatically added elements](https://github.com/vuejs/vue/issues/7649)