Skip to main content Home Creators ajbcoding claude-skill-eval moai-streaming-ui
moai-streaming-ui Enhanced streaming UI system with progress indicators, status displays, and interactive feedback mechanisms. Use when running long-running operations, displaying progress, providing user feedback, or when visual indicators enhance user experience during complex workflows.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/AJBcoding/claude-skill-eval --skill moai-streaming-uiThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository
Enterprise-grade security expertise with production-ready patterns for OWASP Top 10 2021, zero-trust architecture, threat modeling (STRIDE, PASTA), secure SDLC, DevSecOps automation, cloud security, cryptography, identity & access management, and compliance frameworks (SOC 2, ISO 27001, GDPR, CCPA).
Related occupations SOC
Based on SOC occupation classification
name moai-streaming-ui version 1.0.0 created 2025-11-05T00:00:00.000Z updated 2025-11-05T00:00:00.000Z status stable description Enhanced streaming UI system with progress indicators, status displays, and interactive feedback mechanisms. Use when running long-running operations, displaying progress, providing user feedback, or when visual indicators enhance user experience during complex workflows. keywords ["streaming-ui","progress-indicators","user-feedback","interactive-display","status-updates","visual-feedback"] allowed-tools ["Bash","Read","Write"]
Enhanced Streaming UI System
Skill Metadata
Field Value Version 1.0.0 Tier Alfred (User Experience) Auto-load During long-running operations Purpose Enhanced visual feedback and progress indication
What It Does
Advanced streaming UI system that provides rich visual feedback, progress indicators, and interactive status displays during complex operations. Enhances user experience by making long-running processes transparent and engaging.
Core capabilities :
✅ Multi-style progress indicators (bars, spinners, percentages)
✅ Real-time status updates and progress tracking
✅ Interactive user feedback mechanisms
✅ Color-coded severity levels and alerts
✅ Step-by-step workflow visualization
✅ Performance metrics and timing information
✅ Error state handling and recovery guidance
✅ Completion summaries and next step suggestions
When to Use
✅ During long-running operations (>5 seconds)
✅ When executing multi-step workflows
✅ During file operations or API calls
✅ When user needs progress feedback
✅ During background processing tasks
✅ When running tests or builds
✅ During complex Alfred command executions
UI Components Library
1. Progress Indicators
Progress Bars
progress_bar(65 , 100 , "Installing dependencies" )
animated_progress(current_step, total_steps, steps)
Spinners
spinner("Processing files" , "dots" )
spinner("Downloading"
"arrow"
Percentage Display
percentage_with_context(45 , "Code compilation" )
2. Status Indicators
Success States success_indicator("Build completed successfully" )
success_with_details("Tests passed" , "127/128 tests passed" )
Warning States warning_indicator("Memory usage high" )
warning_with_action("Disk space low" , "Clear cache files" )
Error States error_indicator("Connection failed" )
error_with_recovery("API timeout" , "Retry with exponential backoff" )
3. Interactive Elements
User Prompts user_prompt("Continue with deployment?" , ["yes" , "no" , "cancel" ])
user_prompt_with_default("Choose environment" , ["dev" , "staging" , "prod" ], "staging" )
Confirmation Required confirmation_required("Delete 15 files?" )
confirmation_with_details("Merge branch" , "main → feature/auth" )
4. Workflow Visualization
Step Indicators workflow_steps([
("✅" , "Setup completed" ),
("🔄" , "Running tests..." ),
("⏸️" , "Build pending" ),
("⏸️" , "Deploy pending" )
])
Phase Indicators phase_indicator("Phase 2/4: Implementation" , 25 )
Integration Patterns
1. Alfred Command Integration
def run_spec_implementation (spec_id ):
Skill("moai-streaming-ui" )
for step in implementation_steps:
show_step_progress(step)
result = execute_step(step)
if result.success:
success_step(step)
else :
error_step(step, result.error)
2. Long-Running Operation Wrapper def with_progress_indicator (operation, description ):
"""Wrap any operation with progress UI"""
Skill("moai-streaming-ui" )
start_progress(description)
try :
result = operation()
complete_progress(description, success=True )
return result
except Exception as e:
complete_progress(description, success=False , error=str (e))
raise
3. Background Task Monitoring def monitor_background_task (task_id ):
"""Monitor and display background task progress"""
while not task_complete(task_id):
progress = get_task_progress(task_id)
Skill("moai-streaming-ui" )
show_progress(progress.percentage, progress.current_step)
sleep(1 )
Skill("moai-streaming-ui" )
show_completion(task_result)
Progress Tracking Systems
1. Multi-Step Workflows class WorkflowProgress :
def __init__ (self, steps ):
self .steps = steps
self .current = 0
def start (self ):
Skill("moai-streaming-ui" )
show_workflow_start(self .steps)
def next_step (self ):
self .current += 1
Skill("moai-streaming-ui" )
show_current_step(self .current, self .steps[self .current])
def complete (self ):
Skill("moai-streaming-ui" )
show_workflow_complete()
workflow = WorkflowProgress([
"Analyze requirements" ,
"Write tests" ,
"Implement code" ,
"Run validation" ,
"Generate documentation"
])
workflow.start()
2. File Operations Progress def track_file_operation (files, operation ):
"""Track progress for file operations"""
total = len (files)
for i, file_path in enumerate (files):
current_progress = (i + 1 ) / total * 100
Skill("moai-streaming-ui" )
show_file_progress(operation, file_path, current_progress, i + 1 , total)
perform_operation(file_path)
Skill("moai-streaming-ui" )
show_operation_complete(operation, total)
track_file_operation(source_files, "Copying files" )
3. API/Network Operations def track_api_requests (requests ):
"""Track progress for multiple API requests"""
completed = 0
total = len (requests)
for request in requests:
Skill("moai-streaming-ui" )
show_api_progress("Making API request" , completed + 1 , total)
try :
response = make_request(request)
completed += 1
Skill("moai-streaming-ui" )
show_api_success(completed, total)
except Exception as e:
Skill("moai-streaming-ui" )
show_api_error(str (e), completed + 1 , total)
Status Display Templates
1. Operation Start def show_operation_start (operation, details=None ):
"""Display operation start message"""
lines = [f"🚀 {operation} " ]
if details:
lines.append(f"📋 {details} " )
lines.append("⏱️ Started at " + datetime.now().strftime("%H:%M:%S" ))
Skill("moai-streaming-ui" )
display_message("\n" .join(lines))
2. Progress Update def show_progress_update (operation, progress, current_item=None ):
"""Display progress update"""
percentage = progress.percentage
bar = create_progress_bar(percentage)
lines = [
f"🔄 {operation} " ,
f"📊 {bar} {percentage:.1 f} %" ,
]
if current_item:
lines.append(f"📁 Current: {current_item} " )
if progress.eta:
lines.append(f"⏱️ ETA: {progress.eta} " )
Skill("moai-streaming-ui" )
display_message("\n" .join(lines))
3. Operation Completion def show_operation_complete (operation, result, duration=None ):
"""Display operation completion"""
if result.success:
lines = [
f"✅ {operation} completed successfully"
]
if result.summary:
lines.append(f"📊 {result.summary} " )
else :
lines = [
f"❌ {operation} failed"
]
if result.error:
lines.append(f"🔴 Error: {result.error} " )
if duration:
lines.append(f"⏱️ Duration: {duration} " )
lines.append(f"🏁 Finished at " + datetime.now().strftime("%H:%M:%S" ))
Skill("moai-streaming-ui" )
display_message("\n" .join(lines))
Error Handling and Recovery
1. Retry Mechanisms def show_retry_attempt (operation, attempt, max_attempts ):
"""Display retry attempt information"""
Skill("moai-streaming-ui" )
message = f"🔄 {operation} - Retry {attempt} /{max_attempts} "
if attempt > 1 :
message += f" (previous attempts failed)"
display_message(message)
2. Error Recovery Options def show_recovery_options (error, options ):
"""Display error recovery options to user"""
Skill("moai-streaming-ui" )
lines = [
f"❌ Error: {error} " ,
"🔧 Recovery options:"
]
for i, option in enumerate (options, 1 ):
lines.append(f" {i} . {option} " )
lines.append("❓ Choose recovery option [1-{}]" .format (len (options)))
display_message("\n" .join(lines))
3. Graceful Degradation def show_fallback_behavior (operation, fallback_reason ):
"""Display fallback behavior information"""
Skill("moai-streaming-ui" )
message = f"⚠️ {operation} - Using fallback: {fallback_reason} "
display_message(message)
Performance Considerations
1. Update Frequency
MIN_UPDATE_INTERVAL = 0.5
if time_since_last_update() < MIN_UPDATE_INTERVAL:
return
2. Memory Efficiency
progress_bar_template = "[{█}{ }{ }]"
status_cache = {}
MAX_DISPLAY_ITEMS = 50
if len (items) > MAX_DISPLAY_ITEMS:
items = items[:MAX_DISPLAY_ITEMS] + [f"... and {len (items) - MAX_DISPLAY_ITEMS} more" ]
3. Async Updates
async def update_progress_async (progress ):
"""Update UI without blocking operation"""
Skill("moai-streaming-ui" )
show_progress(progress)
await asyncio.sleep(0 )
Usage Examples
Example 1: Test Execution def run_tests_with_progress ():
"""Run tests with progress indication"""
Skill("moai-streaming-ui" )
show_operation_start("Running test suite" , "128 tests found" )
tests = get_all_tests()
passed = 0
failed = 0
for i, test in enumerate (tests):
progress = (i + 1 ) / len (tests) * 100
Skill("moai-streaming-ui" )
show_progress_update("Running tests" , progress, test.name)
result = run_single_test(test)
if result.passed:
passed += 1
else :
failed += 1
Skill("moai-streaming-ui" )
show_test_failure(test.name, result.error)
Skill("moai-streaming-ui" )
show_operation_complete("Test suite" , TestResult(passed, failed))
Example 2: File Processing def process_files_with_progress (files, operation ):
"""Process files with progress tracking"""
Skill("moai-streaming-ui" )
show_operation_start(operation, f"{len (files)} files to process" )
for i, file_path in enumerate (files):
progress = (i + 1 ) / len (files) * 100
Skill("moai-streaming-ui" )
show_file_progress(operation, file_path.name, progress, i + 1 , len (files))
try :
process_file(file_path)
Skill("moai-streaming-ui" )
show_file_success(file_path.name)
except Exception as e:
Skill("moai-streaming-ui" )
show_file_error(file_path.name, str (e))
Example 3: API Workflow def execute_api_workflow_with_progress ():
"""Execute multi-step API workflow with visual feedback"""
steps = [
("Authenticate" , authenticate_api),
("Upload data" , upload_data),
("Process results" , process_results),
("Download response" , download_response)
]
Skill("moai-streaming-ui" )
show_workflow_start([step[0 ] for step in steps])
for i, (step_name, step_func) in enumerate (steps):
Skill("moai-streaming-ui" )
show_current_step(i + 1 , len (steps), step_name)
try :
result = step_func()
Skill("moai-streaming-ui" )
show_step_success(step_name)
except Exception as e:
Skill("moai-streaming-ui" )
show_step_error(step_name, str (e))
raise
End of Skill | Rich visual feedback for enhanced user experience during complex operations
