🎯 Task: Add a Weather Widget Skill in 10 Minutes

Teach AIRI to display a weather widget when asked about weather, using the marker system for clean LLM-to-code communication.

Task Description

Create a new skill that:

1. Responds to weather queries by showing a widget instead of just text.
2. Uses the existing marker parser (<|WEATHER_WIDGET|>{"city":"Tokyo"}).
3. Integrates with AIRI’s emotion system and desktop UI.
4. Works across all platforms (desktop, Discord, Telegram).

📜 Complete LLM Prompt (Copy-Paste Ready)

"You are SkillBuilderGPT. Help me add a Weather Widget skill to the AIRI project using the marker system.
 
CONTEXT:
- AIRI uses <|MARKER|> tags in LLM responses to trigger code actions
- Existing markers: <|EMOTE_HAPPY|>, <|EMOTE_SAD|>, etc. in packages/stage-ui/src/constants/emotions.ts
- Parser: packages/stage-ui/src/composables/llmmarkerParser.ts handles streaming marker detection
- Desktop UI: apps/stage-tamagotchi/src/pages/index.vue can display overlays
 
NEW SKILL REQUIREMENTS:
1. MARKER: <|WEATHER_WIDGET|>{"city":"Tokyo","units":"metric"}
2. HANDLER: Show floating weather card on desktop, embed in Discord/Telegram
3. LLM PROMPT: Add weather capability to Character Card system prompts
 
TASKS (provide exact diffs):
1. Add WEATHER_WIDGET to emotions.ts constants
2. Create WeatherWidget.vue component (temp, humidity, icon)
3. Add marker handler in index.vue that shows/hides widget
4. Update Character Card to include weather capability description
5. Test with "What's the weather in Tokyo?"
 
TECHNICAL REQUIREMENTS:
- Use OpenWeatherMap API (or mock data for demo)
- Widget should auto-hide after 10 seconds
- Handle parsing errors gracefully
- Maintain existing emotion system functionality
 
OUTPUT: Unified diff patches only, no explanations."

🔧 Prerequisites & Setup

• API Key: OpenWeatherMap (free tier) or use mock weather data
• Vue Components: Basic understanding of Vue 3 composition API
• Marker System: Familiarity with <|TAG|> format

Pro Tip: Start with mock data, add real API later—focus on the marker flow first.

✅ Detailed Task Checklist

Phase 1: Marker Definition

• Add to packages/stage-ui/src/constants/emotions.ts
• Extend Emotion enum if needed, or create separate Skills enum
• Verify marker pattern matches <|...|> format for parser

Phase 2: Widget Component

• Create apps/stage-tamagotchi/src/components/Widgets/WeatherWidget.vue
• Add CSS for floating position (top-right corner)
• Include weather icon support
• Add auto-hide timer (10s)

Phase 3: Marker Handler

• In apps/stage-tamagotchi/src/pages/index.vue, add weather widget import
• Create handleWeatherWidget(payload) function
• Connect to marker parser’s onSpecial callback
• Test marker detection with console logs

Phase 4: LLM Integration

• Update Character Card system prompt
• Test with “What’s the weather in Tokyo?” query
• Verify marker appears in LLM response stream

Phase 5: Cross-Platform Support

• Add weather widget handling to Discord bot (embed format)
• Add weather widget handling to Telegram bot (formatted message)
• Test marker works in all three environments

Phase 6: Error Handling & Polish

• Handle malformed JSON in marker payload
• Add loading state while fetching weather
• Graceful fallback if API fails
• Add unit tests for marker parsing

🧑‍🔬 Troubleshooting Guide

🔗 Key Files Deep Dive

🎯 Success Criteria

✅ Ask “What’s weather in Tokyo?” → AIRI shows floating widget with temp/description
✅ Widget auto-hides after 10 seconds
✅ Marker parsing works in console logs
✅ Cross-platform support in Discord/Telegram (different formats)
✅ Error handling for malformed JSON or API failures
✅ LLM uses marker instead of just describing weather textually

🚀 Extension Ideas

Once basic weather works, try these advanced skills:

• Desktop countdown timer
• Music control
• Take and analyze screen capture
• Add calendar events