imhcode 1.0.0

package/skills/mobile-app-design/scripts/accessibility-audit.sh

@@ -0,0 +1,281 @@
+#!/bin/bash
+# Accessibility Audit Script for React Native Components
+#
+# Checks for common accessibility issues:
+# - Missing accessibility labels
+# - Missing accessibility hints
+# - Missing accessibility roles
+# - Images without alt text (accessibilityLabel)
+# - Interactive elements without labels
+#
+# Usage:
+#   ./accessibility-audit.sh <directory>
+#   ./accessibility-audit.sh src/screens --verbose
+
+set -e
+
+# Colors
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m'
+
+# Counters
+total_files=0
+files_with_issues=0
+total_issues=0
+missing_labels=0
+missing_roles=0
+unlabeled_images=0
+
+show_help() {
+    cat << EOF
+Usage: $0 [OPTIONS] <directory>
+
+Audit React Native components for accessibility issues.
+
+OPTIONS:
+    -h, --help          Show this help message
+    -v, --verbose       Show all files checked
+    --fix-suggestions   Show code fix suggestions for each issue
+
+CHECKS:
+    ✓ accessibilityLabel on interactive elements
+    ✓ accessibilityRole on buttons, links, images
+    ✓ accessibilityLabel on Image components
+    ✓ accessibilityHint for complex interactions
+    ✓ Proper label text (not including type like "button")
+
+EXAMPLES:
+    $0 src/components
+    $0 . --verbose
+    $0 src/screens --fix-suggestions
+
+WCAG Guidelines:
+    - WCAG 2.1 Level AA compliance
+    - All interactive elements must have labels
+    - Labels should be descriptive and concise
+    - Don't include element type in label
+EOF
+}
+
+check_accessibility() {
+    local file="$1"
+    local verbose="$2"
+    local show_fixes="$3"
+
+    local issues=0
+    local line_num=0
+    local in_component=false
+    local component_name=""
+    local has_label=false
+    local has_role=false
+
+    while IFS= read -r line; do
+        ((line_num++))
+
+        # Detect interactive components
+        if echo "$line" | grep -qE '<(TouchableOpacity|TouchableHighlight|Pressable|Button|TouchableWithoutFeedback)'; then
+            in_component=true
+            component_name=$(echo "$line" | grep -oE '<[A-Za-z]+' | tr -d '<')
+            has_label=false
+            has_role=false
+
+            # Check if label and role are on same line
+            if echo "$line" | grep -q 'accessibilityLabel'; then
+                has_label=true
+
+                # Check for common mistakes in label text
+                if echo "$line" | grep -qE 'accessibilityLabel=.*[Bb]utton'; then
+                    echo -e "${YELLOW}⚠${NC}  $file:$line_num - Label includes 'button' (redundant with role)"
+                    echo "    $line"
+                    if [ "$show_fixes" = "true" ]; then
+                        echo -e "    ${BLUE}Fix:${NC} Remove 'button' from label, use accessibilityRole instead"
+                    fi
+                    ((issues++))
+                fi
+            fi
+
+            if echo "$line" | grep -q 'accessibilityRole'; then
+                has_role=true
+            fi
+        fi
+
+        # Continue checking multi-line component props
+        if [ "$in_component" = "true" ]; then
+            if echo "$line" | grep -q 'accessibilityLabel'; then
+                has_label=true
+            fi
+            if echo "$line" | grep -q 'accessibilityRole'; then
+                has_role=true
+            fi
+
+            # End of component
+            if echo "$line" | grep -q '>'; then
+                if [ "$has_label" = "false" ]; then
+                    echo -e "${RED}✗${NC} $file:$line_num - $component_name missing accessibilityLabel"
+                    if [ "$show_fixes" = "true" ]; then
+                        echo -e "    ${BLUE}Fix:${NC} Add accessibilityLabel=\"Description of action\""
+                    fi
+                    ((issues++))
+                    ((missing_labels++))
+                fi
+
+                if [ "$has_role" = "false" ]; then
+                    echo -e "${YELLOW}⚠${NC}  $file:$line_num - $component_name missing accessibilityRole"
+                    if [ "$show_fixes" = "true" ]; then
+                        echo -e "    ${BLUE}Fix:${NC} Add accessibilityRole=\"button\" (or appropriate role)"
+                    fi
+                    ((issues++))
+                    ((missing_roles++))
+                fi
+
+                in_component=false
+            fi
+        fi
+
+        # Check for Image components
+        if echo "$line" | grep -qE '<Image\s'; then
+            if ! echo "$line" | grep -q 'accessibilityLabel'; then
+                # Check next few lines for accessibilityLabel
+                local has_label_nearby=false
+                for i in {1..3}; do
+                    local next_line=$(sed -n "$((line_num + i))p" "$file")
+                    if echo "$next_line" | grep -q 'accessibilityLabel'; then
+                        has_label_nearby=true
+                        break
+                    fi
+                    if echo "$next_line" | grep -q '/>'; then
+                        break
+                    fi
+                done
+
+                if [ "$has_label_nearby" = "false" ]; then
+                    echo -e "${RED}✗${NC} $file:$line_num - Image without accessibilityLabel"
+                    echo "    $line"
+                    if [ "$show_fixes" = "true" ]; then
+                        echo -e "    ${BLUE}Fix:${NC} Add accessibilityLabel=\"Description of image\""
+                        echo -e "    ${BLUE}Or:${NC} If decorative, use accessibilityRole=\"none\""
+                    fi
+                    ((issues++))
+                    ((unlabeled_images++))
+                fi
+            fi
+        fi
+
+        # Check for links without labels
+        if echo "$line" | grep -qE '<(Text|Linking).*onPress'; then
+            if ! echo "$line" | grep -q 'accessibilityRole'; then
+                echo -e "${YELLOW}⚠${NC}  $file:$line_num - Interactive Text without accessibilityRole"
+                if [ "$show_fixes" = "true" ]; then
+                    echo -e "    ${BLUE}Fix:${NC} Add accessibilityRole=\"link\" or \"button\""
+                fi
+                ((issues++))
+            fi
+        fi
+
+    done < "$file"
+
+    if [ "$verbose" = "true" ] && [ "$issues" -eq 0 ]; then
+        echo -e "${GREEN}✓${NC} $file - No accessibility issues found"
+    fi
+
+    echo "$issues"
+}
+
+audit_directory() {
+    local dir="$1"
+    local verbose="$2"
+    local show_fixes="$3"
+
+    echo -e "${BLUE}Auditing accessibility in: $dir${NC}"
+    echo ""
+
+    # Find all .tsx and .jsx files
+    while IFS= read -r file; do
+        ((total_files++))
+
+        local file_issues
+        file_issues=$(check_accessibility "$file" "$verbose" "$show_fixes")
+
+        if [ "$file_issues" -gt 0 ]; then
+            ((files_with_issues++))
+            ((total_issues += file_issues))
+        fi
+    done < <(find "$dir" -type f \( -name "*.tsx" -o -name "*.jsx" \) 2>/dev/null)
+
+    echo ""
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BLUE}Accessibility Audit Summary${NC}"
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo "Files checked: $total_files"
+    echo "Files with issues: $files_with_issues"
+    echo "Total issues: $total_issues"
+    echo ""
+    echo "Issue breakdown:"
+    echo "  Missing labels: $missing_labels"
+    echo "  Missing roles: $missing_roles"
+    echo "  Unlabeled images: $unlabeled_images"
+
+    if [ "$total_issues" -eq 0 ]; then
+        echo -e "\n${GREEN}✓✓ Excellent! No accessibility issues found!${NC}"
+        exit 0
+    else
+        echo -e "\n${YELLOW}⚠ Found $total_issues accessibility issues${NC}"
+        echo ""
+        echo "Key recommendations:"
+        echo "  1. Add accessibilityLabel to all interactive elements"
+        echo "  2. Add accessibilityRole to indicate element type"
+        echo "  3. Add accessibilityLabel to images (or mark as decorative)"
+        echo "  4. Don't include element type in label text"
+        echo "  5. Test with VoiceOver (iOS) and TalkBack (Android)"
+        echo ""
+        echo "Resources:"
+        echo "  - WCAG 2.1 Guidelines: https://www.w3.org/WAI/WCAG21/quickref/"
+        echo "  - React Native Accessibility: https://reactnative.dev/docs/accessibility"
+        exit 1
+    fi
+}
+
+# Parse arguments
+DIRECTORY=""
+VERBOSE=false
+SHOW_FIXES=false
+
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        -h|--help)
+            show_help
+            exit 0
+            ;;
+        -v|--verbose)
+            VERBOSE=true
+            shift
+            ;;
+        --fix-suggestions)
+            SHOW_FIXES=true
+            shift
+            ;;
+        *)
+            DIRECTORY="$1"
+            shift
+            ;;
+    esac
+done
+
+# Validate arguments
+if [ -z "$DIRECTORY" ]; then
+    echo "Error: No directory specified"
+    echo ""
+    show_help
+    exit 1
+fi
+
+if [ ! -d "$DIRECTORY" ]; then
+    echo "Error: Directory not found: $DIRECTORY"
+    exit 1
+fi
+
+# Run audit
+audit_directory "$DIRECTORY" "$VERBOSE" "$SHOW_FIXES"

package/skills/mobile-app-design/scripts/check-contrast.py

@@ -0,0 +1,188 @@
+#!/usr/bin/env python3
+"""
+WCAG Contrast Ratio Checker
+
+Checks if color combinations meet WCAG AA or AAA standards.
+Usage:
+    python check-contrast.py "#FFFFFF" "#000000"
+    python check-contrast.py --text "#657786" --bg "#FFFFFF"
+"""
+
+import sys
+import argparse
+from typing import Tuple
+
+
+def hex_to_rgb(hex_color: str) -> Tuple[int, int, int]:
+    """Convert hex color to RGB tuple."""
+    hex_color = hex_color.lstrip('#')
+    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
+
+
+def relative_luminance(rgb: Tuple[int, int, int]) -> float:
+    """
+    Calculate relative luminance according to WCAG formula.
+    https://www.w3.org/WAI/GL/wiki/Relative_luminance
+    """
+    def adjust(channel: int) -> float:
+        c = channel / 255.0
+        if c <= 0.03928:
+            return c / 12.92
+        else:
+            return ((c + 0.055) / 1.055) ** 2.4
+
+    r, g, b = [adjust(c) for c in rgb]
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b
+
+
+def contrast_ratio(color1: str, color2: str) -> float:
+    """Calculate contrast ratio between two colors."""
+    rgb1 = hex_to_rgb(color1)
+    rgb2 = hex_to_rgb(color2)
+
+    l1 = relative_luminance(rgb1)
+    l2 = relative_luminance(rgb2)
+
+    lighter = max(l1, l2)
+    darker = min(l1, l2)
+
+    return (lighter + 0.05) / (darker + 0.05)
+
+
+def check_wcag_compliance(ratio: float, text_size: str = 'normal') -> dict:
+    """
+    Check WCAG compliance levels.
+
+    Args:
+        ratio: Contrast ratio
+        text_size: 'normal' (<18pt or <14pt bold) or 'large' (>=18pt or >=14pt bold)
+
+    Returns:
+        Dictionary with compliance levels
+    """
+    if text_size == 'normal':
+        aa_required = 4.5
+        aaa_required = 7.0
+    else:  # large text
+        aa_required = 3.0
+        aaa_required = 4.5
+
+    return {
+        'ratio': ratio,
+        'AA': ratio >= aa_required,
+        'AAA': ratio >= aaa_required,
+        'AA_required': aa_required,
+        'AAA_required': aaa_required,
+    }
+
+
+def format_result(text_color: str, bg_color: str, text_size: str = 'normal') -> str:
+    """Format and return the contrast check result."""
+    ratio = contrast_ratio(text_color, bg_color)
+    compliance = check_wcag_compliance(ratio, text_size)
+
+    result = []
+    result.append(f"\n{'='*60}")
+    result.append(f"WCAG Contrast Ratio Check")
+    result.append(f"{'='*60}")
+    result.append(f"Text Color:       {text_color}")
+    result.append(f"Background Color: {bg_color}")
+    result.append(f"Text Size:        {text_size}")
+    result.append(f"\nContrast Ratio:   {ratio:.2f}:1")
+    result.append(f"{'='*60}")
+
+    # WCAG AA
+    aa_symbol = "✓" if compliance['AA'] else "✗"
+    result.append(f"WCAG AA ({compliance['AA_required']}:1):  {aa_symbol} {'PASS' if compliance['AA'] else 'FAIL'}")
+
+    # WCAG AAA
+    aaa_symbol = "✓" if compliance['AAA'] else "✗"
+    result.append(f"WCAG AAA ({compliance['AAA_required']}:1): {aaa_symbol} {'PASS' if compliance['AAA'] else 'FAIL'}")
+
+    result.append(f"{'='*60}")
+
+    # Recommendations
+    if not compliance['AA']:
+        result.append("\n⚠️  WARNING: Does not meet WCAG AA standards!")
+        result.append("   Consider:")
+        result.append("   - Using darker text on light background")
+        result.append("   - Using lighter text on dark background")
+        result.append("   - Increasing text size if possible")
+    elif not compliance['AAA']:
+        result.append("\n✓  Meets WCAG AA (minimum standard)")
+        result.append("💡 Consider improving to AAA for better accessibility")
+    else:
+        result.append("\n✓✓ Excellent! Meets both AA and AAA standards")
+
+    result.append("")
+    return "\n".join(result)
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description='Check WCAG contrast ratio between two colors',
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+Examples:
+  %(prog)s "#FFFFFF" "#000000"
+  %(prog)s --text "#657786" --bg "#FFFFFF"
+  %(prog)s --text "#FFFFFF" --bg "#1DA1F2" --size large
+
+Common color combinations to test:
+  Light theme - Primary text:   "#14171A" on "#FFFFFF"
+  Light theme - Secondary text:  "#657786" on "#FFFFFF"
+  Dark theme - Primary text:    "#FFFFFF" on "#000000"
+  Button - White on brand:      "#FFFFFF" on "#1DA1F2"
+        """
+    )
+
+    parser.add_argument(
+        'colors',
+        nargs='*',
+        help='Two hex colors (text and background)'
+    )
+    parser.add_argument(
+        '--text', '-t',
+        help='Text color (hex format: #RRGGBB)'
+    )
+    parser.add_argument(
+        '--bg', '-b',
+        help='Background color (hex format: #RRGGBB)'
+    )
+    parser.add_argument(
+        '--size', '-s',
+        choices=['normal', 'large'],
+        default='normal',
+        help='Text size: normal (<18pt) or large (>=18pt or >=14pt bold)'
+    )
+    parser.add_argument(
+        '--batch',
+        action='store_true',
+        help='Batch mode: test multiple combinations from stdin'
+    )
+
+    args = parser.parse_args()
+
+    # Determine text and background colors
+    if args.text and args.bg:
+        text_color = args.text
+        bg_color = args.bg
+    elif len(args.colors) == 2:
+        text_color, bg_color = args.colors
+    else:
+        parser.print_help()
+        sys.exit(1)
+
+    # Validate hex format
+    for color in [text_color, bg_color]:
+        if not color.startswith('#') or len(color) != 7:
+            print(f"Error: Invalid hex color format: {color}")
+            print("Expected format: #RRGGBB (e.g., #FFFFFF)")
+            sys.exit(1)
+
+    # Check and print result
+    print(format_result(text_color, bg_color, args.size))
+
+
+if __name__ == '__main__':
+    main()

package/skills/mobile-app-design/scripts/validate-touch-targets.sh

@@ -0,0 +1,228 @@
+#!/bin/bash
+# Touch Target Size Validator for React Native Components
+#
+# Validates that interactive components meet minimum touch target sizes:
+# - iOS: 44×44 pt minimum
+# - Android: 48×48 dp minimum
+#
+# Usage:
+#   ./validate-touch-targets.sh <directory>
+#   ./validate-touch-targets.sh src/components
+#   ./validate-touch-targets.sh . --strict
+
+set -e
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Minimum sizes
+IOS_MIN=44
+ANDROID_MIN=48
+STRICT_MIN=$ANDROID_MIN
+
+# Counters
+total_files=0
+files_with_issues=0
+total_issues=0
+
+show_help() {
+    cat << EOF
+Usage: $0 [OPTIONS] <directory>
+
+Validate touch target sizes in React Native components.
+
+OPTIONS:
+    -h, --help          Show this help message
+    -s, --strict        Use strict mode (48dp minimum for all)
+    -v, --verbose       Show all files checked, not just issues
+    --ios-only          Only check iOS minimum (44pt)
+    --android-only      Only check Android minimum (48dp)
+
+EXAMPLES:
+    $0 src/components
+    $0 . --strict
+    $0 src --verbose
+
+CHECKS:
+    - TouchableOpacity, TouchableHighlight, Pressable dimensions
+    - Button, IconButton component sizes
+    - Custom button components with style props
+    - hitSlop configuration
+
+MINIMUM SIZES:
+    iOS:     44×44 pt
+    Android: 48×48 dp
+    Strict:  48×48 (use larger of the two)
+EOF
+}
+
+check_component_sizes() {
+    local file="$1"
+    local verbose="$2"
+    local strict_mode="$3"
+    local platform="$4"
+
+    local issues=0
+    local line_num=1
+
+    # Determine minimum size based on mode
+    local min_size=$IOS_MIN
+    if [ "$strict_mode" = "true" ]; then
+        min_size=$STRICT_MIN
+    elif [ "$platform" = "android" ]; then
+        min_size=$ANDROID_MIN
+    fi
+
+    # Check for TouchableOpacity, Pressable, etc. with style props
+    while IFS= read -r line; do
+        # Check for interactive components
+        if echo "$line" | grep -qE '<(TouchableOpacity|TouchableHighlight|Pressable|TouchableWithoutFeedback|Button)'; then
+            # Look for width/height in style
+            if echo "$line" | grep -qE 'width:\s*[0-9]+' || echo "$line" | grep -qE 'height:\s*[0-9]+'; then
+                # Extract width and height values
+                width=$(echo "$line" | grep -oE 'width:\s*[0-9]+' | grep -oE '[0-9]+' || echo "0")
+                height=$(echo "$line" | grep -oE 'height:\s*[0-9]+' | grep -oE '[0-9]+' || echo "0")
+
+                # Check if either dimension is below minimum
+                if [ -n "$width" ] && [ "$width" -lt "$min_size" ] && [ "$width" -gt 0 ]; then
+                    echo -e "${RED}✗${NC} $file:$line_num - Width $width < minimum $min_size"
+                    echo "    $line"
+                    ((issues++))
+                fi
+
+                if [ -n "$height" ] && [ "$height" -lt "$min_size" ] && [ "$height" -gt 0 ]; then
+                    echo -e "${RED}✗${NC} $file:$line_num - Height $height < minimum $min_size"
+                    echo "    $line"
+                    ((issues++))
+                fi
+            fi
+
+            # Check for missing hitSlop on small components
+            if ! echo "$line" | grep -q 'hitSlop' && ! echo "$line" | grep -qE '(width|height):\s*[4-9][0-9]'; then
+                # Only warn if component seems small
+                if echo "$line" | grep -qE '(width|height):\s*[1-3][0-9]'; then
+                    echo -e "${YELLOW}⚠${NC}  $file:$line_num - Small component without hitSlop"
+                    echo "    Consider adding hitSlop={{top: 8, bottom: 8, left: 8, right: 8}}"
+                    echo "    $line"
+                    ((issues++))
+                fi
+            fi
+        fi
+
+        ((line_num++))
+    done < "$file"
+
+    if [ "$verbose" = "true" ] && [ "$issues" -eq 0 ]; then
+        echo -e "${GREEN}✓${NC} $file - All touch targets meet minimum size"
+    fi
+
+    echo "$issues"
+}
+
+validate_directory() {
+    local dir="$1"
+    local verbose="$2"
+    local strict_mode="$3"
+    local platform="$4"
+
+    echo -e "${BLUE}Validating touch targets in: $dir${NC}"
+    echo -e "${BLUE}Minimum size: ${min_size}×${min_size}${NC}"
+    echo ""
+
+    # Find all .tsx and .jsx files
+    while IFS= read -r file; do
+        ((total_files++))
+
+        local file_issues
+        file_issues=$(check_component_sizes "$file" "$verbose" "$strict_mode" "$platform")
+
+        if [ "$file_issues" -gt 0 ]; then
+            ((files_with_issues++))
+            ((total_issues += file_issues))
+        fi
+    done < <(find "$dir" -type f \( -name "*.tsx" -o -name "*.jsx" \) 2>/dev/null)
+
+    echo ""
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BLUE}Summary${NC}"
+    echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo "Files checked: $total_files"
+    echo "Files with issues: $files_with_issues"
+    echo "Total issues: $total_issues"
+
+    if [ "$total_issues" -eq 0 ]; then
+        echo -e "\n${GREEN}✓ All touch targets meet minimum size requirements!${NC}"
+        exit 0
+    else
+        echo -e "\n${YELLOW}⚠ Found $total_issues touch target issues${NC}"
+        echo ""
+        echo "Recommendations:"
+        echo "  1. Increase component size to minimum ${min_size}×${min_size}"
+        echo "  2. Add hitSlop to extend touch area without changing visual size"
+        echo "  3. Use accessible={true} and appropriate accessibility labels"
+        exit 1
+    fi
+}
+
+# Parse arguments
+DIRECTORY=""
+VERBOSE=false
+STRICT=false
+PLATFORM="both"
+
+while [[ $# -gt 0 ]]; do
+    case $1 in
+        -h|--help)
+            show_help
+            exit 0
+            ;;
+        -v|--verbose)
+            VERBOSE=true
+            shift
+            ;;
+        -s|--strict)
+            STRICT=true
+            shift
+            ;;
+        --ios-only)
+            PLATFORM="ios"
+            shift
+            ;;
+        --android-only)
+            PLATFORM="android"
+            shift
+            ;;
+        *)
+            DIRECTORY="$1"
+            shift
+            ;;
+    esac
+done
+
+# Validate arguments
+if [ -z "$DIRECTORY" ]; then
+    echo "Error: No directory specified"
+    echo ""
+    show_help
+    exit 1
+fi
+
+if [ ! -d "$DIRECTORY" ]; then
+    echo "Error: Directory not found: $DIRECTORY"
+    exit 1
+fi
+
+# Determine minimum size for display
+min_size=$IOS_MIN
+if [ "$STRICT" = "true" ]; then
+    min_size=$STRICT_MIN
+elif [ "$PLATFORM" = "android" ]; then
+    min_size=$ANDROID_MIN
+fi
+
+# Run validation
+validate_directory "$DIRECTORY" "$VERBOSE" "$STRICT" "$PLATFORM"