Cyberflow RPG Game Master skill — AI-driven challenge system for FlowState gamification. Use for developing, debugging, or extending the RPG challenge engine, ARIA game master, corruption system, boss fights, and narrative features. Triggers on 'challenge', 'boss fight', 'corruption', 'ARIA', 'game master', 'RPG', 'cyberflow', 'daily mission', 'weekly boss'.
Version: 1.0.0 Category: Feature Development Related Skills: dev-debugging, dev-implement-ui-ux, chief-architect, qa-testing
Development skill for FlowState's AI-driven RPG gamification layer (FEATURE-1132). The system transforms passive XP tracking into an interactive cyberpunk RPG where:
Invoke this skill when:
Skill(qa-testing) to verify| Component | File | Purpose |
|---|---|---|
| Types | src/types/gamification.ts | XP, achievements, shop, streaks, levels |
| Store | src/stores/gamification.ts | All gamification state + logic (1267 lines) |
| Settings | src/stores/settings.ts | gamificationEnabled, intensity, notifications |
| Components | src/components/gamification/ | 9 Vue components (XpBar, LevelBadge, etc.) |
| Migration | supabase/migrations/20260131000000_gamification.sql | 7 tables, 32 achievements, 11 shop items |
| Header | src/layouts/AppHeader.vue | XP bar, level badge, streak, panel dropdown |
| Layout | src/layouts/MainLayout.vue | GamificationToasts |
| Component | File | Purpose |
|---|---|---|
| Router | src/services/ai/router.ts | Multi-provider routing (Ollama→Groq→OpenRouter) |
| Types | src/services/ai/types.ts | ChatMessage, GenerateOptions, StreamChunk |
| Providers | src/services/ai/providers/ | Ollama, GroqProxy, OpenRouterProxy |
| Chat Store | src/stores/aiChat.ts | Chat panel state, message queue |
| Chat Composable | src/composables/useAIChat.ts | High-level chat API, context building |
| Chat UI | src/components/ai/AIChatPanel.vue | Chat panel component |
| Component | File | Purpose |
|---|---|---|
| Types | src/types/challenges.ts | Challenge, ChallengeObjective, BossFight |
| Store | src/stores/challenges.ts | Challenge CRUD, progress tracking, expiry |
| Game Master | src/services/ai/gamemaster.ts | ARIA persona, prompt engineering, JSON parsing |
| Templates | src/services/ai/challengeTemplates.ts | Fallback templates when AI unavailable |
| Corruption | src/components/gamification/CorruptionOverlay.vue | CSS corruption visuals |
| Challenge Card | src/components/gamification/ChallengeCard.vue | Individual challenge display |
| Dailies Panel | src/components/gamification/DailyChallengesPanel.vue | 3 daily missions UI |
| Boss Panel | src/components/gamification/BossFightPanel.vue | Weekly boss HP bar + timer |
| ARIA Message | src/components/gamification/ARIAMessage.vue | Styled game master messages |
| Celebration | src/components/gamification/ChallengeComplete.vue | Victory animation + rewards |
Existing (gamification): user_gamification, xp_logs, achievements, user_achievements, shop_items, user_purchases, user_stats
New (challenges):
user_challenges — Active challenges with objectives, rewards, penaltieschallenge_history — Completed/failed challenge analyticsuser_gamification ALTER — Add corruption_level, active_multiplier, character_class, challenge countersARIA speaks as a ship's AI computer in cyberpunk style:
Input to AI: JSON context object with:
{
stats: { tasksCompleted, overdueCount, focusTimeToday, pomodorosToday },
streak: { current, longest, isActive },
corruption: { level, trend },
recentChallenges: { completed: number, failed: number, types: string[] },
projects: { name, taskCount, overdueCount }[],
timeContext: { hour, dayOfWeek, isWeekend },
patterns: { averageTasksPerDay, preferredHours, topProjects },
difficulty: 'easy' | 'normal' | 'hard' | 'boss' // pre-calculated
}
Output from AI: JSON with daily_missions[] and optional weekly_boss
| Completion Rate | Difficulty | Target Scale |
|---|---|---|
| <40% | easy | 50% of average |
| 40-70% | normal | 100% of average |
| 70-90% | hard | 150% of average |
| 90%+ | boss | 200% of average |
When AI is unavailable, use template-based generation with real user data:
| Range | Name | CSS Effects |
|---|---|---|
| 0-20 | Clean | Normal neon glow, full saturation |
| 21-40 | Mild | saturate(0.85), occasional 2px glitch flicker |
| 41-60 | Moderate | saturate(0.7), noise overlay 0.3 opacity, badges dim |
| 61-80 | Heavy | sepia(0.2), rust texture overlay, stutter animations |
| 81-100 | Critical | sepia(0.4) hue-rotate(-15deg), red scan lines, warning pulse |
Increases: +5 failed daily, +15 failed boss, +2/day inactive (after 3 days) Decreases: -10 completed daily, -25 completed boss, -5 streak milestone, -15 all-3-dailies bonus
Drive via CSS custom properties on <html> element, updated by corruption store watcher.
ALL date comparisons MUST use getLocalDateString() from gamification store — NEVER raw Date.getTime(). This was a critical bug in FEATURE-1118.
purchaseInProgress mutex pattern from gamification store for any multi-step DB operationstaskType: 'planning' for challenge generation (prefers cloud providers for better JSON output)will-change: transform and requestAnimationFramegetLocalDateString() for expiry comparisonsupabase/migrations/YYYYMMDDHHMMSS_challenges.sqlsrc/types/challenges.ts with Challenge, ChallengeObjective typessrc/services/ai/gamemaster.ts with ARIA personasrc/services/ai/challengeTemplates.ts for fallbacksrc/stores/challenges.ts with CRUD, progress, expirysrc/assets/corruption-tokens.cssCorruptionOverlay.vue component# Unit tests
npm run test -- --grep "challenges"
# Type check
npm run typecheck
# Dev server with Doppler (needed for AI providers)
doppler run -- npm run dev
# Playwright visual test for corruption
npm run test:e2e -- --grep "corruption"
docs/MASTER_PLAN.md - FEATURE-1132 trackingdocs/sop/SOP-050-store-auth-initialization.md - Store initialization patternsdocs/claude-md-extension/design-system.md - Design tokens for corruption CSS