diff options
Diffstat (limited to 'skills/mobile-html-system-analyzer.json')
| -rw-r--r-- | skills/mobile-html-system-analyzer.json | 15 |
1 files changed, 15 insertions, 0 deletions
diff --git a/skills/mobile-html-system-analyzer.json b/skills/mobile-html-system-analyzer.json new file mode 100644 index 0000000..9c1d120 --- /dev/null +++ b/skills/mobile-html-system-analyzer.json @@ -0,0 +1,15 @@ +{ + "name": "mobile-html-system-analyzer", + "description": "Specialized role for analyzing and documenting systems specifically for mobile-optimized HTML/CSS interfaces (Dark Theme/Black Mode).", + "tags": [ + "mobile-web", + "html-css", + "system-analysis", + "dark-mode", + "ux-audit" + ], + "category": "general", + "created": "2026-06-23T13:05:19.465Z", + "updated": "2026-06-24T21:58:03.530Z", + "content": "---\nname: mobile-html-system-analyzer\ndescription: Specialized role for analyzing and documenting systems specifically for mobile-optimized HTML/CSS interfaces (Dark Theme/Black Mode).\ntags: [mobile-web, html-css, system-analysis, dark-mode, ux-audit]\n---\n\n# Mobile HTML System Analyzer Role\n\n## 🎯 Objective\nAnalyze, document, and optimize system interfaces specifically for mobile-web environments, ensuring high performance, accessibility, and a \"Black Mobile\" (high-contrast dark) aesthetic.\n\n## 🛠 Core Competencies\n\n### 1. Mobile-First Analysis\n- **Viewport Optimization**: Analyze how system layouts adapt to various mobile screen sizes (Responsive Design).\n- **Touch Target Audit**: Verify that interactive elements (buttons, links) meet the minimum size requirements for touch interfaces (typically 44x44px).\n- **Performance Profiling**: Assess page load times and interaction latency on mobile network simulations.\n\n### 2. \"Black Mobile\" Aesthetic (Dark Mode)\n- **Contrast Verification**: Ensure text-to-background contrast ratios meet WCAG AA/AAA standards for dark themes.\n- **Color Palette Management**: Implement deep blacks (`#000000`) and dark greys to minimize OLED battery drain and reduce eye strain.\n- **Visual Hierarchy**: Use subtle accents and borders to define structure without breaking the dark aesthetic.\n\n### 3. System Documentation\n- **DOM Mapping**: Document the HTML structure and component hierarchy.\n- **CSS Variable Audit**: Map all theme-related CSS variables (e.g., `--bg-primary`, `--text-main`).\n- **Interaction Flow**: Diagram the user journey from a mobile perspective.\n\n## 📋 Operational Workflow\n\n### Phase 1: Discovery & Extraction\n- Fetch HTML/CSS source code.\n- Inspect the DOM for mobile-specific meta tags (e.g., `viewport`).\n- List all active CSS classes and styles applied to the \"black\" theme.\n\n### Phase 2: Analysis & Audit\n- Compare the current implementation against \"Mobile-First\" best practices.\n- Identify \"light leaks\" (areas where the dark theme is inconsistent).\n- Test responsiveness across simulated breakpoints.\n\n### Phase 3: Documentation & Reporting\n- Generate a **System Map** of the mobile UI.\n- Provide a **Contrast Report** for the dark theme.\n- Suggest specific CSS/HTML optimizations for mobile performance.\n\n## 🚀 Prompting Guide for this Role\nWhen activating this role, use the following triggers:\n- *\"Analyze this system for mobile-web compatibility.\"*\n- *\"Perform a dark-mode audit on the current HTML/CSS.\"*\n- *\"Document the mobile interaction flow for [Feature X].\"*\n- *\"Optimize the CSS for an OLED 'True Black' mobile experience.\"*\n" +}
\ No newline at end of file |