> ## Documentation Index
> Fetch the complete documentation index at: https://ihub.learnille.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Interactive Prototyping & Flow Guidelines

> Migrated from the previous Learnille internal documentation hub

## Overview

This guide outlines standards for building interactive UI prototypes, user testing flows, and micro-interaction animations across Learnille frontend apps.

***

## ⚡ Interactive State Maps

### 1. Multi-Step Course Creation Wizard Prototype Flow

```
[ Step 1: Basic Info ] ---> [ Step 2: Media Upload ] ---> [ Step 3: Curriculum ] ---> [ Step 4: Pricing ] ---> [ Step 5: Submit ]
(Title, Category, Bio)      (Thumbnail, Trailer)          (Sections, Items)           (Tier, Discount)          (Validation Queue)
```

* **Validation Guards**: Step transition disabled until current step fields pass Zod schema validation.
* **Auto-Save Draft**: Changes sync to local storage and server draft endpoint on input blur.
* **Staggered Animations**: Step changes transition smoothly with horizontal slide keyframes (`translateX(20px)` -> `translateX(0px)`).

***

## 🧪 UI Prototyping Best Practices

1. **Realistic Mock Data**: Avoid "Lorem Ipsum". Use realistic course titles, instructor names, and pricing values.
2. **Interactive Loading States**: Test skeletons (`<SkeletonCard />`) and spinners during async data fetches.
3. **Empty States**: Provide clear, action-oriented empty states (e.g., "No consultation bookings yet. Share your profile link to get started!").


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.