ai-devx 1.0.0 → 1.0.1

package/templates/.agent/skills/webapp-testing/scripts/playwright_runner.py

@@ -0,0 +1,173 @@
+#!/usr/bin/env python3
+"""
+Skill: webapp-testing
+Script: playwright_runner.py
+Purpose: Run basic Playwright browser tests
+Usage: python playwright_runner.py <url> [--screenshot]
+Output: JSON with page info, health status, and optional screenshot path
+Note: Requires playwright (pip install playwright && playwright install chromium)
+Screenshots: Saved to system temp directory (auto-cleaned by OS)
+"""
+import sys
+import json
+import os
+import tempfile
+from datetime import datetime
+
+# Fix Windows console encoding for Unicode output
+try:
+    sys.stdout.reconfigure(encoding='utf-8', errors='replace')
+    sys.stderr.reconfigure(encoding='utf-8', errors='replace')
+except AttributeError:
+    pass  # Python < 3.7
+
+try:
+    from playwright.sync_api import sync_playwright
+    PLAYWRIGHT_AVAILABLE = True
+except ImportError:
+    PLAYWRIGHT_AVAILABLE = False
+
+
+def run_basic_test(url: str, take_screenshot: bool = False) -> dict:
+    """Run basic browser test on URL."""
+    if not PLAYWRIGHT_AVAILABLE:
+        return {
+            "error": "Playwright not installed",
+            "fix": "pip install playwright && playwright install chromium"
+        }
+    
+    result = {
+        "url": url,
+        "timestamp": datetime.now().isoformat(),
+        "status": "pending"
+    }
+    
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            context = browser.new_context(
+                viewport={"width": 1280, "height": 720},
+                user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36"
+            )
+            page = context.new_page()
+            
+            # Navigate
+            response = page.goto(url, wait_until="networkidle", timeout=30000)
+            
+            # Basic info
+            result["page"] = {
+                "title": page.title(),
+                "url": page.url,
+                "status_code": response.status if response else None
+            }
+            
+            # Health checks
+            result["health"] = {
+                "loaded": response.ok if response else False,
+                "has_title": bool(page.title()),
+                "has_h1": page.locator("h1").count() > 0,
+                "has_links": page.locator("a").count() > 0,
+                "has_images": page.locator("img").count() > 0
+            }
+            
+            # Console errors
+            console_errors = []
+            page.on("console", lambda msg: console_errors.append(msg.text) if msg.type == "error" else None)
+            
+            # Performance metrics
+            result["performance"] = {
+                "dom_content_loaded": page.evaluate("window.performance.timing.domContentLoadedEventEnd - window.performance.timing.navigationStart"),
+                "load_complete": page.evaluate("window.performance.timing.loadEventEnd - window.performance.timing.navigationStart")
+            }
+            
+            # Screenshot - uses system temp directory (cross-platform, auto-cleaned)
+            if take_screenshot:
+                # Cross-platform: Windows=%TEMP%, Linux/macOS=/tmp
+                screenshot_dir = os.path.join(tempfile.gettempdir(), "maestro_screenshots")
+                os.makedirs(screenshot_dir, exist_ok=True)
+                screenshot_path = os.path.join(screenshot_dir, f"screenshot_{datetime.now().strftime('%Y%m%d_%H%M%S')}.png")
+                page.screenshot(path=screenshot_path, full_page=True)
+                result["screenshot"] = screenshot_path
+                result["screenshot_note"] = "Saved to temp directory (auto-cleaned by OS)"
+            
+            # Element counts
+            result["elements"] = {
+                "links": page.locator("a").count(),
+                "buttons": page.locator("button").count(),
+                "inputs": page.locator("input").count(),
+                "images": page.locator("img").count(),
+                "forms": page.locator("form").count()
+            }
+            
+            browser.close()
+            
+            result["status"] = "success" if result["health"]["loaded"] else "failed"
+            result["summary"] = "[OK] Page loaded successfully" if result["status"] == "success" else "[X] Page failed to load"
+            
+    except Exception as e:
+        result["status"] = "error"
+        result["error"] = str(e)
+        result["summary"] = f"[X] Error: {str(e)[:100]}"
+    
+    return result
+
+
+def run_accessibility_check(url: str) -> dict:
+    """Run basic accessibility check."""
+    if not PLAYWRIGHT_AVAILABLE:
+        return {"error": "Playwright not installed"}
+    
+    result = {"url": url, "accessibility": {}}
+    
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True)
+            page = browser.new_page()
+            page.goto(url, wait_until="networkidle", timeout=30000)
+            
+            # Basic a11y checks
+            result["accessibility"] = {
+                "images_with_alt": page.locator("img[alt]").count(),
+                "images_without_alt": page.locator("img:not([alt])").count(),
+                "buttons_with_label": page.locator("button[aria-label], button:has-text('')").count(),
+                "links_with_text": page.locator("a:has-text('')").count(),
+                "form_labels": page.locator("label").count(),
+                "headings": {
+                    "h1": page.locator("h1").count(),
+                    "h2": page.locator("h2").count(),
+                    "h3": page.locator("h3").count()
+                }
+            }
+            
+            browser.close()
+            result["status"] = "success"
+            
+    except Exception as e:
+        result["status"] = "error"
+        result["error"] = str(e)
+    
+    return result
+
+
+if __name__ == "__main__":
+    if len(sys.argv) < 2:
+        print(json.dumps({
+            "error": "Usage: python playwright_runner.py <url> [--screenshot] [--a11y]",
+            "examples": [
+                "python playwright_runner.py https://example.com",
+                "python playwright_runner.py https://example.com --screenshot",
+                "python playwright_runner.py https://example.com --a11y"
+            ]
+        }, indent=2))
+        sys.exit(1)
+    
+    url = sys.argv[1]
+    take_screenshot = "--screenshot" in sys.argv
+    check_a11y = "--a11y" in sys.argv
+    
+    if check_a11y:
+        result = run_accessibility_check(url)
+    else:
+        result = run_basic_test(url, take_screenshot)
+    
+    print(json.dumps(result, indent=2))

package/templates/.agent/workflows/brainstorm.md

@@ -0,0 +1,113 @@
+---
+description: Structured brainstorming for projects and features. Explores multiple options before implementation.
+---
+
+# /brainstorm - Structured Idea Exploration
+
+$ARGUMENTS
+
+---
+
+## Purpose
+
+This command activates BRAINSTORM mode for structured idea exploration. Use when you need to explore options before committing to an implementation.
+
+---
+
+## Behavior
+
+When `/brainstorm` is triggered:
+
+1. **Understand the goal**
+   - What problem are we solving?
+   - Who is the user?
+   - What constraints exist?
+
+2. **Generate options**
+   - Provide at least 3 different approaches
+   - Each with pros and cons
+   - Consider unconventional solutions
+
+3. **Compare and recommend**
+   - Summarize tradeoffs
+   - Give a recommendation with reasoning
+
+---
+
+## Output Format
+
+```markdown
+## 🧠 Brainstorm: [Topic]
+
+### Context
+[Brief problem statement]
+
+---
+
+### Option A: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+- [benefit 2]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option B: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+- [drawback 2]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+### Option C: [Name]
+[Description]
+
+✅ **Pros:**
+- [benefit 1]
+
+❌ **Cons:**
+- [drawback 1]
+
+📊 **Effort:** Low | Medium | High
+
+---
+
+## 💡 Recommendation
+
+**Option [X]** because [reasoning].
+
+What direction would you like to explore?
+```
+
+---
+
+## Examples
+
+```
+/brainstorm authentication system
+/brainstorm state management for complex form
+/brainstorm database schema for social app
+/brainstorm caching strategy
+```
+
+---
+
+## Key Principles
+
+- **No code** - this is about ideas, not implementation
+- **Visual when helpful** - use diagrams for architecture
+- **Honest tradeoffs** - don't hide complexity
+- **Defer to user** - present options, let them decide

package/templates/.agent/workflows/create.md

@@ -1,131 +1,59 @@
 ---
-command: /create
-description: Create new features, components, or applications
-agent: orchestrator
-skills:
-  - react-best-practices
-  - api-patterns
-  - database-design
-  - frontend-design
-mode: build
+description: Create new application command. Triggers App Builder skill and starts interactive dialogue with user.
 ---
 
-# /create Workflow
-
-## Purpose
-Build new features, components, or applications from scratch with best practices.
-
-## Trigger
-User types: `/create <description>`
-
-## Execution Steps
-
-### Step 1: Requirement Analysis
-- Parse user request
-- Determine scope (component, feature, app)
-- Identify tech stack from context
-- Check existing patterns in codebase
-
-### Step 2: Architecture Decision
-Based on request, determine:
-- **Frontend**: Component, page, or full UI
-- **Backend**: API endpoint, service, or microservice
-- **Database**: Schema changes, migrations
-- **Full-stack**: All of the above
-
-### Step 3: Multi-Agent Coordination (if needed)
-For full-stack features:
-1. **Database Architect** → Schema first
-2. **Backend Specialist** → API layer
-3. **Frontend Specialist** → UI components
-4. **Test Engineer** → Tests
-
-### Step 4: Implementation
-
-**For Components:**
-```typescript
-// Follow existing patterns
-// Use TypeScript
-// Include Prop types
-// Add basic tests
-// Export from index
-```
-
-**For APIs:**
-```typescript
-// REST or GraphQL
-// Input validation
-// Error handling
-// Authentication check
-// Rate limiting
-```
+# /create - Create Application
 
-**For Features:**
-```
-1. Database migration
-2. Backend endpoints
-3. Frontend integration
-4. Tests (unit, integration, E2E)
-5. Documentation
-```
+$ARGUMENTS
 
-### Step 5: Validation
-Run validation checks:
-- [ ] Code follows project conventions
-- [ ] TypeScript compiles
-- [ ] Linting passes
-- [ ] Tests pass
-- [ ] Security review (if auth/data involved)
+---
 
-### Step 6: Documentation
-- Add JSDoc comments
-- Update README if needed
-- Include usage examples
+## Task
 
-## Response Format
+This command starts a new application creation process.
 
-```
-⚡ Executing /create
+### Steps:
 
-🤖 Applying @frontend-specialist...
+1. **Request Analysis**
+   - Understand what the user wants
+   - If information is missing, use `conversation-manager` skill to ask
 
-[Code implementation]
+2. **Project Planning**
+   - Use `project-planner` agent for task breakdown
+   - Determine tech stack
+   - Plan file structure
+   - Create plan file and proceed to building
 
-✅ Created: [File path]
-✅ Type-safe: [Yes/No]
-✅ Tested: [Yes/No]
+3. **Application Building (After Approval)**
+   - Orchestrate with `app-builder` skill
+   - Coordinate expert agents:
+     - `database-architect` → Schema
+     - `backend-specialist` → API
+     - `frontend-specialist` → UI
 
-### Usage
-[How to use the created feature]
+4. **Preview**
+   - Start with `auto_preview.py` when complete
+   - Present URL to user
 
-### Next Steps
-- [ ] Review implementation
-- [ ] Run tests: npm test
-- [ ] Manual testing
-```
+---
 
-## Examples
+## Usage Examples
 
-### Create Component
-**User**: `/create Button component with loading state`
+```
+/create blog site
+/create e-commerce app with product listing and cart
+/create todo app
+/create Instagram clone
+/create crm system with customer management
+```
 
-### Create API
-**User**: `/create GET /api/users endpoint with pagination`
+---
 
-### Create Feature
-**User**: `/create user profile page with avatar upload`
+## Before Starting
 
-## Best Practices Applied
-- TypeScript strict mode
-- Component composition
-- Error boundaries
-- Loading states
-- Form validation
-- Accessibility
+If request is unclear, ask these questions:
+- What type of application?
+- What are the basic features?
+- Who will use it?
 
-## Success Criteria
-- Feature is complete and functional
-- Follows project conventions
-- Includes error handling
-- Has test coverage
-- Documentation provided
+Use defaults, add details later.

package/templates/.agent/workflows/debug.md

@@ -1,138 +1,103 @@
 ---
-command: /debug
-description: Systematic debugging and root cause analysis
-agent: debugger
-skills:
-  - systematic-debugging
-  - error-analysis
-  - performance-profiling
-mode: analytical
+description: Debugging command. Activates DEBUG mode for systematic problem investigation.
 ---
 
-# /debug Workflow
+# /debug - Systematic Problem Investigation
+
+$ARGUMENTS
+
+---
 
 ## Purpose
-Systematically analyze and fix bugs, errors, and unexpected behavior.
-
-## Trigger
-User types: `/debug <problem description>`
-
-## Execution Steps
-
-### Step 1: Information Gathering
-Collect details:
-- Error messages and stack traces
-- When did it start occurring?
-- Recent code changes
-- Steps to reproduce
-- Environment (browser, OS, versions)
-- Frequency (always, sometimes, random)
-
-### Step 2: Problem Classification
-Determine type:
-- **Runtime Error**: Exception, crash
-- **Logic Error**: Wrong output, unexpected behavior
-- **Performance Issue**: Slow, memory leak
-- **UI Issue**: Visual problems, layout
-- **Integration Issue**: API failure, auth problem
-
-### Step 3: Hypothesis Formation
-List possible causes:
-1. Recent code changes
-2. Dependency updates
-3. Environment changes
-4. Data issues
-5. Race conditions
-6. Configuration problems
-
-### Step 4: Investigation
-**For Frontend Errors:**
-- Check browser console
-- Inspect network requests
-- Review React/Vue devtools
-- Check state management
-
-**For Backend Errors:**
-- Review logs
-- Check error stack traces
-- Verify database connections
-- Test API endpoints
-
-**For Performance Issues:**
-- Profile execution
-- Check memory usage
-- Analyze network calls
-- Review bundle size
-
-### Step 5: Root Cause Identification
-- Narrow down to specific cause
-- Create minimal reproduction
-- Verify hypothesis
-
-### Step 6: Solution Implementation
-- Fix root cause (not symptoms)
-- Add regression tests
-- Update documentation if needed
-
-### Step 7: Verification
-- Confirm fix works
-- Check for side effects
-- Run test suite
-- Deploy to staging
-
-## Response Format
 
-```
-⚡ Executing /debug
+This command activates DEBUG mode for systematic investigation of issues, errors, or unexpected behavior.
+
+---
+
+## Behavior
 
-🤖 Applying @debugger for systematic analysis...
+When `/debug` is triggered:
+
+1. **Gather information**
+   - Error message
+   - Reproduction steps
+   - Expected vs actual behavior
+   - Recent changes
+
+2. **Form hypotheses**
+   - List possible causes
+   - Order by likelihood
+
+3. **Investigate systematically**
+   - Test each hypothesis
+   - Check logs, data flow
+   - Use elimination method
+
+4. **Fix and prevent**
+   - Apply fix
+   - Explain root cause
+   - Add prevention measures
+
+---
 
-## Issue Summary
-[Brief description of the problem]
+## Output Format
 
-## Investigation
-### Step 1: Information Gathering
-[Details collected]
+```markdown
+## 🔍 Debug: [Issue]
 
-### Step 2: Root Cause Analysis
-[Analysis process]
+### 1. Symptom
+[What's happening]
 
-**Root Cause**: [What's causing the issue]
+### 2. Information Gathered
+- Error: `[error message]`
+- File: `[filepath]`
+- Line: [line number]
 
-## Solution
+### 3. Hypotheses
+1. ❓ [Most likely cause]
+2. ❓ [Second possibility]
+3. ❓ [Less likely cause]
 
-### Fix
-```code
-[The fix with explanation]
+### 4. Investigation
+
+**Testing hypothesis 1:**
+[What I checked] → [Result]
+
+**Testing hypothesis 2:**
+[What I checked] → [Result]
+
+### 5. Root Cause
+🎯 **[Explanation of why this happened]**
+
+### 6. Fix
+```[language]
+// Before
+[broken code]
+
+// After
+[fixed code]
 ```
 
-### Regression Test
-```typescript
-[Test to prevent recurrence]
+### 7. Prevention
+🛡️ [How to prevent this in the future]
 ```
 
-## Verification Steps
-1. [Step 1 to verify fix]
-2. [Step 2 to verify fix]
-3. [Step 3 to verify fix]
+---
+
+## Examples
 
-## Prevention
-[How to avoid this in the future]
+```
+/debug login not working
+/debug API returns 500
+/debug form doesn't submit
+/debug data not saving
 ```
 
-## Examples
+---
+
+## Key Principles
 
-**User**: `/debug Login button not working`
-**User**: `/debug API returns 500 error`
-**User**: `/debug Page loads slowly`
-**User**: `/debug Memory leak in dashboard`
-
-## Debugging Checklist
-- [ ] Collected all error information
-- [ ] Identified recent changes
-- [ ] Reproduced the issue
-- [ ] Found root cause
-- [ ] Implemented fix
-- [ ] Added regression test
-- [ ] Verified solution
-- [ ] Documented fix
+- **Ask before assuming** - get full error context
+- **Test hypotheses** - don't guess randomly
+- **Explain why** - not just what to fix
+- **Prevent recurrence** - add tests, validation