Step 2: Hands-on Practice

Experience the complete Superpowers development workflow with a real example.

Scenario

Build a script to fetch weather information.

Step 1: Use brainstorm to Clarify Requirements

Type: /superpowers:brainstorm build a script to fetch weather info

> /superpowers:brainstorm build a script to fetch weather info

● Got it - switching to a new idea. You want to build a script to fetch weather information.

  What programming language would you prefer?

  1. Python - Clean syntax, excellent HTTP libraries like requests
  2. JavaScript/Node.js - Good for web integration, async-friendly
  3. Bash/Shell - Lightweight, uses curl directly
  4. Other - Let me know what you have in mind

  Which would you like to use?

> 2

● Good choice - JavaScript/Node.js it is.

  How do you want to use this weather script?

  1. CLI tool - Run from terminal, get weather output in console
  2. Backend service/API - Expose weather data via HTTP endpoint
  3. Part of a web app - Integrate into a frontend application
  4. Scheduled task - Run periodically to collect/store weather data

  Which fits your use case?

> 3

● Integrating into a web app. That shapes things differently.

  What weather data do you need to display?

  1. Basic current weather - Temperature, conditions (sunny/rainy), location
  2. Detailed current weather - Add humidity, wind, feels-like, UV index
  3. Multi-day forecast - Current weather plus upcoming days
  4. Hourly forecast - Hour-by-hour breakdown for today/tomorrow

  Which level of detail are you looking for?

> 2

● Detailed current weather with humidity, wind, feels-like, and UV index.

  How should the user's location be determined?

  1. Browser geolocation - Auto-detect via GPS/IP (requires user permission)
  2. Manual city search - User types in a city name
  3. Both - Auto-detect with option to search/change manually

  Which approach do you prefer?

> 1

● Browser geolocation to auto-detect.

  Which weather API would you like to use?

  1. OpenWeatherMap - Popular, free tier (1000 calls/day), requires API key
  2. WeatherAPI.com - Generous free tier, easy to use, requires API key
  3. Open-Meteo - Completely free, no API key needed, open-source
  4. No preference - I'll recommend one

  Which one?

> 3

● Open-Meteo - excellent choice. No API key hassle and completely free.

  What frontend framework are you using for the web app?

  1. React - Component-based, widely used
  2. Vue - Approachable, reactive
  3. Vanilla JavaScript - No framework, plain HTML/CSS/JS
  4. Other - Let me know what you're working with

  Which one?

> 2

● Vue it is. I think I have enough to propose some approaches.

  Two approaches to consider:

  Option A: Vue Composable (Recommended)
  Create a reusable useWeather() composable that handles geolocation, API calls, and reactive state. Clean
  separation, easy to test, follows Vue 3 best practices. Can be dropped into any component.

  Option B: Pinia Store
  Centralize weather state in a Pinia store. Better if multiple components need the same weather data, or if you
  want to cache results across route changes. More setup, but more powerful for complex apps.

  My recommendation: Option A (Composable) - it's simpler, self-contained, and sufficient unless you have multiple
  components that need to share weather state. You can always refactor to Pinia later if needed.

  Does the composable approach sound right, or do you have a more complex app where Pinia makes sense?

> A

● Let me present the design in sections. I'll check with you after each part.

  ---
  Section 1: Composable Structure

  The useWeather() composable will be a single file that exports a function returning reactive state and methods.

  File: src/composables/useWeather.js

  Reactive State:
  - weather - The weather data object (null initially)
  - loading - Boolean, true while fetching
  - error - Error message string (null if no error)
  - location - Object with latitude and longitude

  Methods:
  - fetchWeather() - Gets location via browser geolocation, then fetches weather from Open-Meteo
  - refresh() - Re-fetches weather data for current location

  Data returned from Open-Meteo:
  - Temperature (C)
  - Weather condition code (maps to sunny/cloudy/rainy etc.)
  - Humidity (%)
  - Wind speed (km/h)
  - Feels-like temperature (C)
  - UV index

  Usage in a component:
  const { weather, loading, error, fetchWeather } = useWeather()
  onMounted(() => fetchWeather())

  ---
  Does this structure look right so far? Any state or methods you'd want to add or change?

AI guides you through:

• What programming language?
• Input method? Command line or interactive?
• What info to display? Temperature, humidity, weather description?

After a few rounds of Q&A, requirements become clear.

Step 2: Let AI Write the Code

Once requirements are clear, AI generates the code:

● Done. Project created at /mnt/d/test/weather-app/.

  Files created:
  - src/composables/useWeather.js - Main composable
  - src/utils/weatherCodes.js - Weather code mapping
  - src/components/WeatherCard.vue - Display component
  - src/App.vue - Updated to use WeatherCard

  To run:
  cd weather-app
  npm run dev

  The app will request location permission when loaded, then display current weather with temperature, feels-like,
  humidity, wind speed, and UV index.

Result:

Summary

Next Step

Want to know what else Superpowers can do?

-> Step 3: All Skills Overview