@elsahafy/ux-mcp-server 2.0.0 → 4.0.0

package/knowledge/voice-ui.json

@@ -0,0 +1,359 @@
+{
+  "name": "Voice User Interface (VUI) Design",
+  "description": "Comprehensive guide to designing voice user interfaces for voice assistants, smart speakers, and voice-enabled applications",
+  "definition": "Voice User Interface (VUI) is a speech-based interaction system that allows users to interact with technology through voice commands and spoken language.",
+  "platforms": {
+    "smart_speakers": ["Amazon Alexa", "Google Assistant", "Apple Siri", "Samsung Bixby"],
+    "voice_assistants": ["Siri (iOS)", "Google Assistant (Android)", "Cortana (Windows)"],
+    "voice_apps": ["Voice skills (Alexa)", "Actions (Google)", "Shortcuts (Siri)"],
+    "automotive": ["CarPlay", "Android Auto", "In-vehicle assistants"],
+    "accessibility": "Voice interfaces for users with disabilities (blind, motor impairments)"
+  },
+  "vui_principles": {
+    "conversational": {
+      "description": "Sound natural, like human conversation",
+      "practices": [
+        "Use contractions (don't, can't, won't)",
+        "Vary responses (avoid robotic repetition)",
+        "Match user's language level",
+        "Be concise (spoken word is slower than reading)",
+        "Use pronouns to avoid repetition"
+      ]
+    },
+    "cooperative": {
+      "description": "Be helpful and collaborative",
+      "practices": [
+        "Provide help when user is stuck",
+        "Confirm important actions",
+        "Offer alternatives when request can't be fulfilled",
+        "Guide user toward successful completion"
+      ]
+    },
+    "succinct": {
+      "description": "Respect user's time and attention",
+      "practices": [
+        "Lead with most important information",
+        "Limit to 1-2 sentences per response",
+        "Avoid unnecessary pleasantries after first interaction",
+        "Use progressive disclosure (don't list everything at once)"
+      ]
+    },
+    "clear": {
+      "description": "Unambiguous and easy to understand",
+      "practices": [
+        "Avoid jargon and technical terms",
+        "Use simple sentence structure",
+        "Pronounce numbers and acronyms clearly",
+        "Provide context for choices"
+      ]
+    }
+  },
+  "conversation_design": {
+    "dialog_structure": {
+      "greeting": {
+        "first_time": "Welcome! I'm [Name]. I can help you [primary functions]. What would you like to do?",
+        "returning": "Welcome back! What can I help with today?",
+        "best_practices": ["Brief (< 10 seconds)", "Set expectations", "Offer help", "Don't repeat full intro every time"]
+      },
+      "prompts": {
+        "open_ended": {
+          "use": "When options are many or unknown",
+          "example": "What would you like to order?",
+          "risk": "User may not know what to say"
+        },
+        "closed_ended": {
+          "use": "When options are limited",
+          "example": "Would you like pickup or delivery?",
+          "benefit": "Easier for user, clearer intent"
+        },
+        "directed": {
+          "use": "Guide user with examples",
+          "example": "You can say things like 'Order a pizza' or 'Check my order status'. What would you like?"
+        }
+      },
+      "confirmations": {
+        "implicit": "Used for low-stakes actions. Example: 'OK, setting your alarm for 7 AM.'",
+        "explicit": "Used for high-stakes actions. Example: 'I'll charge your card $50. Is that OK?'",
+        "best_practice": "Always confirm destructive or financial actions"
+      },
+      "error_handling": {
+        "no_match": {
+          "description": "System didn't understand",
+          "response": "Sorry, I didn't catch that. Could you repeat?",
+          "after_2nd_failure": "I'm having trouble understanding. You can say [examples], or say 'help'.",
+          "after_3rd_failure": "Let me connect you to a person who can help."
+        },
+        "no_input": {
+          "description": "User didn't respond",
+          "response": "Are you still there?",
+          "timeout": "OK, let me know if you need anything."
+        },
+        "out_of_scope": {
+          "description": "Request not supported",
+          "response": "I can't do that yet, but I can help you [supported actions]. What would you like?",
+          "avoid": "Just saying 'I can't do that' (dead end)"
+        }
+      }
+    },
+    "persona": {
+      "description": "Voice assistant's personality",
+      "considerations": {
+        "tone": "Professional, friendly, casual, formal (match brand and audience)",
+        "vocabulary": "Match user's language level and domain",
+        "humor": "Use sparingly, avoid sarcasm (tone doesn't translate)",
+        "empathy": "Acknowledge user frustration or celebrate success"
+      },
+      "consistency": "Maintain persona across all interactions"
+    },
+    "sample_size": {
+      "description": "Variety of user utterances to account for",
+      "example": "User wants to order pizza - 'I want a pizza', 'Order pizza', 'Get me a large pepperoni', 'Pizza delivery'",
+      "recommendation": "Support 10-20 variations per intent",
+      "tools": "Natural Language Understanding (NLU) handles variations"
+    }
+  },
+  "voice_design_patterns": {
+    "one_shot": {
+      "description": "User completes task in single utterance",
+      "example": "'Alexa, set timer for 10 minutes'",
+      "use_when": "Simple, frequent tasks",
+      "benefit": "Fastest interaction"
+    },
+    "multi_turn": {
+      "description": "Back-and-forth dialog to complete task",
+      "example": "User: 'Book a flight'\nAssistant: 'Where to?'\nUser: 'New York'\nAssistant: 'What date?'\nUser: 'Next Friday'",
+      "use_when": "Complex tasks requiring multiple inputs",
+      "best_practices": ["Keep turns short", "Confirm at end", "Allow editing previous answers", "Show progress"]
+    },
+    "disambiguation": {
+      "description": "Clarify ambiguous requests",
+      "example": "User: 'Play Hamilton'\nAssistant: 'I found the musical soundtrack and the audiobook. Which would you like?'",
+      "best_practice": "Limit choices to 2-3, provide clear distinctions"
+    },
+    "slot_filling": {
+      "description": "Collect required information progressively",
+      "example": "Booking flight - collect: destination, date, passengers, class",
+      "best_practice": "Ask for required slots first, optional later"
+    },
+    "context_carryover": {
+      "description": "Remember previous context in conversation",
+      "example": "User: 'Weather in Seattle'\nAssistant: '65 and sunny'\nUser: 'How about tomorrow?'\nAssistant (remembers Seattle): 'Tomorrow in Seattle will be 62 and cloudy'",
+      "use_when": "Follow-up questions, refinements"
+    }
+  },
+  "accessibility": {
+    "for_blind_users": {
+      "importance": "Voice UI is primary interface for blind users",
+      "best_practices": [
+        "Provide audio feedback for all actions",
+        "Describe visual content (images, charts)",
+        "Support navigation without visual cues",
+        "Avoid relying on screen for critical info"
+      ]
+    },
+    "for_motor_impairments": {
+      "importance": "Voice eliminates need for physical interaction",
+      "best_practices": [
+        "Support full functionality via voice",
+        "Avoid requiring rapid responses",
+        "Allow pauses without timeout"
+      ]
+    },
+    "for_cognitive_disabilities": {
+      "best_practices": [
+        "Use simple language",
+        "Keep responses short",
+        "Provide help easily ('say help')",
+        "Be patient with errors"
+      ]
+    },
+    "accent_diversity": {
+      "challenge": "Voice recognition may struggle with accents",
+      "mitigation": [
+        "Train models on diverse accents",
+        "Provide text fallback option",
+        "Allow spelling out words"
+      ]
+    }
+  },
+  "multimodal": {
+    "description": "Combining voice with visual display",
+    "devices": ["Smart displays (Echo Show, Nest Hub)", "Smartphones", "Car displays"],
+    "benefits": [
+      "Visual confirmation of voice commands",
+      "Show complex information (lists, images)",
+      "Fallback for misheard commands",
+      "Enhanced accessibility"
+    ],
+    "best_practices": {
+      "design_for_voice_first": "Voice should work standalone (visual is enhancement)",
+      "sync_visual_audio": "Visual should match what's being said",
+      "brevity_visual": "Don't show walls of text (people will ask to scroll)",
+      "touch_optional": "Allow touch but don't require it"
+    },
+    "patterns": {
+      "list_navigation": "Voice reads items, visual shows list, user can scroll or say number",
+      "visual_confirmation": "Voice says action, visual shows result",
+      "complex_data": "Voice summarizes, visual shows detail (e.g., weather forecast)"
+    }
+  },
+  "testing": {
+    "script_testing": {
+      "description": "Test dialog flows with scripts",
+      "process": "Write out conversations, walk through all paths",
+      "check": ["Natural flow", "Error handling", "Edge cases", "Dead ends"]
+    },
+    "wizard_of_oz": {
+      "description": "Human plays role of voice assistant",
+      "process": "Users speak to 'assistant', human responds (simulates AI)",
+      "benefit": "Test before building, understand user language",
+      "use_when": "Early concept validation"
+    },
+    "user_testing": {
+      "description": "Test with real users and voice recognition",
+      "participants": "8-10 users representing target audience",
+      "environment": "Quiet room (minimize background noise)",
+      "observe": ["What users say", "Misrecognitions", "Confusion points", "Success rate"],
+      "metrics": ["Task completion rate", "Error rate", "Time to complete", "User satisfaction"]
+    },
+    "real_world_testing": {
+      "description": "Test in actual usage environments",
+      "scenarios": ["Noisy kitchen (cooking)", "Moving vehicle", "Background TV/music"],
+      "challenge": "Far-field voice recognition, background noise"
+    }
+  },
+  "technical_considerations": {
+    "voice_recognition": {
+      "accuracy": "Aim for > 95% word error rate",
+      "challenges": ["Accents", "Background noise", "Homophones (two, too, to)"],
+      "mitigation": "Train models on diverse speech, use context to disambiguate"
+    },
+    "natural_language_understanding": {
+      "nlu": "Understand user intent from varied utterances",
+      "entities": "Extract specific info (dates, locations, names)",
+      "intents": "User's goal (OrderPizza, CheckWeather, SetAlarm)",
+      "example": "'Book flight to NYC on Friday' → Intent: BookFlight, Entities: {destination: NYC, date: Friday}"
+    },
+    "text_to_speech": {
+      "tts": "Convert text responses to spoken audio",
+      "quality": "Use neural TTS for natural-sounding voices",
+      "customization": ["Adjust speed", "Emphasis with SSML", "Pauses"],
+      "ssml": "Speech Synthesis Markup Language for control (pitch, rate, volume, pauses)"
+    },
+    "wake_words": {
+      "description": "Activation phrase (Alexa, Hey Google, Hey Siri)",
+      "challenge": "Always listening raises privacy concerns",
+      "best_practice": "Clear indicator when listening (light, chime)",
+      "privacy": "Local wake word detection, cloud for processing"
+    }
+  },
+  "privacy_ethics": {
+    "always_listening": {
+      "concern": "Device always listening for wake word",
+      "mitigation": ["Visual indicator when active", "Mute button", "Delete history option"],
+      "transparency": "Explain data collection and usage"
+    },
+    "data_retention": {
+      "concern": "Voice recordings stored",
+      "best_practice": ["Allow users to delete history", "Auto-delete after X days option", "Don't require login for basic features"],
+      "legal": "GDPR requires data deletion and export"
+    },
+    "consent": {
+      "requirement": "Explain voice data usage before collection",
+      "best_practice": "Opt-in, not opt-out"
+    }
+  },
+  "best_practices": [
+    "Design for voice-first (visual is enhancement)",
+    "Be conversational (use contractions, vary responses)",
+    "Keep responses short (< 10 seconds, 1-2 sentences)",
+    "Confirm high-stakes actions explicitly",
+    "Provide help when user is stuck",
+    "Support varied phrasings (10-20 per intent)",
+    "Handle errors gracefully (reprompt, offer examples, escalate)",
+    "Test with diverse accents and backgrounds",
+    "Use simple language (avoid jargon)",
+    "Provide clear visual feedback in multimodal",
+    "Respect user privacy (clear indicators, delete options)",
+    "Design for accessibility (voice is critical for blind users)",
+    "Avoid dead ends (always offer next step)",
+    "Context carryover for follow-ups",
+    "Progressive disclosure (don't list all options)"
+  ],
+  "anti_patterns": [
+    "Robotic, unnatural language",
+    "Long, verbose responses (> 30 seconds)",
+    "No error handling (just fails)",
+    "Requiring exact phrasing",
+    "No confirmation for destructive actions",
+    "Dead ends ('I can't do that' with no alternative)",
+    "Repeating full greeting every time",
+    "Relying on screen for critical info (voice-first!)",
+    "Not testing with real users",
+    "Ignoring accents and speech variations",
+    "No visual feedback in multimodal interfaces",
+    "Always-on with no privacy controls",
+    "Complex menu navigation (press 1 for...)",
+    "Not handling noise/background audio",
+    "Forgetting context (user must repeat info)"
+  ],
+  "metrics": {
+    "task_success_rate": "% of users who complete task successfully",
+    "error_rate": "% of utterances not understood",
+    "average_turns": "Number of back-and-forth exchanges (fewer is better for simple tasks)",
+    "time_to_completion": "How long task takes",
+    "user_satisfaction": "Post-task survey (SUS, CSAT)",
+    "retention": "Do users return?",
+    "wake_word_accuracy": "% of wake word detections that are true positives"
+  },
+  "tools_frameworks": {
+    "amazon_alexa": {
+      "platform": "Amazon Echo, Fire TV",
+      "development": "Alexa Skills Kit (ASK)",
+      "language": "Node.js, Python, Java",
+      "strength": "Largest skill library, smart home integration"
+    },
+    "google_assistant": {
+      "platform": "Google Home, Android, iOS",
+      "development": "Actions on Google, Dialogflow",
+      "language": "Node.js, Java, Python",
+      "strength": "Best voice recognition, Google services integration"
+    },
+    "apple_siri": {
+      "platform": "iOS, macOS, HomePod",
+      "development": "SiriKit, Shortcuts",
+      "limitation": "More restrictive, limited domains",
+      "strength": "Apple ecosystem integration"
+    },
+    "web_speech_api": {
+      "description": "Browser-based voice recognition and synthesis",
+      "use": "Voice interfaces in web apps",
+      "support": "Chrome, Edge, Safari (partial)"
+    }
+  },
+  "case_studies": {
+    "dominos_pizza": {
+      "approach": "Voice ordering via Alexa and Google",
+      "feature": "'Easy Order' - one phrase to order favorite",
+      "result": "Increased orders, improved accessibility"
+    },
+    "capital_one": {
+      "approach": "Banking via Alexa (balance, payments, transactions)",
+      "security": "Voice PIN for authentication",
+      "result": "Convenient banking for customers"
+    },
+    "mayo_clinic": {
+      "approach": "Symptom checker and health info via voice",
+      "benefit": "Accessible health information",
+      "use_case": "Hands-free (cooking, driving)"
+    }
+  },
+  "resources": [
+    "Designing Voice User Interfaces (Cathy Pearl) - VUI design bible",
+    "Voice User Interface Design (Michael McTear et al.) - Academic perspective",
+    "Alexa Design Guide - Amazon's official VUI guidelines",
+    "Google Assistant Conversation Design - Google's guidelines",
+    "VUI Magazine - Voice UI publication",
+    "Project EVIA (Embodied Voice Industry Association)"
+  ]
+}

package/knowledge/vue-patterns.json

@@ -0,0 +1,279 @@
+{
+  "name": "Vue.js Patterns & Best Practices",
+  "description": "Comprehensive guide to Vue.js component patterns, Composition API, state management, and performance optimization",
+  "version_note": "Patterns focus on Vue 3 with Composition API, with notes for Options API where relevant",
+  "composition_api": {
+    "description": "Modern Vue 3 API for organizing component logic",
+    "setup_function": {
+      "description": "Entry point for Composition API",
+      "example": "<script setup>\nimport { ref, computed, onMounted } from 'vue'\n\nconst count = ref(0)\nconst doubleCount = computed(() => count.value * 2)\n\nfunction increment() {\n  count.value++\n}\n\nonMounted(() => {\n  console.log('Component mounted')\n})\n</script>",
+      "benefits": ["Better TypeScript support", "Code organization by feature", "Easier reuse"]
+    },
+    "reactivity": {
+      "ref": {
+        "use": "Reactive primitive values",
+        "example": "const count = ref(0)\nconsole.log(count.value) // access with .value",
+        "when": "Numbers, strings, booleans"
+      },
+      "reactive": {
+        "use": "Reactive objects",
+        "example": "const state = reactive({ count: 0, name: 'John' })\nconsole.log(state.count) // no .value needed",
+        "when": "Objects with multiple properties"
+      },
+      "readonly": {
+        "use": "Immutable reactive state",
+        "example": "const state = reactive({ count: 0 })\nconst readonlyState = readonly(state)",
+        "when": "Prevent mutations from child components"
+      },
+      "toRefs": {
+        "use": "Convert reactive object to refs for destructuring",
+        "example": "const state = reactive({ count: 0, name: 'John' })\nconst { count, name } = toRefs(state)",
+        "benefit": "Preserve reactivity when destructuring"
+      }
+    },
+    "computed": {
+      "description": "Cached derived state",
+      "example": "const doubleCount = computed(() => count.value * 2)",
+      "benefits": ["Cached until dependencies change", "Read-only by default"],
+      "writable": "const fullName = computed({\n  get: () => `${firstName.value} ${lastName.value}`,\n  set: (value) => {\n    const names = value.split(' ')\n    firstName.value = names[0]\n    lastName.value = names[1]\n  }\n})"
+    },
+    "watchers": {
+      "watch": {
+        "description": "Watch single or multiple sources",
+        "example": "watch(count, (newVal, oldVal) => {\n  console.log(`Count changed from ${oldVal} to ${newVal}`)\n})",
+        "multiple": "watch([foo, bar], ([newFoo, newBar], [oldFoo, oldBar]) => { ... })"
+      },
+      "watchEffect": {
+        "description": "Auto-tracks dependencies",
+        "example": "watchEffect(() => {\n  console.log(`Count is ${count.value}`)\n})",
+        "when": "Don't need old value, automatic tracking"
+      }
+    }
+  },
+  "component_patterns": {
+    "composables": {
+      "description": "Reusable composition functions (like React hooks)",
+      "naming": "Prefix with 'use'",
+      "example": "// useCounter.js\nimport { ref, computed } from 'vue'\n\nexport function useCounter(initial = 0) {\n  const count = ref(initial)\n  const double = computed(() => count.value * 2)\n  \n  function increment() {\n    count.value++\n  }\n  \n  return { count, double, increment }\n}\n\n// In component:\nimport { useCounter } from './useCounter'\nconst { count, double, increment } = useCounter(10)",
+      "benefits": ["Logic reuse", "Code organization", "Testable"],
+      "best_practices": [
+        "Return reactive values and functions",
+        "Name with 'use' prefix",
+        "Keep focused (single responsibility)",
+        "Document parameters and return values"
+      ]
+    },
+    "provide_inject": {
+      "description": "Dependency injection for component tree",
+      "provide": "const theme = ref('dark')\nprovide('theme', theme)",
+      "inject": "const theme = inject('theme')",
+      "use_when": "Pass data deep without props drilling",
+      "with_typescript": "// Provide typed injection key\nconst themeKey = Symbol() as InjectionKey<Ref<string>>\nprovide(themeKey, theme)\nconst theme = inject(themeKey)",
+      "default_values": "const theme = inject('theme', 'light')"
+    },
+    "slots": {
+      "default_slot": {
+        "parent": "<Card>\n  <p>Default content</p>\n</Card>",
+        "component": "<template>\n  <div class='card'>\n    <slot />\n  </div>\n</template>"
+      },
+      "named_slots": {
+        "parent": "<Card>\n  <template #header>\n    <h2>Title</h2>\n  </template>\n  <template #default>\n    <p>Content</p>\n  </template>\n  <template #footer>\n    <button>Action</button>\n  </template>\n</Card>",
+        "component": "<template>\n  <div class='card'>\n    <header><slot name='header' /></header>\n    <main><slot /></main>\n    <footer><slot name='footer' /></footer>\n  </div>\n</template>"
+      },
+      "scoped_slots": {
+        "description": "Pass data to slot content",
+        "parent": "<List :items='items'>\n  <template #item='{ item, index }'>\n    <div>{{ index }}: {{ item.name }}</div>\n  </template>\n</List>",
+        "component": "<template>\n  <div>\n    <div v-for='(item, index) in items' :key='item.id'>\n      <slot name='item' :item='item' :index='index' />\n    </div>\n  </div>\n</template>"
+      }
+    },
+    "teleport": {
+      "description": "Render component content elsewhere in DOM",
+      "example": "<teleport to='body'>\n  <Modal v-if='showModal'>\n    <p>Modal content</p>\n  </Modal>\n</teleport>",
+      "use_when": "Modals, toasts, tooltips that need to escape parent overflow"
+    },
+    "async_components": {
+      "description": "Lazy load components",
+      "example": "const AsyncComp = defineAsyncComponent(() =>\n  import('./HeavyComponent.vue')\n)\n\n// With loading/error states:\nconst AsyncComp = defineAsyncComponent({\n  loader: () => import('./HeavyComponent.vue'),\n  loadingComponent: LoadingSpinner,\n  errorComponent: ErrorDisplay,\n  delay: 200,\n  timeout: 3000\n})",
+      "use_when": "Large components, route-based code splitting"
+    }
+  },
+  "state_management": {
+    "local_state": {
+      "use_when": "Component-specific state",
+      "composition_api": "const count = ref(0)",
+      "options_api": "data() { return { count: 0 } }"
+    },
+    "props_state": {
+      "description": "Receive data from parent",
+      "composition_api": "const props = defineProps<{\n  count: number\n  name?: string\n}>()",
+      "with_defaults": "const props = withDefaults(defineProps<{\n  count?: number\n}>(), {\n  count: 0\n})",
+      "validation": "defineProps({\n  count: {\n    type: Number,\n    required: true,\n    validator: (value) => value >= 0\n  }\n})"
+    },
+    "emits": {
+      "description": "Emit events to parent",
+      "composition_api": "const emit = defineEmits<{\n  update: [value: number]\n  delete: [id: string]\n}>()\n\nemit('update', 42)",
+      "v_model": "// Component\nconst emit = defineEmits(['update:modelValue'])\n\n// Parent\n<CustomInput v-model='text' />"
+    },
+    "pinia": {
+      "description": "Official state management for Vue 3",
+      "store_definition": "import { defineStore } from 'pinia'\n\nexport const useCounterStore = defineStore('counter', () => {\n  const count = ref(0)\n  const doubled = computed(() => count.value * 2)\n  \n  function increment() {\n    count.value++\n  }\n  \n  return { count, doubled, increment }\n})",
+      "usage": "import { useCounterStore } from '@/stores/counter'\n\nconst counter = useCounterStore()\ncounter.increment()\nconsole.log(counter.count)",
+      "features": ["DevTools support", "TypeScript", "Composition API style", "Lightweight"],
+      "when_to_use": "Global state, shared between routes/components"
+    },
+    "vuex": {
+      "description": "Legacy state management (Vue 2)",
+      "note": "Use Pinia for new Vue 3 projects",
+      "migration": "Pinia is easier and more flexible"
+    }
+  },
+  "routing": {
+    "vue_router": {
+      "setup": "import { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: '/', component: Home },\n    { path: '/about', component: About },\n    { path: '/users/:id', component: User }\n  ]\n})",
+      "navigation": {
+        "declarative": "<router-link to='/about'>About</router-link>",
+        "programmatic": "import { useRouter } from 'vue-router'\nconst router = useRouter()\nrouter.push('/about')"
+      },
+      "params": "import { useRoute } from 'vue-router'\nconst route = useRoute()\nconst userId = route.params.id",
+      "guards": {
+        "global": "router.beforeEach((to, from) => {\n  if (!isAuthenticated && to.meta.requiresAuth) {\n    return '/login'\n  }\n})",
+        "route_level": "{\n  path: '/admin',\n  component: Admin,\n  beforeEnter: (to, from) => {\n    // route guard\n  }\n}",
+        "component_level": "import { onBeforeRouteLeave } from 'vue-router'\n\nonBeforeRouteLeave((to, from) => {\n  // component guard\n})"
+      }
+    }
+  },
+  "performance": {
+    "v_memo": {
+      "description": "Memoize template sub-tree (Vue 3.2+)",
+      "example": "<div v-memo='[count]'>\n  {{ heavyComputation }}\n</div>",
+      "when": "Heavy computations that depend on specific values"
+    },
+    "v_once": {
+      "description": "Render element/component once",
+      "example": "<div v-once>{{ staticContent }}</div>",
+      "when": "Static content that never changes"
+    },
+    "keep_alive": {
+      "description": "Cache component instances",
+      "example": "<keep-alive>\n  <component :is='currentTab' />\n</keep-alive>",
+      "with_include": "<keep-alive include='a,b' exclude='c'>\n  <component :is='view' />\n</keep-alive>",
+      "when": "Tabs, dynamic components, preserve state"
+    },
+    "lazy_loading": {
+      "routes": "const User = () => import('./User.vue')",
+      "components": "defineAsyncComponent(() => import('./Heavy.vue'))"
+    },
+    "shallowRef_shallowReactive": {
+      "description": "Shallow reactivity for large objects",
+      "use_when": "Large data structures, only top level changes",
+      "example": "const state = shallowReactive({ nested: { deep: { value: 1 } } })\n// Only state.nested triggers updates, not deep mutations"
+    }
+  },
+  "typescript": {
+    "component_props": "import { defineComponent } from 'vue'\n\nexport default defineComponent({\n  props: {\n    count: { type: Number, required: true },\n    name: String\n  }\n})\n\n// Or with script setup:\ninterface Props {\n  count: number\n  name?: string\n}\n\nconst props = defineProps<Props>()",
+    "refs": "const count = ref<number>(0)\nconst input = ref<HTMLInputElement | null>(null)",
+    "computed": "const double = computed<number>(() => count.value * 2)",
+    "emits": "const emit = defineEmits<{\n  update: [id: number, value: string]\n  delete: [id: number]\n}>()"
+  },
+  "directives": {
+    "built_in": {
+      "v_if": "Conditional rendering (removes from DOM)",
+      "v_show": "Toggle display (stays in DOM)",
+      "v_for": "List rendering",
+      "v_bind": "Bind attributes (:class, :style)",
+      "v_on": "Event listeners (@click, @input)",
+      "v_model": "Two-way binding",
+      "v_slot": "Slot content (#header)"
+    },
+    "custom_directives": {
+      "example": "// v-focus directive\nconst vFocus = {\n  mounted: (el) => el.focus()\n}\n\n// Usage:\n<input v-focus />",
+      "lifecycle_hooks": ["created", "beforeMount", "mounted", "beforeUpdate", "updated", "beforeUnmount", "unmounted"]
+    }
+  },
+  "testing": {
+    "vitest": {
+      "description": "Fast unit test framework for Vite projects",
+      "example": "import { describe, it, expect } from 'vitest'\nimport { mount } from '@vue/test-utils'\nimport Counter from './Counter.vue'\n\ndescribe('Counter', () => {\n  it('increments count on click', async () => {\n    const wrapper = mount(Counter)\n    await wrapper.find('button').trigger('click')\n    expect(wrapper.text()).toContain('Count: 1')\n  })\n})"
+    },
+    "vue_test_utils": {
+      "mount": "Full DOM mounting",
+      "shallowMount": "Shallow mounting (stub child components)",
+      "find": "Find element by selector",
+      "trigger": "Trigger events",
+      "setProps": "Update props",
+      "example": "const wrapper = mount(Component, {\n  props: { count: 0 },\n  global: {\n    stubs: ['ChildComponent']\n  }\n})"
+    },
+    "e2e": {
+      "cypress": "Recommended E2E testing framework",
+      "playwright": "Alternative E2E framework"
+    }
+  },
+  "best_practices": [
+    "Use Composition API for new Vue 3 projects",
+    "Prefer `<script setup>` syntax for cleaner code",
+    "Use ref for primitives, reactive for objects",
+    "Create composables for reusable logic",
+    "Use Pinia for state management (not Vuex)",
+    "Define prop types with TypeScript",
+    "Use computed for derived state (not methods)",
+    "Keep components small and focused",
+    "Use slots for flexible component composition",
+    "Lazy load routes and heavy components",
+    "Use v-memo for expensive re-renders",
+    "Provide meaningful key attributes in v-for",
+    "Use teleport for modals/tooltips",
+    "Follow Vue style guide naming conventions",
+    "Test components with Vue Test Utils + Vitest",
+    "Use provide/inject sparingly (prefer props)",
+    "Keep watchers simple (or use computed)",
+    "Use keep-alive for tab-like interfaces",
+    "Memoize expensive computations",
+    "Use shallowRef/shallowReactive for large objects"
+  ],
+  "anti_patterns": [
+    "Mutating props directly",
+    "Using v-if with v-for on same element",
+    "Not providing keys in v-for lists",
+    "Accessing $refs in computed properties",
+    "Overusing watchers (use computed instead)",
+    "Deep nesting of components (> 4 levels)",
+    "Large components (> 300 lines)",
+    "Not using TypeScript in new projects",
+    "Using Options API for new Vue 3 projects",
+    "Mixing Options API and Composition API",
+    "Not using Pinia (using Vuex for Vue 3)",
+    "Not lazy loading routes",
+    "Ignoring Vue DevTools warnings",
+    "Not testing components",
+    "Overusing provide/inject (creates hidden dependencies)"
+  ],
+  "migration": {
+    "from_vue2": {
+      "breaking_changes": [
+        "Global API changes (Vue.createApp instead of new Vue)",
+        "v-model changes",
+        "Filters removed (use computed or methods)",
+        "$children removed",
+        "Events API removed ($on, $off, $once)"
+      ],
+      "tools": ["@vue/compat (migration build)", "Vue 3 Migration Guide"],
+      "strategy": "Incremental migration using compat mode"
+    },
+    "from_react": {
+      "equivalents": {
+        "useState": "ref or reactive",
+        "useEffect": "watchEffect or watch",
+        "useMemo": "computed",
+        "useCallback": "Not needed (functions are not recreated)",
+        "useContext": "provide/inject",
+        "custom_hooks": "composables"
+      }
+    }
+  },
+  "ecosystem": {
+    "ui_libraries": ["Vuetify", "Quasar", "Element Plus", "Ant Design Vue", "PrimeVue"],
+    "build_tools": ["Vite (recommended)", "Vue CLI (legacy)"],
+    "devtools": ["Vue DevTools", "Vite plugin"],
+    "meta_frameworks": ["Nuxt 3 (SSR/SSG)", "Quasar (Mobile/Desktop)"]
+  }
+}