feat: add onboarding to 6 new apps and feature intro step to all 16 apps

Add onboarding with feature overview, preference selection, and tips to
Zitare, Mukke, Photos, Planta, SkillTree, and Questions. Insert a new
first "features" info step into all 10 existing onboarding flows so every
app now starts with a core-features overview page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/skilltree/apps/web/package.json

@@ -41,6 +41,7 @@
 		"@manacore/shared-error-tracking": "workspace:*",
 		"@manacore/shared-i18n": "workspace:*",
 		"@manacore/shared-icons": "workspace:*",
+		"@manacore/shared-app-onboarding": "workspace:*",
 		"@manacore/shared-tailwind": "workspace:*",
 		"@manacore/shared-theme": "workspace:*",
 		"@manacore/shared-ui": "workspace:^",

apps/skilltree/apps/web/src/lib/stores/app-onboarding.svelte.ts

@@ -0,0 +1,88 @@
+import { createAppOnboardingStore, type AppOnboardingStep } from '@manacore/shared-app-onboarding';
+import { userSettings } from './user-settings.svelte';
+
+const skilltreeOnboardingSteps: AppOnboardingStep[] = [
+	{
+		id: 'features',
+		type: 'info',
+		question: 'Willkommen bei SkillTree!',
+		description: 'Das kann SkillTree für dich tun:',
+		emoji: '🌳',
+		gradient: { from: 'emerald-500', to: 'emerald-700' },
+		bullets: [
+			'RPG-Skill-Baum für echte Fähigkeiten',
+			'6 Bereiche: Intellekt, Körper, Kreativität, Sozial, Praktisch, Mindset',
+			'XP sammeln & Level aufsteigen',
+			'Aktivitäten loggen & Fortschritt tracken',
+		],
+	},
+	{
+		id: 'focusBranch',
+		type: 'select',
+		question: 'Welcher Bereich interessiert dich am meisten?',
+		description: 'Du kannst alle Bereiche nutzen — das ist nur dein Startfokus.',
+		emoji: '🎯',
+		gradient: { from: 'indigo-500', to: 'indigo-700' },
+		options: [
+			{
+				id: 'intellect',
+				label: 'Intellekt',
+				description: 'Wissen, Sprachen, Wissenschaft',
+				emoji: '🧠',
+			},
+			{
+				id: 'body',
+				label: 'Körper',
+				description: 'Fitness, Sport, Gesundheit',
+				emoji: '💪',
+			},
+			{
+				id: 'creativity',
+				label: 'Kreativität',
+				description: 'Kunst, Musik, Schreiben',
+				emoji: '🎨',
+			},
+			{
+				id: 'social',
+				label: 'Sozial',
+				description: 'Kommunikation, Führung',
+				emoji: '👥',
+			},
+			{
+				id: 'practical',
+				label: 'Praktisch',
+				description: 'Handwerk, Kochen, Technik',
+				emoji: '🔧',
+			},
+			{
+				id: 'mindset',
+				label: 'Mindset',
+				description: 'Meditation, Fokus, Resilienz',
+				emoji: '🧘',
+			},
+		],
+		defaultValue: 'intellect',
+	},
+	{
+		id: 'welcome',
+		type: 'info',
+		question: 'Dein Skill-Baum ist bereit!',
+		description: 'Hier sind einige Tipps:',
+		emoji: '🎉',
+		gradient: { from: 'primary', to: 'primary/70' },
+		bullets: [
+			'Erstelle Skills in deinem Fokus-Bereich',
+			'Logge Aktivitäten, um XP zu sammeln',
+			'Level reichen von Anfänger bis Meister',
+			'Bleib dran — regelmäßige Aktivitäten geben Bonus-XP',
+		],
+	},
+];
+
+export const skilltreeOnboarding = createAppOnboardingStore({
+	appId: 'skilltree',
+	steps: skilltreeOnboardingSteps,
+	userSettings,
+	onComplete: async () => {},
+	onSkip: async () => {},
+});

apps/skilltree/apps/web/src/lib/stores/user-settings.svelte.ts

@@ -0,0 +1,18 @@
+import { browser } from '$app/environment';
+import { createUserSettingsStore } from '@manacore/shared-theme';
+import { authStore } from './auth.svelte';
+
+function getAuthUrl(): string {
+	if (browser && typeof window !== 'undefined') {
+		const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string })
+			.__PUBLIC_MANA_CORE_AUTH_URL__;
+		return injectedUrl || 'http://localhost:3001';
+	}
+	return 'http://localhost:3001';
+}
+
+export const userSettings = createUserSettingsStore({
+	appId: 'skilltree',
+	authUrl: getAuthUrl(),
+	getAccessToken: () => authStore.getAccessToken(),
+});

apps/skilltree/apps/web/src/routes/+layout.svelte

@@ -5,6 +5,8 @@
 	import { isLoading as i18nLoading, _ as t } from 'svelte-i18n';
 	import { skillStore } from '$lib/stores/skills.svelte';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { MiniOnboardingModal } from '@manacore/shared-app-onboarding';
+	import { skilltreeOnboarding } from '$lib/stores/app-onboarding.svelte';
 
 	let { children } = $props();
 
@@ -33,4 +35,8 @@
 	<div class="min-h-screen bg-gray-900 text-gray-100">
 		{@render children()}
 	</div>
+
+	{#if skilltreeOnboarding.shouldShow}
+		<MiniOnboardingModal store={skilltreeOnboarding} appName="SkillTree" appEmoji="🌳" />
+	{/if}
 {/if}