Generating Vue.js Components with Kiro — Building an "Auntie Tigress" Tracker 🐯

I wanted to see how well Kiro understands Vue 3 idioms, so I built a fun app in a single session: an Auntie Tigress Tracker inspired by the classic Taiwanese folk tale 虎姑婆 — a tiger spirit from the mountains who sneaks into homes at night to snatch children who won't fall asleep. The app shows a watercolor map tracking a creature creeping toward your home in real-time. Too scary? Swap the tiger for a puppy 🐶 or a ghost 👻. It uses your browser's geolocation (or defaults to Taipei). 🔗 Live demo | Source code What I Prompted I gave Kiro one high-level prompt describing the app — Vue 3 Composition API, <script setup> , Leaflet map, composables for geolocation and creature tracking, an icon picker with defineProps / defineEmits — then refined individual pieces. Here's what stood out. Composables — ref vs reactive Kiro correctly chose ref() for the geolocation position (we replace the whole object on each update) and reactive() for the creature state (we mutate individual properties like lat