AI Skill Report Card

Analyzing HTML Interface Content

C+65·Jun 7, 2026·Source: Extension-page
10 / 15
Python
# Extract text content from HTML interface dump from bs4 import BeautifulSoup import re def extract_interface_structure(html_content): # Remove script/style content clean_text = re.sub(r'<(script|style)[^>]*>.*?</\1>', '', html_content, flags=re.DOTALL) # Extract menu items and navigation menu_items = re.findall(r'(Ctrl\+[A-Z]|[A-Za-z\s]+►|[A-Za-z\s]+\([A-Z]\))', clean_text) return { 'interface_type': 'Google Docs', 'menu_structure': menu_items[:20], # First 20 items 'shortcuts': [item for item in menu_items if 'Ctrl+' in item] }
Recommendation
Replace the Python code example with actual HTML input/output pairs showing before and after analysis
12 / 15
  1. Initial Parse - Remove noise (scripts, styles, repeated navigation)
  2. Identify Interface Type - Look for distinctive UI patterns or brand indicators
  3. Extract Structure - Find menus, toolbars, content areas
  4. Map Functionality - Identify available actions and keyboard shortcuts
  5. Document Findings - Organize extracted information systematically

Progress:

  • Clean HTML content of scripts/styles
  • Identify primary interface type
  • Extract menu hierarchies
  • List keyboard shortcuts
  • Document user capabilities
Recommendation
Make examples more concrete - show actual HTML snippets as input and structured data as output rather than abstract descriptions
8 / 20

Example 1: Input: Google Docs interface HTML with menu structures Output:

  • Interface: Google Docs editor
  • Key shortcuts: Ctrl+O (Open), Ctrl+S (Share), Ctrl+Z (Undo)
  • Menu categories: File, Edit, View, Insert, Format, Tools

Example 2: Input: Web application dashboard HTML Output:

  • Interface: Admin dashboard
  • Navigation: Users, Reports, Settings, Analytics
  • Actions: Create, Edit, Delete, Export

Example 3: Input: E-commerce product page source Output:

  • Page type: Product detail page
  • Key elements: Price, Add to cart, Reviews, Specifications
  • Interactive features: Image zoom, quantity selector
Recommendation
Add specific extraction patterns for common interface elements (forms, modals, navigation bars) with regex or parsing examples
  • Focus on actionable elements (buttons, links, forms) over decorative content
  • Preserve hierarchical relationships in menu structures
  • Extract keyboard shortcuts as they indicate power user features
  • Identify form fields and their validation requirements
  • Note accessibility features (ARIA labels, alt text)
  • Don't get overwhelmed by verbose HTML - focus on semantic content
  • Avoid analyzing minified or obfuscated code without proper formatting
  • Don't ignore error messages or status indicators in the interface
  • Avoid assuming functionality based on labels alone - look for actual form actions
0
Grade C+AI Skill Framework
Scorecard
Criteria Breakdown
Quick Start
10/15
Workflow
12/15
Examples
8/20
Completeness
8/20
Format
15/15
Conciseness
12/15