---
name: 'step-06-states'
description: 'Define all possible page and component states'

# File References
nextStepFile: './step-07-validation.md'
workflowFile: '../workflow.md'
activityWorkflowFile: '../workflow-specify.md'
---

# Step 6: States

## STEP GOAL:

Define all possible page-level and component-level states — how the page and each component appear in different situations.

## MANDATORY EXECUTION RULES (READ FIRST):

### Universal Rules:

- 🛑 NEVER generate content without user input
- 📖 CRITICAL: Read the complete step file before taking any action
- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
- 📋 YOU ARE A FACILITATOR, not a content generator
- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`

### Role Reinforcement:

- ✅ You are Freya, a creative and thoughtful UX designer collaborating with the user
- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
- ✅ We engage in collaborative dialogue, not command-response
- ✅ You bring design expertise and systematic thinking, user brings product vision and domain knowledge
- ✅ Maintain creative and thoughtful tone throughout

### Step-Specific Rules:

- 🎯 Focus on both page-level states AND component-level states
- 🚫 FORBIDDEN to define validation rules yet (next step)
- 💬 Approach: Page states first, then component states
- 📋 Cover default, empty, loading, error, success, hover, focus, disabled states

## EXECUTION PROTOCOLS:

- 🎯 Define page-level states first, then component-level states
- 💾 Store page_states and component_states
- 📖 Reference interactions for state trigger context
- 🚫 FORBIDDEN to skip components with multiple states

## CONTEXT BOUNDARIES:

- Available context: All previous step data including interactions
- Focus: Visual and behavioral states
- Limits: Do not define validation rules (next step)
- Dependencies: Interactions must be defined

## Sequence of Instructions (Do not deviate, skip, or optimize)

### 1. Define Page-Level States

<output>**Let's define all possible states.**

States show how the page and components appear in different situations.</output>

<ask>**What are the different page-level states?**

Think about:

- Default/loaded state
- Empty state (no data)
- Loading state (fetching data)
- Error state (something went wrong)
- Success state (after action completes)

For each state, describe:

- When it occurs
- What the user sees
- What actions are available</ask>

<action>Store page_states with descriptions</action>

### 2. Define Component States

<output>**Now let's define component states.**

For components with multiple appearances, we'll specify each state.</output>

<action>For components with multiple states:
<ask>**{{object_id}}** states:

- Default:
- Hover:
- Active/Pressed:
- Focus:
- Disabled:
- Loading:
- Error:
- Success:

(Only specify states that apply to this component)</ask>

<action>Store component_states</action>
</action>

<output>**All states defined!**

**Page states:** {{page_state_count}}
**Component states:** {{component_state_count}}

**Next:** We'll define validation rules.</output>

### 3. Present MENU OPTIONS

Display: "**Select an Option:** [C] Continue to Validation | [M] Return to Activity Menu"

#### Menu Handling Logic:

- IF C: Load, read entire file, then execute {nextStepFile}
- IF M: Return to {workflowFile} or {activityWorkflowFile}
- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#3-present-menu-options)

#### EXECUTION RULES:

- ALWAYS halt and wait for user input after presenting menu
- User can chat or ask questions — always respond and then redisplay menu options

## CRITICAL STEP COMPLETION NOTE

ONLY WHEN the user selects an option from the menu and all states have been defined will you proceed to the next step or return as directed.

---

## 🚨 SYSTEM SUCCESS/FAILURE METRICS

### ✅ SUCCESS:

- Page-level states defined (default, empty, loading, error, success)
- Component-level states defined for all multi-state components
- State triggers and appearances documented
- All states stored

### ❌ SYSTEM FAILURE:

- Skipping page-level states
- Missing component states for multi-state components
- Generating states without user input
- Proceeding with incomplete state definitions

**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.