diff --git a/docs/source-materials/specs/AIShell.txt b/docs/source-materials/specs/AIShell.txt index 1432c73..1a4a56a 100644 --- a/docs/source-materials/specs/AIShell.txt +++ b/docs/source-materials/specs/AIShell.txt @@ -1,265 +1,265 @@ -@openai-gpt> - Script Generation - - To create a PowerShell script that reads an Excel file, filters rows based on a condition, and sends emails, follow these steps: - - 1. Install Required Module: Ensure you have the ImportExcel module installed to handle Excel files. - - 2. Read Excel File: Use Import-Excel to read the data from the - Excel file. - - 3. Filter Data: Use Where-Object to filter rows where the "Status" column equals "Overdue". - - 4. Send Emails: Use Send-MailMessage to email each assignee with the row details. - - Here's a sample script: - - # Ensure ImportExcel module is installed - if (-not (Get-Module -ListAvailable -Name ImportExcel)) { - Install-Module -Name ImportExcel -Scope CurrentUser -Forc - } - - # Path to the Excel file - $excelPath = "C:\Data\tasks.xlsx" - - # Import the Excel data - $data = Import-Excel -Path $excelPath - - # Filter rows where Status is "Overdue" - $overdueTasks = $data | Where-Object { $_.Status -eq "Overdue" } - - # Email configuration - $smtpServer = "smtp.example.com" - $from = "noreply@example.com - - # Send email to each assigne - foreach ($task in $overdueTasks) { - $to = $task.AssigneeEmai - $subject = "Overdue Task Notification" - $body = "Task: $($task.TaskName)`nDue Date: $($task.DueDate)`nStatus: $($task.Status)" - - Send-MailMessage -SmtpServer $smtpServer -From $from -To $to -Subject $subject -Body $body - } - - Note: Replace smtp.example.com and noreply@example.com with your actual SMTP server and sender email address. Ensure that the Excel file has columns named AssigneeEmail , TaskName , DueDate , and Status . - -@openai-gpt> AI> Write me a PowerShell script that reads C:\Data\tasks.xlsx, filters rows where “Status” equals “Overdue,” and emails each assignee with the row details. - - Here's a PowerShell script to achieve that: - - # Ensure ImportExcel module is installed - if (-not (Get-Module -ListAvailable -Name ImportExcel)) { - Install-Module -Name ImportExcel -Scope CurrentUser -Forc - } - - # Path to the Excel file - $excelPath = "C:\Data\tasks.xlsx" - - # Import the Excel data - $data = Import-Excel -Path $excelPath - - # Filter rows where Status is "Overdue" - $overdueTasks = $data | Where-Object { $_.Status -eq "Overdue" } - - # Email configuration - $smtpServer = "smtp.example.com" - $from = "noreply@example.com - - # Send email to each assigne - foreach ($task in $overdueTasks) { - $to = $task.AssigneeEmai - $subject = "Overdue Task Notification" - $body = "Task: $($task.TaskName)`nDue Date: $($task.DueDate)`nStatus: $($task.Status)" - - Send-MailMessage -SmtpServer $smtpServer -From $from -To $to -Subject $subject -Body $body - } - - Instructions: - - • Replace smtp.example.com and noreply@example.com with your - SMTP server and sender email. - - • Ensure the Excel file has columns named AssigneeEmail , TaskName , DueDate , and Status . - -@openai-gpt> - Flow Outline - - Here's a draft outline for a Power Automate flow that watches a SharePoint list, sends a Teams message for new items, and logs outcomes in an Excel file: - - 1. Trigger: - • Use the "When an item is created" trigger for the SharePoint - list. - - 2. Action - Send Teams Message: - • Use the "Post a message" action in Microsoft Teams. - - • Configure the message to include details from the new SharePoint list item. - - 3. Action - Log Outcome in Excel: - • Use the "Add a row" action in Excel Online (Business). - - • Specify the Excel file and worksheet where you want to log the outcomes. - - • Map the necessary fields from the SharePoint item and Teams message response to the Excel columns. - - 4. Error Handling: - • Implement a "Scope" or "Condition" to handle any errors during the process and log them in the Excel file. - - 5. End of Flow: - • Ensure the flow ends gracefully, with all actions completed or errors logged. - - Note: Ensure you have the necessary permissions to access the SharePoint list, Teams, and Excel file. - -@openai-gpt> AI> Draft the steps for a Power Automate flow that watches a SharePoint list, sends a Teams message for new items, and logs outcomes in an Excel file. - - Here's a step-by-step outline for creating a Power Automate flow - to achieve your requirements: - - 1. Trigger: - • Use the "When an item is created" trigger for the SharePoint - list to start the flow whenever a new item is added. - - 2. Action - Send Teams Message: - • Add the "Post a message" action in Microsoft Teams. - - • Configure the message to include relevant details from the new SharePoint list item, such as title, description, or any other pertinent fields. - - 3. Action - Log Outcome in Excel: - • Use the "Add a row" action in Excel Online (Business). - - • Select the Excel file and worksheet where you want to log the outcomes. - - • Map fields from the SharePoint item and any response from the Teams message to the corresponding columns in the Excel file. - - 4. Error Handling: - • Implement a "Scope" or "Condition" to manage errors. If an error occurs, log the error details in the Excel file to ensure you - have a record of any issues. - - 5. End of Flow: - • Ensure the flow concludes with all actions completed successfully or errors logged, providing - a clear end to the process. - - Note: Make sure you have the necessary permissions to access and - modify the SharePoint list, Teams, and Excel file. - -@openai-gpt> - Error Troubleshooting - - The "Get-ChildItem : Access denied" error typically occurs due to insufficient permissions to access the directory or files you're - trying to list. Here are some steps to troubleshoot and resolve the issue: - - 1. Check Permissions: - • Ensure that your user account has the necessary permissions to access the directory. You may need read permissions to list the - contents. - - 2. Run as Administrator: - • Try running PowerShell as an administrator. Right-click the PowerShell icon and select "Run as administrator" to see if elevated permissions resolve the issue. - - 3. Check Path: - • Verify that the path you are trying to access is correct and - that it exists. - - 4. Antivirus/Firewall: - • Sometimes, antivirus or firewall settings can block access. Check if these are interfering and adjust settings if necessary. - - 5. Ownership: - • If you don't have permission, you might need to take ownership of the folder. This can be done through the folder's properties - in Windows Explorer. - - 6. Use Credential Parameter: - • If accessing a network location, use the -Credential parameter with Get-ChildItem to specify a user account with the necessary permissions. - - If these steps do not resolve the issue, consider checking the event logs for more detailed error - messages. - -@openai-gpt> AI> Here’s an error I just saw: Get-ChildItem : Access denied. What could cause it and how do I fix it? - - The "Get-ChildItem : Access denied" error is typically caused by - insufficient permissions to access the directory or files. Here are some steps to resolve it: - - 1. Verify Permissions: - • Ensure your user account has the necessary permissions to access the directory. You may need read permissions. - - 2. Run PowerShell as Administrator: - • Open PowerShell with elevated privileges by right-clicking the PowerShell icon and selecting "Run as administrator". - - 3. Check the Path: - • Confirm that the path you are trying to access is correct and exists. - - 4. Antivirus/Firewall Settings: - • Check if antivirus or firewall settings are blocking access and adjust them if necessary. - - 5. Ownership: - • You might need to take ownership of the folder. This can be done through the folder's properties in Windows Explorer. - - 6. Network Locations: - • If accessing a network location, use the -Credential parameter with Get-ChildItem to specify a user account with the necessary permissions. - - If these steps do not resolve the issue, check the event logs for more detailed error messages. - -@openai-gpt> - Prompt a Custom Agent - - If you have a custom agent, such as a "flow-builder," you can invoke it by addressing it directly - with your query. For example: - - flow-builder> Suggest best practices for Excel-driven email triage. - - This approach allows the custom - agent to provide specialized guidance based on its designed capabilities. If you need help setting - up or customizing an agent, let me know! - -@openai-gpt> If you created a specialist agent (e.g. flow-builder), invoke it with - - To invoke a specialist agent like "flow-builder," you would typically address it directly with your query. Here's how you might do - it: - - flow-builder> Suggest best practices for Excel-driven email triage. - - This format allows the agent to - understand that the query is directed specifically to it, enabling it to provide tailored advice or solutions based on its specialized knowledge. If you need further assistance with setting up or using a custom agent, feel free to - ask! - -@openai-gpt> /agent flow-builder -Required command was not provided. -Unrecognized command or argument 'flow-builder'. - -Description: - Command for agent management. - -Usage: - agent [command] [options] - -Options: - -h, --help Show help and - usage information - -Commands: - config Open up the - for an agent. - When no agent - is specified, - target the - active agent. - [] - list List all - available - agents. - use Specify an - or choose one - from the - available - agents. [] - -@openai-gpt> -@openai-gpt> -@openai-gpt> - Then ask it: “Suggest best practices for Excel-driven email triage.” - - To ask a specialist agent like "flow-builder" for best practices - on Excel-driven email triage, you would format your query like this: - - flow-builder> Suggest best practices for Excel-driven email triage. - - This approach directs the question to the agent, allowing it to provide insights or recommendations based on its expertise in flow - automation and email management. - If you have any more questions or need further assistance, feel free to ask! - +@openai-gpt> - Script Generation + + To create a PowerShell script that reads an Excel file, filters rows based on a condition, and sends emails, follow these steps: + + 1. Install Required Module: Ensure you have the ImportExcel module installed to handle Excel files. + + 2. Read Excel File: Use Import-Excel to read the data from the + Excel file. + + 3. Filter Data: Use Where-Object to filter rows where the "Status" column equals "Overdue". + + 4. Send Emails: Use Send-MailMessage to email each assignee with the row details. + + Here's a sample script: + + # Ensure ImportExcel module is installed + if (-not (Get-Module -ListAvailable -Name ImportExcel)) { + Install-Module -Name ImportExcel -Scope CurrentUser -Forc + } + + # Path to the Excel file + $excelPath = "C:\Data\tasks.xlsx" + + # Import the Excel data + $data = Import-Excel -Path $excelPath + + # Filter rows where Status is "Overdue" + $overdueTasks = $data | Where-Object { $_.Status -eq "Overdue" } + + # Email configuration + $smtpServer = "smtp.example.com" + $from = "noreply@example.com + + # Send email to each assigne + foreach ($task in $overdueTasks) { + $to = $task.AssigneeEmai + $subject = "Overdue Task Notification" + $body = "Task: $($task.TaskName)`nDue Date: $($task.DueDate)`nStatus: $($task.Status)" + + Send-MailMessage -SmtpServer $smtpServer -From $from -To $to -Subject $subject -Body $body + } + + Note: Replace smtp.example.com and noreply@example.com with your actual SMTP server and sender email address. Ensure that the Excel file has columns named AssigneeEmail , TaskName , DueDate , and Status . + +@openai-gpt> AI> Write me a PowerShell script that reads C:\Data\tasks.xlsx, filters rows where “Status” equals “Overdue,” and emails each assignee with the row details. + + Here's a PowerShell script to achieve that: + + # Ensure ImportExcel module is installed + if (-not (Get-Module -ListAvailable -Name ImportExcel)) { + Install-Module -Name ImportExcel -Scope CurrentUser -Forc + } + + # Path to the Excel file + $excelPath = "C:\Data\tasks.xlsx" + + # Import the Excel data + $data = Import-Excel -Path $excelPath + + # Filter rows where Status is "Overdue" + $overdueTasks = $data | Where-Object { $_.Status -eq "Overdue" } + + # Email configuration + $smtpServer = "smtp.example.com" + $from = "noreply@example.com + + # Send email to each assigne + foreach ($task in $overdueTasks) { + $to = $task.AssigneeEmai + $subject = "Overdue Task Notification" + $body = "Task: $($task.TaskName)`nDue Date: $($task.DueDate)`nStatus: $($task.Status)" + + Send-MailMessage -SmtpServer $smtpServer -From $from -To $to -Subject $subject -Body $body + } + + Instructions: + + • Replace smtp.example.com and noreply@example.com with your + SMTP server and sender email. + + • Ensure the Excel file has columns named AssigneeEmail , TaskName , DueDate , and Status . + +@openai-gpt> - Flow Outline + + Here's a draft outline for a Power Automate flow that watches a SharePoint list, sends a Teams message for new items, and logs outcomes in an Excel file: + + 1. Trigger: + • Use the "When an item is created" trigger for the SharePoint + list. + + 2. Action - Send Teams Message: + • Use the "Post a message" action in Microsoft Teams. + + • Configure the message to include details from the new SharePoint list item. + + 3. Action - Log Outcome in Excel: + • Use the "Add a row" action in Excel Online (Business). + + • Specify the Excel file and worksheet where you want to log the outcomes. + + • Map the necessary fields from the SharePoint item and Teams message response to the Excel columns. + + 4. Error Handling: + • Implement a "Scope" or "Condition" to handle any errors during the process and log them in the Excel file. + + 5. End of Flow: + • Ensure the flow ends gracefully, with all actions completed or errors logged. + + Note: Ensure you have the necessary permissions to access the SharePoint list, Teams, and Excel file. + +@openai-gpt> AI> Draft the steps for a Power Automate flow that watches a SharePoint list, sends a Teams message for new items, and logs outcomes in an Excel file. + + Here's a step-by-step outline for creating a Power Automate flow + to achieve your requirements: + + 1. Trigger: + • Use the "When an item is created" trigger for the SharePoint + list to start the flow whenever a new item is added. + + 2. Action - Send Teams Message: + • Add the "Post a message" action in Microsoft Teams. + + • Configure the message to include relevant details from the new SharePoint list item, such as title, description, or any other pertinent fields. + + 3. Action - Log Outcome in Excel: + • Use the "Add a row" action in Excel Online (Business). + + • Select the Excel file and worksheet where you want to log the outcomes. + + • Map fields from the SharePoint item and any response from the Teams message to the corresponding columns in the Excel file. + + 4. Error Handling: + • Implement a "Scope" or "Condition" to manage errors. If an error occurs, log the error details in the Excel file to ensure you + have a record of any issues. + + 5. End of Flow: + • Ensure the flow concludes with all actions completed successfully or errors logged, providing + a clear end to the process. + + Note: Make sure you have the necessary permissions to access and + modify the SharePoint list, Teams, and Excel file. + +@openai-gpt> - Error Troubleshooting + + The "Get-ChildItem : Access denied" error typically occurs due to insufficient permissions to access the directory or files you're + trying to list. Here are some steps to troubleshoot and resolve the issue: + + 1. Check Permissions: + • Ensure that your user account has the necessary permissions to access the directory. You may need read permissions to list the + contents. + + 2. Run as Administrator: + • Try running PowerShell as an administrator. Right-click the PowerShell icon and select "Run as administrator" to see if elevated permissions resolve the issue. + + 3. Check Path: + • Verify that the path you are trying to access is correct and + that it exists. + + 4. Antivirus/Firewall: + • Sometimes, antivirus or firewall settings can block access. Check if these are interfering and adjust settings if necessary. + + 5. Ownership: + • If you don't have permission, you might need to take ownership of the folder. This can be done through the folder's properties + in Windows Explorer. + + 6. Use Credential Parameter: + • If accessing a network location, use the -Credential parameter with Get-ChildItem to specify a user account with the necessary permissions. + + If these steps do not resolve the issue, consider checking the event logs for more detailed error + messages. + +@openai-gpt> AI> Here’s an error I just saw: Get-ChildItem : Access denied. What could cause it and how do I fix it? + + The "Get-ChildItem : Access denied" error is typically caused by + insufficient permissions to access the directory or files. Here are some steps to resolve it: + + 1. Verify Permissions: + • Ensure your user account has the necessary permissions to access the directory. You may need read permissions. + + 2. Run PowerShell as Administrator: + • Open PowerShell with elevated privileges by right-clicking the PowerShell icon and selecting "Run as administrator". + + 3. Check the Path: + • Confirm that the path you are trying to access is correct and exists. + + 4. Antivirus/Firewall Settings: + • Check if antivirus or firewall settings are blocking access and adjust them if necessary. + + 5. Ownership: + • You might need to take ownership of the folder. This can be done through the folder's properties in Windows Explorer. + + 6. Network Locations: + • If accessing a network location, use the -Credential parameter with Get-ChildItem to specify a user account with the necessary permissions. + + If these steps do not resolve the issue, check the event logs for more detailed error messages. + +@openai-gpt> - Prompt a Custom Agent + + If you have a custom agent, such as a "flow-builder," you can invoke it by addressing it directly + with your query. For example: + + flow-builder> Suggest best practices for Excel-driven email triage. + + This approach allows the custom + agent to provide specialized guidance based on its designed capabilities. If you need help setting + up or customizing an agent, let me know! + +@openai-gpt> If you created a specialist agent (e.g. flow-builder), invoke it with + + To invoke a specialist agent like "flow-builder," you would typically address it directly with your query. Here's how you might do + it: + + flow-builder> Suggest best practices for Excel-driven email triage. + + This format allows the agent to + understand that the query is directed specifically to it, enabling it to provide tailored advice or solutions based on its specialized knowledge. If you need further assistance with setting up or using a custom agent, feel free to + ask! + +@openai-gpt> /agent flow-builder +Required command was not provided. +Unrecognized command or argument 'flow-builder'. + +Description: + Command for agent management. + +Usage: + agent [command] [options] + +Options: + -h, --help Show help and + usage information + +Commands: + config Open up the + for an agent. + When no agent + is specified, + target the + active agent. + [] + list List all + available + agents. + use Specify an + or choose one + from the + available + agents. [] + +@openai-gpt> +@openai-gpt> +@openai-gpt> - Then ask it: “Suggest best practices for Excel-driven email triage.” + + To ask a specialist agent like "flow-builder" for best practices + on Excel-driven email triage, you would format your query like this: + + flow-builder> Suggest best practices for Excel-driven email triage. + + This approach directs the question to the agent, allowing it to provide insights or recommendations based on its expertise in flow + automation and email management. + If you have any more questions or need further assistance, feel free to ask! + @openai-gpt> \ No newline at end of file diff --git a/docs/source-materials/specs/mobile-first-interaction.txt b/docs/source-materials/specs/mobile-first-interaction.txt index 6018f91..d1bb7a2 100644 --- a/docs/source-materials/specs/mobile-first-interaction.txt +++ b/docs/source-materials/specs/mobile-first-interaction.txt @@ -1,108 +1,108 @@ ---- - -## 1. Embedding the Rule in Settings - -Use a small YAML front-matter block at the top of your AI-settings file. It captures all the metadata you’ll need for versioning, auditing, searchability, and programmatic access: - -```yaml -# settings/rules/mobile_first_interaction.yml - -id: mobile_first_interaction_20250708 -version: 1.0.0 -date_created: 2025-07-08 -last_updated: 2025-07-08 -author: UX Team -status: draft # or “active” / “deprecated” -keywords: [mobile-first, responsive, touch, ux, design] -description: > - Enforce designing for mobile touch interactions before scaling to desktop. -``` - -• **id**: A lowercase slug with a date suffix for uniqueness. -• **version**: Semantic versioning. -• **date_created** / **last_updated**: Track your rule’s lifecycle. -• **status**: Helps signal adoption stage. -• **keywords**: Tag for searching or filtering. -• **description**: One-line summary. - ---- - -## 2. Full Design Principle: Mobile-First Interaction Design - -```yaml ---- -id: mobile_first_interaction_20250708 -version: 1.0.0 -date_created: 2025-07-08 -last_updated: 2025-07-08 -author: UX Team -status: draft -keywords: [mobile-first, responsive, touch, ux, design] -title: Mobile-First Interaction Design ---- -``` - -### Purpose - -Ensure that all user interfaces are conceived and validated on the smallest, most constrained screens first—prioritizing touch capabilities—before progressively enhancing toward desktop and mouse interactions. - -### Core Tenets - -1. Focus on Constraints - - Build for limited screen real estate, slower networks, lower CPU. - - Force prioritization: essential content and actions only. - -2. Touch-Ready by Default - - Tap targets ≥ 44×44 px. - - Support primary gestures: tap, swipe, pinch, long-press. - - Ensure no hidden controls that rely on hover. - -3. Progressive Enhancement - - Start with a base HTML/CSS experience that works on any device. - - Layer on media-queries, touch-specific CSS, then desktop‐only adjustments. - - Gracefully degrade when JavaScript fails or is disabled. - -4. Performance as a Feature - - Lazy-load images and assets. - - Minimize render-blocking code. - - Optimize for 2G/3G networks and low-end hardware. - -5. Accessibility & Inclusion - - Ensure screen readers announce all controls. - - Provide sufficient color contrast. - - Validate with keyboard‐only navigation (some users emulate touch via keyboard). - -### Implementation Checklist - -- [ ] Wireframes & prototypes first on mobile viewport (320–480 px). -- [ ] Define all touch interactions in a gesture library. -- [ ] Use emulators **and** real devices for functional testing. -- [ ] Add responsive breakpoints incrementally (tablet → desktop). -- [ ] Run Lighthouse or similar audits for performance and accessibility. -- [ ] Document any desktop-only functionalities as progressive enhancements. - -### Validation Strategy - -1. Automated QA - - Integrate mobile‐first lint rules (e.g., enforce min-tap-target sizes). - - CI checks for missing viewport meta, uncompressed assets. - -2. Manual Testing - - Test on physical phones across OS versions. - - Validate gestures with real users or QA squads. - -3. Metrics & Monitoring - - Track Core Web Vitals on mobile vs desktop. - - Monitor touch-input error rates (mis-taps). - -### Examples & Case Studies - -- Spotify Mobile App: Prioritized swipe gestures in navigation before desktop redesign. -- Airbnb: Streamlined booking flow to fit a one-screen checkout, then expanded features for web. - -### Next Steps - -- Review and adopt this principle across all new projects. -- Migrate existing components by auditing mobile touch readiness. -- Schedule quarterly reviews to bump version and update best practices. +--- + +## 1. Embedding the Rule in Settings + +Use a small YAML front-matter block at the top of your AI-settings file. It captures all the metadata you’ll need for versioning, auditing, searchability, and programmatic access: + +```yaml +# settings/rules/mobile_first_interaction.yml + +id: mobile_first_interaction_20250708 +version: 1.0.0 +date_created: 2025-07-08 +last_updated: 2025-07-08 +author: UX Team +status: draft # or “active” / “deprecated” +keywords: [mobile-first, responsive, touch, ux, design] +description: > + Enforce designing for mobile touch interactions before scaling to desktop. +``` + +• **id**: A lowercase slug with a date suffix for uniqueness. +• **version**: Semantic versioning. +• **date_created** / **last_updated**: Track your rule’s lifecycle. +• **status**: Helps signal adoption stage. +• **keywords**: Tag for searching or filtering. +• **description**: One-line summary. + +--- + +## 2. Full Design Principle: Mobile-First Interaction Design + +```yaml +--- +id: mobile_first_interaction_20250708 +version: 1.0.0 +date_created: 2025-07-08 +last_updated: 2025-07-08 +author: UX Team +status: draft +keywords: [mobile-first, responsive, touch, ux, design] +title: Mobile-First Interaction Design +--- +``` + +### Purpose + +Ensure that all user interfaces are conceived and validated on the smallest, most constrained screens first—prioritizing touch capabilities—before progressively enhancing toward desktop and mouse interactions. + +### Core Tenets + +1. Focus on Constraints + - Build for limited screen real estate, slower networks, lower CPU. + - Force prioritization: essential content and actions only. + +2. Touch-Ready by Default + - Tap targets ≥ 44×44 px. + - Support primary gestures: tap, swipe, pinch, long-press. + - Ensure no hidden controls that rely on hover. + +3. Progressive Enhancement + - Start with a base HTML/CSS experience that works on any device. + - Layer on media-queries, touch-specific CSS, then desktop‐only adjustments. + - Gracefully degrade when JavaScript fails or is disabled. + +4. Performance as a Feature + - Lazy-load images and assets. + - Minimize render-blocking code. + - Optimize for 2G/3G networks and low-end hardware. + +5. Accessibility & Inclusion + - Ensure screen readers announce all controls. + - Provide sufficient color contrast. + - Validate with keyboard‐only navigation (some users emulate touch via keyboard). + +### Implementation Checklist + +- [ ] Wireframes & prototypes first on mobile viewport (320–480 px). +- [ ] Define all touch interactions in a gesture library. +- [ ] Use emulators **and** real devices for functional testing. +- [ ] Add responsive breakpoints incrementally (tablet → desktop). +- [ ] Run Lighthouse or similar audits for performance and accessibility. +- [ ] Document any desktop-only functionalities as progressive enhancements. + +### Validation Strategy + +1. Automated QA + - Integrate mobile‐first lint rules (e.g., enforce min-tap-target sizes). + - CI checks for missing viewport meta, uncompressed assets. + +2. Manual Testing + - Test on physical phones across OS versions. + - Validate gestures with real users or QA squads. + +3. Metrics & Monitoring + - Track Core Web Vitals on mobile vs desktop. + - Monitor touch-input error rates (mis-taps). + +### Examples & Case Studies + +- Spotify Mobile App: Prioritized swipe gestures in navigation before desktop redesign. +- Airbnb: Streamlined booking flow to fit a one-screen checkout, then expanded features for web. + +### Next Steps + +- Review and adopt this principle across all new projects. +- Migrate existing components by auditing mobile touch readiness. +- Schedule quarterly reviews to bump version and update best practices. - Integrate rule into your AI’s decision engine, using the `id` for programmatic reference. \ No newline at end of file diff --git a/docs/source-materials/specs/prompt-ai-handoff.txt b/docs/source-materials/specs/prompt-ai-handoff.txt index 66c0416..63d2d6b 100644 --- a/docs/source-materials/specs/prompt-ai-handoff.txt +++ b/docs/source-materials/specs/prompt-ai-handoff.txt @@ -1,66 +1,66 @@ -# Prompt for Finisher AI - -You are a highly skilled AI tasked with finalizing and polishing a single-page web application developed for mobile devices, optimized for the Grok 3 iOS and Android apps. The application is an interactive 3D puzzle box (“Lament Configuration”) inspired by the Hellraiser mythos, built with Three.js and embedded CSS/JavaScript. Your goal is to ensure it is fully functional, performant, and thematically cohesive, ready for deployment as a self-contained HTML file. - ---- - -## Provided Code - -Please insert the complete single-page HTML/CSS/JS code here (the compiled file from the previous iteration). - -> **Placeholder:** -> ```html -> -> ``` - ---- - -## Key Objectives - -1. **Complete Missing Features** - - Implement smooth Three.js face-rotation animations (`rotateFace`). - - Flesh out `autoSolve` with a correct solve algorithm aligning `puzzleState` to `solvedState`. - - Finalize geometric pattern functions (e.g., `createCenobiteSymbol`, rotating segments, edge details). - -2. **Enhance Rendering Pipeline** - - Embed full EffectComposer and SSAOPass code for SSAO post-processing. - - Optimize real-time shadow mapping: dynamic `shadow.mapSize`, bias, and radius adjustments for mobile. - - Add image-based lighting (IBL) via a minimal environment map (base64 HDR or fallback). - -3. **Polish Mobile Mechanics** - - Refine **Cenobite Chase Mode**: ensure timer, proximity states, vibration, audio cues, and reset on failure. - - Balance **Pinhead’s Power-Up**: non-overlapping animations, proper cooldown, and audio feedback. - - Enhance **Fragment Collection**: limit active fragments, auto-respawn, bonus rewards. - - Solidify **Quick-Solve Ritual** gesture with visual glow effect. - -4. **Performance & File Size** - - Use instanced rendering for particles (≤ 30 instances). - - Implement a 30 FPS frame limiter in the render loop. - - Minify inline JavaScript/CSS, remove unused code. - - Keep compressed file size under 200 KB (gzip). - -5. **Audio & UX** - - Replace base64 placeholders with real MP3 data (< 50 KB each). - - Add a UI mute toggle for all sounds. - - Introduce a lightweight loading screen until Three.js initialization completes. - -6. **Testing & Compatibility** - - Verify on mid-range mobile (720×1280, ~30 FPS) in current browsers and Grok 3 app. - - Ensure touch controls, vibration, and audio APIs work on iOS/Android. - - Provide basic error handling and console logs for WebGL2 or asset load failures. - ---- - -## Deliverable - -A single, self-contained HTML file with all changes integrated. Maintain no external dependencies besides the Three.js CDN. Inline assets (audio, small textures) only. Include brief inline comments to explain major sections. - ---- - -## Constraints - -- Thematic integrity: every mechanic and visual ties back to Hellraiser lore. -- Maintain a clear, readable code structure for future maintenance. -- Prioritize mobile performance and a seamless user experience. - +# Prompt for Finisher AI + +You are a highly skilled AI tasked with finalizing and polishing a single-page web application developed for mobile devices, optimized for the Grok 3 iOS and Android apps. The application is an interactive 3D puzzle box (“Lament Configuration”) inspired by the Hellraiser mythos, built with Three.js and embedded CSS/JavaScript. Your goal is to ensure it is fully functional, performant, and thematically cohesive, ready for deployment as a self-contained HTML file. + +--- + +## Provided Code + +Please insert the complete single-page HTML/CSS/JS code here (the compiled file from the previous iteration). + +> **Placeholder:** +> ```html +> +> ``` + +--- + +## Key Objectives + +1. **Complete Missing Features** + - Implement smooth Three.js face-rotation animations (`rotateFace`). + - Flesh out `autoSolve` with a correct solve algorithm aligning `puzzleState` to `solvedState`. + - Finalize geometric pattern functions (e.g., `createCenobiteSymbol`, rotating segments, edge details). + +2. **Enhance Rendering Pipeline** + - Embed full EffectComposer and SSAOPass code for SSAO post-processing. + - Optimize real-time shadow mapping: dynamic `shadow.mapSize`, bias, and radius adjustments for mobile. + - Add image-based lighting (IBL) via a minimal environment map (base64 HDR or fallback). + +3. **Polish Mobile Mechanics** + - Refine **Cenobite Chase Mode**: ensure timer, proximity states, vibration, audio cues, and reset on failure. + - Balance **Pinhead’s Power-Up**: non-overlapping animations, proper cooldown, and audio feedback. + - Enhance **Fragment Collection**: limit active fragments, auto-respawn, bonus rewards. + - Solidify **Quick-Solve Ritual** gesture with visual glow effect. + +4. **Performance & File Size** + - Use instanced rendering for particles (≤ 30 instances). + - Implement a 30 FPS frame limiter in the render loop. + - Minify inline JavaScript/CSS, remove unused code. + - Keep compressed file size under 200 KB (gzip). + +5. **Audio & UX** + - Replace base64 placeholders with real MP3 data (< 50 KB each). + - Add a UI mute toggle for all sounds. + - Introduce a lightweight loading screen until Three.js initialization completes. + +6. **Testing & Compatibility** + - Verify on mid-range mobile (720×1280, ~30 FPS) in current browsers and Grok 3 app. + - Ensure touch controls, vibration, and audio APIs work on iOS/Android. + - Provide basic error handling and console logs for WebGL2 or asset load failures. + +--- + +## Deliverable + +A single, self-contained HTML file with all changes integrated. Maintain no external dependencies besides the Three.js CDN. Inline assets (audio, small textures) only. Include brief inline comments to explain major sections. + +--- + +## Constraints + +- Thematic integrity: every mechanic and visual ties back to Hellraiser lore. +- Maintain a clear, readable code structure for future maintenance. +- Prioritize mobile performance and a seamless user experience. + Please proceed to finalize and optimize the application as outlined. \ No newline at end of file